Contact Form 7 (CF7) users often like to add evenly spaced columns to their forms.

Contact Form 7 Fields in Column example form

However, many people find this task challenging because they don’t have a strong knowledge of HTML & CSS.

CF7 Skins Ready, an add-on for our popular Contact Form 7 Skins plugin, makes it possible to do this with no knowledge of HTML and CSS.

By the end of this article, you will be able to change a single column Contact Form 7 form into a two column form using the CF7 Skins Ready column.

Refer to CF7 Skins Ready – column if you’d like more detailed step-by-step instructions.

Set-up a CF7 form and style it with CF7 Skins

1. Download and install the Contact Form 7 and Contact Form 7 Skins plugins if you haven’t already done that.

2. Create a new Contact Form 7 form or use an existing one.If you don’t know how to do this, see Create a form with CF7 Skins.

3. Select a CF7 Skins Template – in this case let’s start with the Contact template.

Select a Contact Form 7 template from Template tab

4. Next copy the shortcode generated by Contact Form 7 and paste it in the page, post or widget where you want to display your form.

    Contact Form

    * Required

     
    In our example form above, we’ll organize the four form fields into two columns using the CF7 Skins Ready column class.

    Arrange your form elements in columns

    We want to arrange the first five fields as shown below:

    Contact Form template

    Add Column class to your form fields

    Let’s start with the first column, i.e. the Your Name & Email Address fields.

    We need to assign the column Ready class to the appropriate LIST-OL items. You can do this one of two ways:

    A. Use the dropdown menu to the right of the element

    Click on the dropdown menu to the right of the LIST-OL element.

    Click Ready Class to see a list of options. From the available list, choose column (your desired Ready class).

    Select Column option from the Ready Class list

    Tip: Ready classes which are not permitted on a particular element are automatically disabled.

    B. Using the edit dialog box

    Click on the edit icon edit-icon on the LIST-OL element.

    Click edit icon on the List-OL tab

    Then, check the Ready class you want from the dialog box that appears in the sidebar.

    LIST-OL dialog box

    Tip: Wherever you work, changes will appear instantly in both locations.

    Now, you can repeat this process for the second column, i.e. for the Website and Phone Number fields.

    That’s it, you are all done! Now, just press the Save Visual button. Here is the final form you should have in the CF7 Skins Visual Editor:

    Save Visual button

    Final Layout

    After you’ve completed the form, the form elements under the same LIST-OL which has the column class will appear in the same column. You can see the final results below.

      Contact Form

      * Required

      Note: On a mobile device, the fields may appear stacked on top of each other and not side by side. This is because CF7 Skins has responsive design, which makes contact forms easy to use and better-looking in mobile and handheld devices.

      Tip: Fields within column are automatically evenly spaced by CF7 Skins Ready. If you want more control over individual field widths you should use the grid Ready Class.

      CF7 Form Code

      Your final form code should look something like this, at the end:

      <fieldset>
      	<legend>Contact Form</legend>
      	<ol>
      		<li>
      			<ol class="column">
      				<li>Your Name (required) [text* text-193]</li>
      				<li>Email Address (required) [email* email-933]</li>
      			</ol>
      			<ol class="column">
      				<li>Website [text* text-674]</li>
      				<li>Phone Number [tel tel-881]</li>
      			</ol>
      			<ol>
      				<li>Your Message [textarea textarea-427]</li>
      			</ol>
      		</li>
      	</ol>
      </fieldset>
      [submit "Send"]
      <p>
      	* Required
      </p>
      

      Tip: You can still use the traditional CF7 form editor to build the form.

      Further reading

      Have Questions or Need Help?

      If you are using the free version of CF7 Skins and have any questions, get in touch via the CF7 Skins community and also the Contact Form 7 Support forum.

      If you are using any of our CF7 Skins Add-ons, then Premium Email Support is available to deal with your questions and problems.

      Drag & Drop Visual Editor for Contact Form 7

      %d bloggers like this: