Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

  1.  
    How do I create a 2-column or 3-column form without using table format (i.e., using the Grid Row section to make a table) or inline section?

    Example of a website is salesforce.com's contact page, https://www.salesforce.com/form/offer/cme-promo.jsp?d=70130000000EvoR&internal=true

    Thanks!
    • CommentAuthordbuschho
    • CommentTimeJan 4th 2010
     
    Hello,

    Note that the page you link to, their form is table based:

    <table cellspacing="0" cellpadding="0" border="0">
    <tbody><tr>
    <td class="col1"><label id="UserFirstName_lbl" for="UserFirstName">First Name:<span class="red">*</span></label></td>
    <td class="col2"><input type="text" class="std" maxlength="255" id="UserFirstName" name="UserFirstName"/></td>
    <td class="col3"><label id="UserLastName_lbl" for="UserLastName">Last Name:<span class="red">*</span></label></td>
    <td class="col4"><input type="text" class="std" maxlength="255" id="UserLastName" name="UserLastName"/></td>
    </tr>


    <tr>
    <td class="col1"><label id="UserTitle_lbl" for="UserTitle">Job Title:<span class="red">*</span></label></td>
    <td class="col2"><input type="text" class="std" maxlength="255" id="UserTitle" name="UserTitle"/></td>
    <td class="col3"><label id="UserEmail_lbl" for="UserEmail">E-mail:<span class="red">*</span></label></td>
    <td class="col4"><input type="text" class="std" maxlength="255" id="UserEmail" name="UserEmail"/></td>
    </tr>
    <tr>
    <td class="col1"><label id="UserPhone_lbl" for="UserPhone">Phone:<span class="red">*</span></label></td>
    <td class="col2"><input type="text" class="std" maxlength="255" id="UserPhone" name="UserPhone"/></td>
    <td class="col3"><label for="CompanyName">Company:<span class="red">*</span></label></td>
    <td class="col4"><input type="text" class="std" maxlength="255" id="CompanyName" name="CompanyName"/></td>
    </tr>
    ...

    That being said, you could to create a three column layout using divs by wrapping each columns set of questions inside a folder fieldset, then looking into the HTML source code of your form to find the fieldsets' ids. With that information, you should be able to setup CSS code in the custom code block to format into a three column layout.

    I'll leave it to our CSS specialist Hillary to get more into details with you about it if you still want to do it that way as opposed to grids.
  2.  
    I believe I understand how the Grid Row section works now. I will not be needed the CSS code for tables. Thank you very much.