One of the preferred styling options of Contact Form 7 users is to display commonly used form fields like “name” and “email” side by side on a single line. However many users find this task challenging due to their limited 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 very little or no programing knowledge. It provides several useful CSS classes that make it easy to display form fields in various styles.
In this article, we’ll focus on displaying form fields side by side on a single line using the CF7 Skins Ready singleline class.
Before you begin
But before we get started, there are a few things you need to know.
- How to set up a Contact Form 7 Form – Learn more.
- A basic understanding of CSS class selectors – Learn more.
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.
Displaying form fields side by side
The images below show two forms styled with CF7 Skins. Form one shows the default CF7 Skins styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. with a form field on each line. Form two shows the final results after adding the CF7 Skins Ready singleline CSS class. It displays several form fields on one line – line one of form two has two form fields and line two has three.
Set-up a Contact Form 7 form with CF7 Skins
Download and install the Contact Form 7 and CF7 Skins plugins if you haven’t already done that. Create a new Contact Form 7 form or use an existing one.
At this point, select the CF7 Skins 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. and Style that suits your need. In this article, we chose the Registration Template and Emerald Style. You may edit the form elements generated by CF7 SKins in the form tab of Contact From 7 and click Save.
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. The results should be as shown below.
Tip: You can use Firebug or Chrome Dev Tools to see how we’ve built this form.
Add CF7 Skins Ready Add-on
CF7 Skins Ready lets you choose from several class options including single-line, column, box & grid to display in your Contact Form 7 forms.
See CF7 Skins Ready Classes for an explanation of the range of pre-defined styles that can be used in all CF7 Skins forms.
Once CF7 Skins Ready is installed, you will be able to make use of its rich CSS class system to display your form in various styles.
At this point you should read our CF7 Skins Ready Classes documentation for a comprehensive explanation on how CF7 Skins Ready works, if you haven’t already.
In this tutorial, we’ll focus on using the CF7 Skins Ready singleline class.
See CF7 Skins Ready Classes Demo for detailed examples of using other CF7 Skins Ready classes in Contact Form 7 forms.
Add the Singleline class to your form tagsForm Tag Form Tags in Contact Form 7 (CF7) (in the Form Tab) are used to define all CF7 form fields. Each Form Tag is replaced with an HTML element, which represents an input field, when it is displayed in an actual form.
In our example form above there are six form fields. We’ll organize the first five fields into beautifully styled single line form fields using CF7 Skins Ready singleline class.
Now you have read and understood how CF7 Skins Ready works, lets go ahead and make our first five form fields into two single lines as shown in the code below.
<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>
If you are having trouble understanding how the CF7 Skins Ready singleline class works in the above code sample, you can read our CF7 Skins Ready Classes documentation for a comprehensive explanation on how CF7 Skins Ready works. You can come back to this tutorial when you’ve done that.
When class=”singleline” is added to an ordered list as shown in the code above, CF7 Skins Ready organizes all the list elements in that ordered list into a single line to fit the width of the form as shown in the final results below.
Tip: You can use Firebug or Chrome Dev Tools to see how we’ve made this form.
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.
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 the premium version, CF7 Skins Pro, then Premium Email Support is provided to deal with your questions and problems.
