Understanding Templates and Styles

CF7 Skins makes it easier for users to create advanced forms, using Contact Form 7, without knowing any HTML or CSS code

CF7 Skins comes with many Templates and Styles for you to use with your Contact Form 7 forms.

Templates

Contact Form 7 Method

Contact Form 7 uses Tags to generate form fields.

To create a form field, most users will generate a Contact Form 7 Tag by clicking on the Generate Tag drop down menu.

After that you need to copy that Tag into your form area. You also need to have some HTML surrounding the Tag to give your form a suitable overall structure.

Form Editor in Contact Form 7

Now if you were creating just a simple contact form with name, email, and message fields, then most regular WordPress users can probably generate those Tags and write the basic HTML needed to build their form.

However, if you were to create a form with multiple fields, checkboxes, etc, then this can become quite complicated.

CF7 Skins Method

Templates in CF7 Skins help to solve this problem.

The Template section includes a range of commonly used form Templates – like User Registration, Customer Survey, Event Registration, etc.

You will find templates for different categories and purposes and all you need to do is select one that best suits your needs.

Templates in CF7 Skins

Each CF7 Skins Template provides the form content and layout required for your form. The template acts as an easy to follow guide, which can be adapted to your particular requirements.

Templates in CF7 Skins

As soon as you select a Template, the form editor will be automatically filled with required HTML and Contact Form 7 Tags.

Templates are for HTML and Tags, while Styles make a form visually appealing by applying CSS to them

You can add more fields, or remove fields, to match your requirements. You can also adjust the layout of your form by moving fields.

You can even copy fields you want elsewhere and change the Contact Form 7 Tag to another you create via the Generate Tag button.

Styles

Contact Form 7 Method

The default forms in Contact Form 7 tend to be very plain looking. Sometimes your WordPress theme may take over and style your form button or text but that’s about it

There is a common misconception that the Contact Form 7 plugin controls the appearance of Contact Form 7 forms though the plugins CSS style sheets.

In truth the Contact Form 7 plugin uses only very minimal CSS styling to allow Contact Form 7 forms to blend in with most websites.

The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

Experienced WordPress users, skilled at using HTML and CSS, are able to style their Contact Form 7 forms to their particular requirements, but this requires a level of skill beyond many people.

CF7 Skins Method

For some reason many WordPress themes do not provide CSS styling for standard HTML form elements.

Importantly if your theme neglects to provide appropriate CSS for these standard HTML form elements then the appearance of your form will fall back to that provided by default by the browser – which can be different in different browsers.

CF7 Skins helps solves this problem by providing you a wide range of Styles that you can use with your forms.

Styles in CF7 Skins

All you need to do is select a Style that best suits your design needs and CF7 Skins will automatically apply it to your form.

Example CF7 Skins Form