Contact Form 7 Fields Side by Side

Contact Form 7 (CF7) users often like to display commonly used form fields like Name and Email side by side on a single line.

However many people find this task challenging because they don’t have a detailed knowledge of HTML and 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 should be able to put several fields side by side on a single line styled with CF7 Skins Ready singleline.

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

Set-up a CF7 form and styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. 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 Registration templateTemplate CF7 Skins Templates are the structure of your form, providing the content and layout. They act as an easy to follow guide that can be adjusted to your particular needs..

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.

This form is made with CF7 Skins + CF7 Skins Pro

For our example form above, we’ll organize the first five fields into beautifully styled single line form fields using CF7 Skins Ready singleline.

Arrange your form elements on single line

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

NOTE: To follow the steps in the rest of this tutorial you will need to have purchased our CF7 Skins Ready add-on plugin, which makes it possible to do this with no knowledge of HTML and CSS.

Add Singleline class to your form fields

Let’s start with the first row, i.e. the Name & Email fields.

We need to assign the singleline Ready class to the appropriate LIST-OL items. You can do this in 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 singleline (your desired Ready class).

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

B. Use the edit dialog box

Click the edit icon on the LIST-OL element.

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

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

Now, you can repeat this process for the second row, i.e. for the Address, City, 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:

Final Layout

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

This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready

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 singleline 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>Registration</legend>
        <ol>
            <ol class="singleline"> 
                <li> Name [text cf7s-name] </li>		
                <li> Email [email cf7s-email] </li>
            </ol> 
            <ol class="singleline"> 		
                <li> Address [text cf7s-address] </li>		
                <li> City [text cf7s-city] </li>		
                <li> Phone Number [tel cf7s-phone] </li>
            </ol>
        <li> Message [textarea cf7s-special-needs] </li>
        </ol>

    [submit "Submit"]

</fieldset>

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

Further reading

• CF7 Skins Ready
• CF7 Skins Ready – singleline
• CF7 Skins Ready – grid

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.