CF7 Skins Ready provides a range of useful, pre-defined styles (like evenly spaced columns & several fields on a single line) that can be used for all CF7 Skins forms.
You can use the Ready classes right away without having to write any of your own CSS.
In this article, we explain step-by-step how to build a form using the CF7 Skins Ready class horizontal.
Displays checkboxes & radio buttons in horizontal line
CF7 Skins displays all checkbox & radio buttons in a vertical list by default. You can add the horizontal Ready class to individual list
LIST-LI elements containing checkbox and radio buttons tags to display them in a horizontal list.
Tip: Most of the CF7 Skins Ready classes are applied to
LIST-OLelements, while a few of them are applied to a
Let us have a look at an example form:
In this example, we are looking to add the horizontal CF7 Skins Ready class to a
LIST-LI element enclosing a checkbox and a radio button element.
1. Starting from initial template
When we begin, we see that we already have an initial template ready for us to use.
While we could use this template when building our forms, for this example form, we will delete most of the existing elements to get to a more general starting point.
Let us delete all three
LIST-LI elements, as well as the paragraph and submit button present in the form. You should then have the following form:
Now, drag and drop a
LIST-LI element under the
2. Adding the horizontal Ready class
You can assign the Ready class horizontal to the
LIST-LI item 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
Click Ready Class to see a list of options. From the available list, choose horizontal (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.
Wherever you work, changes will appear instantly in both locations.
3. Adding required form elements
Now, drag and drop the form element you want.
You can drag and drop elements from the sidebar to the Visual builder. If you do not know how to do this, read our CF7 Skins Visual tutorial.
A. Firstly, add the Checkbox element under the
LIST-LI we just created.
B. Now, click on the edit icon and change its name and label using the Edit element sidebar.
C. Now, duplicate the
LIST-LI element and remove the checkbox element. Then, add the radio button field to the form under the
LIST-LI and edit the name and label as above.
Note: You can always use our duplicate feature to simply copy your fields, and then change the form element as you need.
4. Add form legend and finish up
Finally, you need to edit the Legend at the top to name the form.
You are all done. Now, just press the Save Visual button. Here is the final form image you should have:
CF7 Form Code
Your final form code should look something like this, at the end:
You can still use the traditional CF7 form editor to build the form. To do that, you will have to append the CF7 Skins Ready class name “box” to the surrounding
<fieldset> <legend>checkbox and radio button - horizontal </legend> <ol> <li class="horizontal">Ready Class checkbox-horizontal [checkbox checkbox-687 "Option 1" "Option 2" "Option 3" "Option 4"]</li> <li class="horizontal">Ready Class radio-horizontal [radio radio-256 default:1 "Option 1" "Option 2" "Option 3"]</li> </ol> </fieldset>
- CF7 Skins uses Fieldset, Legend & Lists as the foundation of all CF7 Skins forms.
- It’s a really good idea to use tabs to keep all your fields indented to show how they are grouped.