Demo

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.

 

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.

Your Details

Ready Class singleline

1. Your Name (Required) *
2. Email Address (Required) *

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

 

In addition, as a thank-you, we'll send you a Discount Code to use with your next purchase from CF7 Skins.

Please leave this field empty.

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?—Please choose an option—WordPress UserWordPress DesignerWordPress DeveloperNone of the above
3. How would you describe your WordPress skills?—Please choose an option—NoviceIntermediateAdvanced
4. Which of the following best describes how you use WordPress? (please choose the one that fits best)—Please choose an option—I use it to build websites for othersI use it to create websites for myselfI contribute to a website built with WordPressNone of the above
1. Ready Class column + box
2. Which version of CF7 Skins do you use? FreeProNone
3. How many WordPress sites do you use the Contact Form 7 plugin on?—Please choose an option—Only 12-55-1010-2020+
4. What is your opinion on the price of CF7 Skins Ready?—Please choose an option—Too lowAbout rightToo highNot sure

(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 Classes, included with CF7 Skins Ready, are most important to you .

Ready Classes

1. Which of the available Ready Classes are important to you?
2. box - displays enclosed elements in a surrounding box Very ImportantImportantNot Important
3. column - displays enclosed elements in a vertical column Very ImportantImportantNot Important
4. grid - implements a CSS form grid Very ImportantImportantNot Important
5. singleline - displays enclosed elements on a single line Very ImportantImportantNot Important
6. checkbox-horizontal - displays checkboxes in horizontal line Very ImportantImportantNot Important
7. radio-horizontal - displays displays radio buttons in horizontal line Very ImportantImportantNot Important
1. Is there another Ready Class you would like to see added?

(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)

1. Field 1
1. Field 1
2. Field 2
1. Field 1
2. Field 2
3. Field 3
1. Field 1
2. Field 2
3. Field 3
4. Field 4
1. Field 1
2. Field 2
3. Field 3
4. Field 4
5. Field 5
1. Field 1
2. Field 2
1. Field 1
2. Field 2
1. Field 1
2. Field 2
3. Field 3
1. Field 1
2. Field 2
3. Field 3
1. Field 1
2. Field 2

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

Thank you for completing this form

If you have any suggestions to improve CF7 Skins Ready you can add them below.

Please help us to improve CF7 Skins Ready

1. Your Suggestions

Sign me up to receive regular emails about how to use both CF7 Skins and the Contact Form 7 plugin more effectively.

This page was created by selecting the Contact Template and adjusting it to our requirements.