There are a number of common stying options that many Contact Form 7 (CF7) users like to add to their forms, like evenly spaced columns & and several fields on a single line. However adding these styles requires detailed HTML & CSS knowledge which is beyond the current skills of many WordPress users.
But before we get started, there are a few things you need to know.
- How to set up a Contact From 7 form – Learn more.
- A basic understanding of CSS class selectors – Learn more.
By the end of this article you should be able to change a single column Contact Form 7 form styled with CF7 Skins into a two column form.
Making a two column form
The images below show two forms styled with CF7 Skins. Form One is a regular single column Contact Form 7 form styled with CF7 Skins. Form Two shows the final results after adding CF7 Skins Ready column class to the form.
Set-up a CF7 form and style it 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. If both Contact Form 7 and CF7 Skins are installed on your WordPress site, you should see the CF7 Skins template and styles below the Contact Form 7 user interface in the WordPress admin.
See CF7 Skins User Interface for a more comprehensive overview of the CF7 Skins interface.
Select the CF7 Skins Template and Style of your choice, edit the text generated by CF7 Skins in the form tab of Contact Form 7 to suit your needs and click Save.
In this tutorial, we chose the Contact Template and Choc Shake Style of CF7 Skins.
Now copy the short-code generated by Contact Form 7 and paste it in the page, post or widget where you want to display your form. The result 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 are now 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 column class.
See CF7 Skins Ready Classes Demo for detailed examples of using other CF7 Skins Ready classes in Contact Form 7 forms.
Add the Column class to your form tags
In our example we have a five input field form. We’ll organize four form fields namely, “Your Name”, “Email Address”, “Website” and “Phone Number” into two columns using the CF7 Skins Ready column class.
Now that we have a fair idea about how CF7 Skins Ready works, lets go ahead and make our form a two column form by adding the column class to the form elements as shown in the code below:
<fieldset> <legend>Contact Form</legend> <ol class="column"> <ol> <li> Your Name* [[text* cf7s-name]] </li> <li> Email Address* [email* cf7s-email-address] </li> </ol> <ol> <li> Website [url my-url] </li> <li> Phone Number [tel my-tel] </li> </ol> </ol> <ol> <li> Your Message [textarea cf7s-message] </li> </ol> [submit "Submit"] <p>* Required</p> </fieldset>
If you are having trouble understanding how the CF7 Skins Ready column 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.
The result of the class=”column” in the ordered list in the code above is a nice clear form with some of the fields placed in two columns.
Tip: You can use Firebug or Chrome Dev Tools to see how we’ve made this form.
Have Questions or Need Help
If you are using the premium version, CF7 Skins Pro, then Premium Email Support is provided to deal with your questions and problems.