Last Updated on
CF7 Skins Ready provides a range of useful, pre-defined styles (like evenly spaced columns & and several fields on a single line) that can be used in all CF7 Skins forms.
Add common stying options quickly & easily
CF7 Skins Ready includes the following Ready Classes:
- singleline – displays enclosed elements on a single line
- column – displays enclosed elements in a vertical column
- grid – implements a strict form grid
- box – displays enclosed elements in a surrounding box
- horizontal – displays checkboxes & radio buttons in horizontal line
You can use our CF7 Skins Ready classes right away without having to write any of your own CSS.
Using CF7 Skins Ready Classes
Ready Classes are class names that you can add to form field to take advantage of these pre-defined styles.
You can add a Ready Class to an individual form field or a group of form elements by adding the Ready Class to the surrounding parent element.
Using CF7 Skins Visual Editor
Using the visual editor, you can do this using one of two ways.
1. Using the dropdown to the right of the element
Click on the dropdown menu to the right of a surrounding
LIST-OL element. Select Ready Class and under it, select your desired ready class e.g. Column.
2. Using the edit dialog box to the right of the form
Click on the edit button in the surrounding
LIST-OL element. Then, check the Ready class you want from the dialog box that appears in the sidebar to the right of the form.
Using the traditional CF7 form editor
You can also still use the traditional CF7 form editor to build the form.
class = "singleline" inside a surrounding
<ol class="singleline"> <li> tel [tel cf7s-tel] </li> <li> mobile [tel cf7s-mobile] </li> </ol>
You can also use multiple classes together – just separate each class name by a space.
<ol class="singleline box"> <li> .. </li> <li> .. </li> <li> .. </li> </ol>
Ready Class Tutorials
For detailed step by step instructions on how to use each Ready Class we recommend the following tutorials:
- singleline (tutorial) – display enclosed elements on a single line
- column (tutorial) – displays enclosed elements in a vertical column
- grid (tutorial) – implements a strict form grid
- box (tutorial) – display enclosed elements in a surrounding box
- horizontal (tutorial) – displays checkboxes & radio buttons in horizontal line
You need to select one of our CF7 Skins Styles
For CF7 Skins Ready to work you need to select one of our CF7 Skins Styles.
We recommend you initially select the Default Style which is the minimum needed to support CF7 Skins Ready.
This lets you see what your form looks like with CF7 Skins Ready added to form styling applied in your current WordPress theme.
You can also pick any of other CF7 Skins styles, which will give significantly more detailed styling of your form.
You can complete the form below to see a range of CF7 Skins Ready classes in action.