CF7 Skins Ready (with Visual Editor)

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

Ready Classes

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.

CF7 Skins form with Ready class

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.

cf7skins-form-ready

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.

Add class = "singleline" inside a surrounding LIST-OL tag:

<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:

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.

Default CF7 Skins Style

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.

Demo Form

You can complete the form below to see a range of CF7 Skins Ready classes in action.

    Use Ready Classes right away without having to write any CSS

    CF7 Skins Ready provides a range of useful pre-defined styles that can be used in all your CF7 Skins forms - right within the Contact Form 7 plugin interface. (In fact this is a CF7 Skins Ready form you are using now.)

    Your Details Ready Class singleline

    (This form uses Ready Class singleline to display two fields side by side.)

    You can help us improve CF7 Skins Ready by completing this form

    You can see a detailed example of using CF7 Skins Ready and help us at the same time by simply completing this form. It will help us to understand better how you might use the CF7 Skins Ready Add-on.

     

    (This form also uses the CF7 Skins Multi Add-on to create a multiple page form for Contact Form 7.)

    Ready Classes are Easy to Use

    You can add a Ready Class to an individual form field or a group of form fields by simply adding the Ready Class to the surrounding parent element. You can also use multiple classes together – just separate each Ready Class name by a space.

    Your WordPress Experience
      1. Ready Class column
      2. Which of the following best describes you in relation to WordPress?
      3. How would you describe your WordPress skills?
      4. Which of the following describe how you use WordPress? (please choose the one that fits best)
      1. Ready Class column + box
      2. FreeProNone
      3. How many WordPress sites do you use the Contact Form 7 plugin on?

    (This form uses Ready Class column to group several fields into equally spaced columns. Ready Class box is added to the second column to create a surrounding box. )

    Add common styling options quickly & easily

    With CF7 Skins Ready you can add a number of common styling options that many Contact Form 7 users like to add to their forms. We're interested to find out which of the Ready Classses, included with CF7 Skins Ready, are most important to you .

    Ready Classses
        1. Which of the available Ready Classses are important to you?
        2. Very ImportantImportantNot ImportantNot sure
        3. Very ImportantImportantNot ImportantNot sure
        4. Very ImportantImportantNot ImportantNot sure
        5. Very ImportantImportantNot ImportantNot sure
        6. Very ImportantImportantNot ImportantNot sure
        7. Very ImportantImportantNot ImportantNot sure

    (This form uses Ready Class grid to adjust the size of the left column to suit the form content. Ready Class radio-horizontal was used to create a more compact form.)

    Ready Class grid implements a CSS form grid

    With Ready Class grid you can control the size and position of all fields within a strict grid.

    grid Ready Class (with grid-hover & grid-lined)

    (This form uses Ready Class grid to position all fields within a strict grid.)

    Thank you for completing this form

    If you have any comments or suggestions to improve CF7 SKins Ready you can add them below.
    Please help us to improve CF7 Skins Ready

    Related posts:

    1. CF7 Skins Ready – singleline
    2. CF7 Skins Ready – horizontal
    3. Contact Form 7 Form in Columns
    4. Contact Form 7 Fields Side by Side

    Footer