CF7 Skins Ready
Ready Classes for Contact Form 7 Skins
The Problem
There are a number of common stying options that many Contact Form 7 users like to add to their forms. However adding these styles requires detailed HTML & CSS knowledge which is beyond the current skills of many WordPress users.
Our Solution
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.
Ready Classes
CF7 Skins Ready includes the following Ready Classes:
- box – displays enclosed elements in a surrounding box
- column – displays enclosed elements in a vertical column
- grid – implements a strict form grid
- singleline – displays enclosed elements on a single line
- horizontal – displays checkboxes & radio buttons in horizontal line
Now you can add common stying options quickly & easily to all your Contact Form 7 forms.
You can use the Ready Classes right away without having to write any of your own CSS.
Personal 1 site / year | Business 3 3 sites / year | Business 5 5 sites / year | Unlimited sites / year |
|
---|---|---|---|---|
CF7 Skins ReadyExtra useful styling options |
||||
Initial Purchase | $39.00 | $59.00 | $79.00 | $99.00 |
Renewal | $31.20 | $47.20 | $63.20 | $79.20 |
Annual renewal required for ongoing access to updates & support |
Easy to Use
Ready Classes are class names that you can add to form field to take advantage of these pre-defined styles.
Using CF7 Skins Visual Editor
You can use the CF7 Skins Visual Editor to 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 traditional CF7 Form Editor
You can also use the traditional CF7 form editor to add these pre-defined styles to your form.
<ol class="singleline"> <li> tel [tel cf7s-tel] </li> <li> mobile [tel cf7s-mobile] </li> </ol>
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.
<ol class="singleline"> <li> .. </li> <li> .. </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>
Examples
singleline
Displays enclosed elements on a single line
column
Displays enclosed elements in a vertical column
grid
Implements a strict form grid
Examine CF7 Skins Ready Demo Forms.
Demo Form
You can help us improve CF7 Skins Ready by completing this form. This will show you a CF7 Skins Ready form in action. In addition, as a thank-you, we’ll send you a Discount Code to use with your next purchase from CF7 Skins.
This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready + CF7 Skins Multi + CF7 Skins Logic
See other CF7 Skins Ready Demo Forms.
Requirements
- Requires at least Contact Form 7 Skins v2.0.