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 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 Registration template.
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.
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:
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.
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
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.
