Table of Contents

  1. Introduction
  2. Getting Started
  3. CF7 Skins User Interface
  4. Understanding Templates and Styles
  5. Using CF7 Skins
  6. Customizing CF7 Skins Forms
  7. CF7 Skins Add-ons
  8. Staying Updated

01 Introduction

CF7 Skins makes it easier for regular WordPress users to create advanced and beautiful forms, using Contact Form 7, without knowing HTML or CSS

There are many WordPress plugins that allow you to add a form to your website. The most popular of them all is Contact Form 7. Downloaded by more than 18 Million users, it is one of the most widely used WordPress plugins of all time.

Contact Form 7

Contact Form 7 allows you to create and manage forms, add them to posts and pages, and receive submissions into your email inbox – it’s simple, effective, and free.

Creating simple contact forms with Contact Form 7 is fairly easy. However, creating complex forms, and styling those forms to look good, can be difficult for regular Contact Form 7 users.

Creating complex forms, and styling those forms, can be difficult for regular Contact Form 7 users

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.

What is CF7 Skins?

CF7 Skins extends the power of Contact Form 7, making it easier for regular WordPress users to create forms using built in Templates, and make them visually appealing with a range of attractive Styles.

Template [HTML] + Style [CSS] = Skin

Together these Templates and Styles provide Skins for Contact Form 7, hence the name ‘CF7 Skins’.

CF7 Skins makes it possible for regular WordPress users to create advanced and beautiful forms, using Contact Form 7, without knowing HTML or CSS.

02 Getting Started

CF7 Skins extends the power of Contact Form 7, making it easier for users to create forms using built in Templates, and make them visually appealing with a range of attractive Styles.

Requirements

These are the requirements for CF7 Skins.

1. WordPress

CF7 Skins is a WordPress plugin. Make sure that your website is running the latest WordPress.

[ What is WordPress | How to Install WordPress ]

2. Contact Form 7

CF7 Skins extends the functionality of the Contact Form 7 plugin. Make sure that you have the latest version of Contact Form 7 installed on your WordPress site.

[How to Install Contact Form 7 in WordPress]

Installation

Installing CF7 Skins is easy and simple.

After downloading the zip file to your computer, log into your WordPress site’s admin area. Go to Plugins → Add New and then click on Upload link.

Installing a new plugin in WordPress by uploading Zip file

On the upload screen, click on the Choose File button to select the plugin’s zip file from your computer and then click on Install Now button.

Installing a plugin by uploading the plugin's zip file to WordPress

WordPress will now upload and install the plugin. Once it is done, you will see Plugin installed successfully. notification. You can now click on the Activate Plugin link to enable and activate the CF7 Skins plugin on your WordPress site.

Activating CF7Skins plugin after the installation

CF7 Skins Pro

The premium version, CF7 Skins Pro, offers a wider range of more complex Templates & Styles. It also entitles you to email based support.

If you have purchased the CF7 Skins Pro version, then you need to repeat this process to install CF7 Skins Pro.

The CF7 Skins Pro plugin does not replace the free CF7 Skins plugin. Rather, it runs on top of the CF7 Skins plugin, adding additional Templates & Styles, and requires the CF7 Skins plugin to be installed.

You will need to download the CF7 Skins Pro plugin’s zip file from your account dashboard on cf7skins.com.

Licensing

The CF7 Skins plugin is freely available to all WordPress users from the WordPress Plugin Directory.

The CF7 Skins Pro plugin, as a premium plugin, requires purchase of a unique License Key from cf7skins.com.

Purchase of a license for CF7 Skins Pro entitles users to any updates of the plugin and email based support for the duration of the licensing period.

Both CF7 Skins and CF7 Skins Pro are distributed under the GNU license meaning you are free to use all the liberities of that license.

Licenses

The Licenses tab is where you will enter your license keys. Adding a license key and activating it is fairly straight forward.

CF7 Skins Licenses

First you will log in to cf7skins.com Account. There you will see a link to your downloads and licenses. Simply copy your license key and paste it on the Licenses page.

First you need to save your license key by clicking on the save changes button and then click on the Activate License button.

03 CF7 Skins User Interface

CF7 Skins works right inside the normal Contact Form 7 interface to extend its capabilities

Now that you have installed CF7 Skins it is time to familiarize yourself with the plugin’s interface. CF7 Skins works inside Contact Form 7 to extend its capabilities.

In order to see CF7 Skins in action you need to login to your WordPress admin area, and then click on Contact and select an existing Contact Form 7 form or create a new one (see How do I add a form with Contact Form 7).

cf7-wp-menu

Template + Style = Skin

Skins

This will bring you to the Contact Form 7 form editor. Scroll down to the Skins section.

CF7 Skins User Interface

The Skins section, added by CF7 Skins to Contact Form 7’s form editor, is divided into main tabs.

  • Templates
  • Styles

Templates

By default, the Template tab is selected and you can see screenshots of the available templates in grid view. Below each template’s screenshot there are two links Select and Details.

searching-templates

Clicking on the Details link will display a larger screenshot of the template with its description and usage details.

Event Pro Template in Expanded View

Tip: Taking your mouse over a question mark or clicking on it will display contextual help for that particular area of the user interface

You can sort the listed templates by clicking on All, Featured, Popular, and Latest tabs on the top. You can also filter templates by feature.

Browsing templates in CF7Skins' template browser

There is also a Search box at the far right of the screen.

1. Using the Search option, type in the first two or three letters of what you are looking for. For example, ‘Reg’ will pull up some different Registration forms.

searching-templates

Styles

Tip: You can minimize each Section by clicking on the arrow button on the far right corner and drag & drop the sections to re-arrange them. Your revised layout will be saved and loaded when you use Contact Form 7

Clicking on the Style tab will display available styles you can use with your forms. You can use the feature filter, and list styles by popularity, latest, and featured.

Browsing available styles in CF7 Skins Style browser

Details & Expanded View

Similarly, you can click on the Details link to get more information about that template or style.

details-link

This displays a larger screenshot of the template or style, with its description and usage details.

Details view

From there, you can click on Expanded View to see a larger view of the template or style.

Expanded view of a form

CF7 Skins Settings

You can change Contact Form 7 Skins settings by clicking on Contact → CF7 Skins. This page is divided into three tabs or sections.

  1. General
  2. Advanced
  3. Licenses

CF7 Skins Settings page

General

On the general settings tab you can choose a color scheme for Contact Form 7 Skins user interface. Currently, there are three color schemes to choose from.

CF7 Skins General settings tab

Simply choose the color scheme you want to use and click on the ‘Save Changes’ button to store your settings.

Advanced

The Advanced tab allows you to configure some advance settings for Contact Form 7 Skins. These settings are useful for troubleshooting and clean up. Most users will probably never need to change these options.

CF7 Skins Advanced settings page

The first option on the advanced tab allows you to display plugin’s log file in a separate tab on the settings screen. Selecting it and then clicking on the save changes button will display a logs tab where you can view plugin’s log file to troubleshoot errors.

The second option on the screen allows you to delete all plugin data when you delete the plugin.

Warning: Deleting plugin’s data upon deletion is irreversible and you cannot undo it.

Licenses

The Licenses tab is where you will enter your license keys. Adding a license key and activating it is fairly straight forward.

CF7 Skins Licenses

First you will log in to cf7skins.com Account. There you will see a link to your downloads and licenses. Simply copy your license key and paste it on the Licenses page.

First you need to save your license key by clicking on the save changes button and then click on the Activate License button.

04 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

05 Using CF7 Skins

Each CF7 Skin provides a complete solution for your Contact Form 7 forms

1. form content and layout (Template) – HTML
2. form presentation (Style) – CSS

Using CF7 Skins is very simple and straight forward. In this section, you will learn how to use CF7 Skins to create professional looking forms.

First we will show you how to choose a Template for your form and then apply it. After this we will show you how to apply a Style to your form.

Choosing a Template for Your Form

Templates allow you to quickly generate forms with predefined HTML fields and Contact Form 7 Tags (See Understanding Templates and Styles).

Create a new form or edit an existing Contact Form 7 form. Scroll down to the Skins section where you will see a list of available Templates in a grid view.

Templates in CF7 Skins

Each template title is usually quite self explanatory as to what that particular template does. For example, you will see Event, Survey, Suggestion, Contact templates.

You can also click on the Details link below each template to learn more about it.

A closer look at the Event template

When searching for a Template, choose one that most closely represents the fields that you need for your form.

Now let’s suppose you want to create an event form. Simply click on the Select link below the Event template.

Selecting a template

You will notice that the Select link will turn red and the text will change to Selected. This confirms that CF7 Skins has applied the template to your form.

You can now scroll up to the Form Editor where you will notice the required HTML and Contact Form 7 Tags filled in the form editing area.

Form generated by using CF7Skins Event template

Tip: Find another CF7 Skin template that has the field you are looking for. Copy the line from the Form section, then paste it into the form you are creating. Don’t forget to save your changes after adding the new field.

Each template acts as an easy to follow guide, which can be adapted to your particular requirements.

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.

Note: If you select a different Template , it will replace the Form section with the new selected template.

That’s all it takes to successfully use a Template to generate your form.

Choosing a Style for Your Form

CF7 Skins comes with many Styles which you can apply to any form with just a click (See Understanding Templates and Styles).

Create a new form or edit an existing Contact Form 7 form. Scroll down to the Skins section and click on the Style tab to view the list of available styles to choose from.

List of available CSS styles in CF7 Skins

You can find a Style you like by using one of the following filters:

– Featured
– Popular
– Latest

Clicking on the Details link below each style will give you more information about each style.

Style Details View

Click on the Expanded View link to see an even larger view of the style.

Expanded View of a style in CF7S kins

Or, use the Feature Filter to drill down into specifics.

browsing-templates

Finally, there is a Search box at the far right of the screen.

search-template-box

When you find a style that meets your design requirements, you can simply apply it by clicking on the Select link. You will notice that the Select link will turn red and the text will change to Selected.

You can now click on the Save button to store the changes you made to the form and apply the style to your form.

Example CF7 Skins Form

Previewing Your Form

Tip: For full step-by-step instructions on creating and editing your CF7 Skin, check out our Your first CF7 Skins form tutorial

After you have generated a form by selecting a Template and applying a Style to it, the next step is to see your form in action.

To do that copy the Contact Form 7 Shortcode for your form. This Shortcode is usually visible at the top on the form editor screen.

Shortcode for your form

Tip: If you can’t see the Shortcode, then this probably means that you haven’t saved your form yet. Click on the Save button to see the Shortcode.

You can also find Shortcode for a saved form by clicking on Contact menu item in WordPress admin bar. This will display all the forms you have created using Contact Form 7. You will be able to see the Shortcode next to each form title in the list.

List of forms and their Shortcodes

After copying the Shortcode for your form, you need to go to the page or post you are creating in WordPress. Paste the Shortcode you copied in the post editor where you want your form to appear.

Adding form shortcode in a post/page

You can now click on the Save Draft or Publish button to save the changes you made to the post/page. After that you can click on the Preview button to see your form in action.

Previewing a form generated by Event Template in CF7 Skins

If you don’t like what you see, or want to use some other Template or Style, then all you have to do is to edit your form and select a different template and style. Your changes will be automatically applied to the form displayed on your post or page.

06 Customizing CF7 Skins Forms

Fieldsets, Legends & Lists

When selecting a Template for your form, CF7 Skins builds the basic HTML of the form you selected and populates the Form section.

You may have noticed that a CF7 Skin form looks a bit different than the default Contact Form 7 form.

CF7 Skins uses Fieldsets, Legends, and Lists

CF7 Skins takes a different approach to form syntax and uses Fieldsets, Legends, and Lists as the foundation for all CF7 Skins Templates.

The main reasons behind using this syntax are:

  • The Fieldset element allows grouping of related form fields
  • The Legend element helps provide context to each fieldset
  • Advanced CSS styling is much easier
  • W3C compliant
  • Accessible

This approach also overcomes a number of inherent difficulties which arise when using paragraph elements (<p>Paragraph Content</p>) for Contact Form 7 form fields.

Contact Form 7 Method

When you first begin creating a form with Contact Form 7, it starts you off with the most basic of contact forms:

Default CF7 Form

The form uses paragraph elements (<p>Paragraph Content</p>) as the basis for the form. While this is probably the simpliest way to create a simple contact form, it has a number of shortcomings.

While it looks easy, building on top of it to create more complex forms and styling it using CSS requires quite a bit of skill. You will soon find yourself wrestling with trying to use <p> tags in ways they were not intended for.

It’s also not semantic. Paragraphs are meant to be used for a distinct portion of text dealing with a particular idea – not form fields.

CF7 Skins Method

CF7 Skins provides a list of common Templates to build off of easily, such as the Suggestion form:

Suggestion Template

With each Template, you start off with a form in a fieldset. This fieldset creates a box and that box already has a legend.

This means you’re already starting at an advantage when you want to style your form. Styling boxes (and boxes within other boxes) is comparatively easy within CSS and generally offers consistent presentation across different browsers.

Although the question of how to semantically mark up forms is still up for debate, CF7 Skins has found that for every day customization and ease of use, fieldsets, legends, and lists are the easiest way to structure your form, style it across browsers, and have it be the most accessible.

CF7 Skins has found that for both simple and complex forms, using fieldsets, legends, and lists means:

  • Customizing the form layout is both easier and more versatile
  • Consistentcy in styling via CSS across browsers is more easily maintained
  • Users have many more options for form layout & more control over individual form elements
  • The Contact Form 7 form tags are normally less cluttered
  • It’s generally easier to look at and think “I could tweak this.”

HTML already has fieldsets and labels, so why not use them? They were added to the range of standard HTML form elements in the HTML 4.1 specification to make it easier for users to understand forms while simultaneously improving accessibility.

Semantically, it makes sense to have a list of form controls in a logical order. Many forms in print are actually numbered in a list. Using the standard HTML ordered list <li> element as the basic building block for all CF7 Skins Templates offers many advantages in both form layout and styling.

Extra reading:
http://alistapart.com/article/prettyaccessibleforms
W3C – Providing a description for groups of form controls using fieldset and legend elements

Editing Your Form

Each Template acts as an easy to follow guide, which can be adapted to your particular requirements. You can adjust the layout of your form by simply moving form fields around or you might copy a field similar to what you want and then change it to suit your needs.

If you haven’t selected a Template yet, choose one that has fields closest to what you want in your finished form.

1. Scroll up to the Form section on your screen.

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

form-section-generate-part

Tip: If you want to copy a Fieldset section – be sure to grab everything between the <fieldset> <fieldset/> tags.

2. Copy and paste lines within the form.

Most users find they can adjust a Template to their requirements by simply copying & pasting.

a. If you are removing fields:

Highlight the line and delete it.

highlight-field

Tip: Find another Template that has the field you are looking for. Copy the line from the Form section, then paste it into the form you are creating. Don’t forget to save your changes after adding the new field.

b. If you are adding fields:

Pick a field similar to what you want, highlight and copy it to where you want and then change it to suit your needs.

3. Use the Generate Tag button to revise Contact Form 7 Tags.

Contact Form 7 Tags have rather complex syntax, but you don’t have to learn it. You can use the Generate Tag tool to generate as many tags as you want. Replace an existing tag with a new one you’ve created.

Review Contact Form 7’s documentation on Tag Syntax. This will let you know which tags and fields you can add to your form.

Tip: To check if you are changing the right text, try saving the form and previewing it after each change.

4. After you have made any changes, remember to Save!

Note: If you select a different template, it will replace the Form section with the new selected template.

Modifying CF7 Skins Styles

CF7 Skins makes it easy to apply ready-to-use styles on your forms. Users can also modify these CF7 Skin Styles using CSS. To do this you will need:

Tip: If you are looking to make only minor changes to your CF7 Skins – Contact Form 7 form, and have only limited HTML & CSS skills, you might find Using a Custom CSS plugin to modify a CF7 Skins Style easier to follow and more suited to your current skill level.

Warning: If a CF7 Skins user has little or no HTML and CSS skills they may only be able to have their forms using the CF7 Skins Style as supplied. You may need to seek assistance from someone with the skills listed above to modify your forms.

Custom Styling your Contact Form 7 Form

CF7 Skins makes it easy for you to generate beautifully styled Contact Form 7 forms for your WordPress website. Although it’s easy to apply an entirely new style to your form with CF7 Skins, there might be parts of the style you want to change.

This article will show you how you can tweak a few different parts of a CF7 Skins style.

Before you go through the examples, make sure that you have already selected a CF7 Skins Template and Style that is close to what you want.

As you go through these examples, there are 3 basic steps to remember:

  1. Know which parts of the form you want to change
  2. Find CSS classes and ids that you want to change using developer tools or the CSS file
  3. Implement those changes in your child theme or using a custom CSS plugin.

Note: Without a CF7 Skins style, your form will apply the styling of your WordPress theme (if the author of the theme wrote styles for forms).

Selected CF7 Skins Template and Style

For all of the following examples, the Template used is Contact and the Style used is Caspar. Without any additional changes, the contact form looks like this:

default-cf

Take some time to familiarize yourself with the classes, ids, and HTML using Firebug or Chrome Developer Tools on your form before continuing.

I want a different overall color

Taking the Contact form from above, let’s change the outside border, inside border, and the color in the box around the word Contact.

Ensure you know the hex codes for the the colors you want to use. In this example, we will be using #FC354C.

Outside border

When you take a look at the HTML of your Contact form, it would look something like this:

contact-form-html

When you look at the CSS, it will look like this:

css-caspar

What you want to focus on primarily is the border. In your child theme or custom CSS plugin, use the exact same class and change the border to:

border: 1px solid #FC354C

Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar {
	border: 1px solid #fc354c;
}

Tip: Code added in the child theme or custom CSS plugin will normally take precedence over the CSS added by the CF7 Skins plugin.

Inside border

Again using the inspector, find the inside border. In CSS, it will look like this:

caspar-fieldset
Again, change the border to:

border: 1px solid #FC354C

Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar fieldset {
	border: 1px solid #fc354c;
}
Contact box color

To finish the changes by changing the colour around the word Contact, inspect the title and look at the CSS.

CSS of the Contact form legend

Change the border to:
border: 1px solid #FC354C

and background to:

background: #FC354C

Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar legend {
	border: 1px solid #fc354c;
	background: #fc354c;
}

Your final Contact form, after making the changes to your child theme, would look like this:

final-contact-form1

I want to change the submit button color

In CF7 Skins, changing the submit button text is easy in the Form editing section. A very popular question is how to change the submit button color, as well as the color when you move your mouse (hovers over) the button.

Going back to our initial Contact Template with the Caspar Style, the HTML looks like this:

HTML of the submit button

You want to target the border and background of the class

.wpcf7-form.cf7s-caspar input[type="submit"] {
    background: none repeat scroll 0 0 #ededed;
    border: 1px solid #c3c3c3;
    color: #1a1a1a;
    padding: 5px 15px;
}

changing it to:

border: 1px solid #FC354C
background: #FC354C

Code added to child theme or custom CSS plugin:

.wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="submit"] {
	border: 1px solid #fc354c;
	background: #fc354c;
}

Finally, for the hover, the CSS with the changes looks like:

CSS when hovering over a submit button

Change the border and background to:

border: 1px solid #eb646d;
background: #eb646d;

Code added to child theme or custom CSS plugin:

.wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input:hover[type="submit"] {
	border: 1px solid #eb646d;
	background: #eb646d;
}

That’s it! Your button will now have different colors when standing alone and when a mouse is hovered over it.

Normal submit:
normal-submit-colour
Hovered submit:
hover-submit-colour

I want to change the font size, type, and color

Fonts can be problematic because different browsers (Firefox, Chrome, Internet Explorer) recognize some fonts but not others. WordPress has a great article about Playing with Fonts that you should review before attempting to change your fonts.

Depending on your theme, most forms will have the same font as your posts. This often means you will need to add a specific font-family to a specific class in your child theme.

To change the font of your entire form, you want to target .wpcf7 .cf7s-caspar.

Depending on the font you choose, your entire form will have a different font. In this example, we’re going to change the font to font-family: Verdana, Arial, sans-serif;

The CSS for the Caspar theme, with your new font change, will have an additional font-family:
font-family-css

We also want to increase the font size using font-size: 18px;

In your WordPress child theme or custom CSS plugin add the following CSS code:

font-family: Verdana, Arial, sans-serif;
font-size: 18px;

Code added to child theme or custom CSS plugin:

.wpcf7-form.cf7s-caspar {
    font-family: Verdana, Arial, sans-serif;
    font-size: 18px;
}

When you have saved this change in your child theme, your CF7 Skins form will have your new font.

changed-font

Completed Form

Summary of all Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar {
	border: 1px solid #fc354c;
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
}

.wpcf7 .cf7s-caspar fieldset{
	border: 1px solid #fc354c;
}

.wpcf7 .cf7s-caspar legend{
	border: 1px solid #fc354c;
	background: #fc354c;
}

.wpcf7-form.cf7s-caspar input[type="submit"] {
    background: #fc354c;
    border: 1px solid #fc354c;
}

.wpcf7-form.cf7s-caspar input:hover[type="submit"] {
    background: #feaeb7;
    border: 1px solid #feaeb7;
}

Tips

To remind you, as you go through these examples, there are 3 basic steps to remember:

  1. Know which parts you want to change
  2. Find what you want to change using developer tools
  3. Implement those changes in your child theme or custom CSS plugin.

Have Questions or Need Help

If you are using the free version of CF7 Skins and have any questions, get in touch via the CF7 Skins community and also the Contact Form 7 community at WordPress.org Support.

If you are using the premium version, CF7 Skins Pro, then Premium Email Support is provided (manned by paid staff) to deal with your questions and problems.

07 CF7 Skins Add-ons

CF7 Skins Multi

Multiple page forms is the modern way of handling extensive forms.

CF7 Skins Multi allows you to easily break your Contact Form 7 forms into multiple steps. Forms can be divided where required, quickly & easily, right within the Contact Form 7 plugin interface.

Generally users are much more comfortable in filling forms section by section, instead of going through long forms.

Works within the Contact Form 7 interface

In a small section added to Contact Form 7’s form editor, you can very simply build your multi-part Contact Form 7 form.

works-in-cf7-interface

Break your form up into as many parts as you need.

easy-to-use

Use Multi Options to choose how your multi-part form operates

You can choose how you want each multi-part form to operate by simply selecting from a range of options.

multi-options

CF7 Skins Multi includes the features you need to make user friendly multi-part Contact Form 7 forms.

CF7 Skins Multi includes the features you need to make user friendly multi-part Contact Form 7 forms.

  • Tab Titles – with click Navigation
  • Progress Bar – indicates to users where they are (optional)
  • Navigation Buttons – Previous & Next on each Tab (optional)
  • Pagination – current page / total no. (optional)
  • Start & End Tabs – (optional) additional Navigation Buttons
  • Thank You Tab – (optional) extra page displayed only after completed form submission

Edit Tabs or Add & Delete easily

Just double-click on any Tab to edit it to say what you want.

edit-tabs1

Adding and Deleting Tabs is just as easy.
add-delete-tabs

Use a CF7 Skins Template in each tab to help you get started

You can use all the available CF7 Skins Templates to help create your form. Choose a CF7 Skins Template to get you started. You can copy a different Template to each Tab if you want.

use-template

Design matches CF7 Skins Style

The styling of the CF7 Skins Multi elements in your form (Progress Bar, Tabs & Navigation Buttons) matches closely with your selected CF7 Skins Style.

matching-styles

Requirements

  • Requires at least Contact Form 7 Skins v1.1
  • Requires the CF7 Skins Pro plugin – you will need to also purchase the CF7 Skins Pro plugin to use the CF7 Skins Multi Add-on.

CF7 Skins Ready

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 to all your CF7 Skins forms. You can use the Ready Classes right away without having to write any of your own CSS.

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
  • checkbox-horizontal – displays checkboxes in horizontal line
  • radio-horizontal – displays radio buttons in horizontal line

 

Ready Classes

Using Ready Classes

Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of these pre-defined styles.

<fieldset>
	<legend>singleline</legend>
	<ol class="singleline">
		<li> tel [tel cf7s-tel-01 15/] </li>
		<li> mobile [tel cf7s-tel-02 15/] </li>
	</ol>
</fieldset>

To add a Ready Class you need to edit your form in the Form section of the CF7 interface.

Form section of the CF7 interface

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>

singleline

Displays enclosed elements on a single line

singleline

Form

<fieldset>
	<legend>singleline</legend>
	<ol class="singleline">
		<li> tel [tel cf7s-tel-01 15/] </li>
		<li> mobile [tel cf7s-tel-02 15/] </li>
	</ol>
	<ol class="singleline box">
		<li> Item1 [text item1a] </li>
		<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		<li> Item2 [text item2a] </li>
	</ol>
</fieldset>

Using Singleline

You can group several form elements into a single line by simply adding a singleline Ready Class to the surrounding parent element.

As CF7 Skins uses ordered lists < ol > as the foundation of all CF7 Skins Templates and adds individual form fields in list < li > elements, you simply need to add the singleline Class to the surrounding ordered list parent element.

	<ol class="singleline">
		<li> .. </li>
		<li> .. </li>
	</ol>

Tip:

  1. Fields within singleline are automatically evenly spaced by CF7 Skins Ready. If you want more control over individual field widths you should use the grid Ready Class.
  2. CF7 Skins uses Fieldset, Legend & Lists as the foundation of all CF7 Skins forms.
  3. It’s a really good idea to use tabs to keep all your fields indented to show how they are grouped.

column

Displays enclosed elements in a vertical column

column
    1. Ready Class column
    1. Ready Class column
      1. Ready Class column
      1. Ready Class column
      1. Ready Class column

Form

<fieldset>
	<legend>column</legend>
	<ol class="column">
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1a] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
			<li> Item2 [text item2a] </li>
		</ol>
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1b] </li>
			<li> Item2 [text item2b] </li>
			<li> Item3 [text item3b] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		</ol>
	</ol>
	<ol class="column box">
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1c] </li>
			<li> Item2 [text item2c] </li>
			<li> Item3 [text item3c] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		</ol>
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1d] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
			<li> Item2 [text item2d] </li>
		</ol>
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1e] </li>
			<li> Item2 [text item2e] </li>
			<li> Item3 [text item3e] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		</ol>
	</ol>
</fieldset>

Using Column

To use the column Ready Class you should first setup an ordered list < ol > for each column you want in a group of ordered lists. You need to create a group of ordered lists for all the fields you want placed in columns.

		<ol>
			<li> .. </li>
			<li> .. </li>
		</ol>
		<ol>
			<li> .. </li>
			<li> .. </li>
			<li> .. </li>
		</ol>

Next add a surrounding parent ordered list < ol > and add a column Ready Class to the parent element.

	<ol class="column">
		<ol>
		..
		</ol>
		<ol>
		..
		</ol>
	</ol>

Tip: All columns are automatically evenly spaced by CF7 Skins Ready. If you want more control over individual column widths you should use the grid Ready Class.

grid

Implements a strict form grid

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

Form

<fieldset>
	<legend>grid (with grid-hover & grid-lined)</legend>
	<ol class="grid grid-hover grid-lined">
		<ol data-row-span="1">
			<li data-field-span="1"> Field 1 [text item-g1a] </li>
		</ol>
		<ol data-row-span="2">
			<li data-field-span="1"> Field 1 [text item-g1b] </li>
			<li data-field-span="1"> Field 2 [text item-g2b] </li>
		</ol>
		<ol data-row-span="3">
			<li data-field-span="1"> Field 1 [text item-g1c] </li>
			<li data-field-span="1"> Field 2 [text item-g2c] </li>
			<li data-field-span="1"> Field 3 [text item-g3c] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="1"> Field 1 [text item-g1d] </li>
			<li data-field-span="1"> Field 2 [text item-g2d] </li>
			<li data-field-span="1"> Field 3 [text item-g3d] </li>
			<li data-field-span="1"> Field 4 [text item-g4d] </li>
		</ol>
		<ol data-row-span="5">
			<li data-field-span="1"> Field 1 [text item-g1e] </li>
			<li data-field-span="1"> Field 2 [text item-g2e] </li>
			<li data-field-span="1"> Field 3 [text item-g3e] </li>
			<li data-field-span="1"> Field 4 [text item-g4e] </li>
			<li data-field-span="1"> Field 5 [text item-g5e] </li>
		</ol>
		<ol data-row-span="3">
			<li data-field-span="2"> Field 1 [text item-g1f] </li>
			<li data-field-span="1"> Field 2 [text item-g2f] </li>
		</ol>
		<ol data-row-span="3">
			<li data-field-span="1"> Field 1 [text item-g1g] </li>
			<li data-field-span="2"> Field 2 [text item-g2g] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="1"> Field 1 [text item-g1h] </li>
			<li data-field-span="2"> Field 2 [text item-g2h] </li>
			<li data-field-span="1"> Field 3 [text item-g3h] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="2"> Field 1 [text item-g1i] </li>
			<li data-field-span="1"> Field 2 [text item-g2i] </li>
			<li data-field-span="1"> Field 3 [text item-g3] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="3"> Field 1 [text item-g1i] </li>
			<li data-field-span="1"> Field 2 [text item-g2j] </li>
		</ol>
	</ol>
</fieldset>

Using Grid

Using a grid is very powerful and quite intuitive once you get a handle on it.

grid:

Create a grid by giving a surrounding parent < ol > or < div > element a grid class to turn the enclosed area into a grid.

	<ol class="grid">
		..
		..
		..
	</ol>

Optionally add grid-hover grid-lined to add these features to your grid.

	<ol class="grid grid-hover grid-lined">
		..
		..
		..
	</ol>

rows:

Your grid has a number of rows.

Set a < ol > element with the data-row-span attribute to make a row. Set the attribute value to the total number of columns you want in this row – 2 to divide it into 2 columns, 3 to divide it into 3 columns and so on.

	<ol class="grid grid-hover grid-lined">
		<ol data-row-span="4">
			..
			..
		</ol>
	</ol>

fields:

Each row has a set of fields.

Set up the enclosed < li > field elements with data-field-span attribute values equal to the number columns you want it to occupy within the row – set to “1” the field spans 1 columns, set to “2” the field spans 2 columns etc.

	<ol class="grid grid-hover grid-lined">
		<ol data-row-span="4">
			<li data-field-span="3"> Field 1 [text item-g1] </li>
			<li data-field-span="1"> Field 2 [text item-g2] </li>
		</ol>
	</ol>

Note: The total number columns you set in the fields data-field-span attribute should add up to the value set for data-row-span in the enclosing row.

Tip:

  1. You can use the CF7 Skins Pro Grid Pro Template to help you get started building a CF7 Skins form based on a strict grid. Then you can copy, add, remove and alter fields to customize the form to suit your needs.
  2. You can use the grid Ready Class to give you control over individual column widths within a form.

box

Displays enclosed elements in a surrounding box

box

Form

<fieldset>
	<legend>box</legend>
	<ol class="box">
		<ol class="singleline">
			<li> Item1 [text item1a] </li>
			<li> Dropdown Menu [[select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"]] </li>
			<li> Item2 [text item2a] </li>
		</ol>
	</ol>
</fieldset>

Using Box

You can add a box Ready Class to a group of form elements by simply adding the box Class to the surrounding parent element.

	<ol class="box">
		<li> .. </li>
		<li> .. </li>
	</ol>

You can add a box Ready Class to single or multiple ordered lists < ol >.

	<ol class="box">
		<ol>
		..
		</ol>
		<ol>
		..
		</ol>
	</ol>

checkbox & radio buttons – horizontal

Displays checkboxes & radio buttons in horizontal line

checkbox & radio buttons - horizontal
  1. Checkboxes (Ready Class checkbox-horizontal)
     Item1 Item2 Item3 Item4
  2. Radio Buttons (Ready Class radio-horizontal)

Form

<fieldset>
	<legend>checkbox & radio buttons - horizontal</legend>
	<ol>
		<li class="checkbox-horizontal">Checkboxes (<strong>Ready Class checkbox-horizontal</strong>)
		 [checkbox cf7s-checkbox-02 "Item1" "Item2" "Item3" "Item4"] </li>
		<li  class="radio-horizontal">Radio Buttons (<strong>Ready Class radio-horizontal</strong>)
		 [radio cf7s-radio-02 label_first use_label_element "Item1" "Item2" "Item3"] </li>
	</ol>
</fieldset>

Using checkbox & radio buttons – horizontal

CF7 Skins displays all checkbox & radio buttons in a vertical list by default.

Add the checkbox-horizontal or radio-horizontal Ready Class to individual list < li > elements containing checkbox & radio buttons tags to display checkbox or radio buttons in a horizontal list.

	<ol>
		<li class="checkbox-horizontal">Checkboxes horizontal
		 [checkbox cf7s-checkbox-02 "Item1" "Item2" "Item3" "Item4"] </li>
	</ol>

Requirements

  • Requires at least Contact Form 7 Skins v1.1.1
  • Requires the CF7 Skins Pro plugin – you will need to also purchase the CF7 Skins Pro plugin to use the CF7 Skins Ready Add-on.
  • Requires the libxml PHP extension on your server
libxml PHP extension

CF7 SKins Ready requires the libxml PHP extension to installed on your WordPress hosting and the DOM/XML module enabled. This is commonly available on most basic WordPress hosting.

You can check if this extension is available on your WordPress hosting server by following this steps:

a. In the public_html folder of your site, create a file named phpinfo.php.
b. Insert the following code into the phpinfo.php file:

c. Open an internet browser and type the following into your browser’s address bar:
http://example.com/phpinfo.php
Be sure to replace “example.com” with your actual domain.
d. Find libXML support in the page and make sure it says active
e. Find DOM/XML in the page and make sure it says enabled

There is a WordPress plugin that can display the current server information:
https://wordpress.org/plugins/wordpress-php-info/

NOTE: WordPress currently requires PHP version 5.2.4 or greater (recommended: PHP 5.4 or greater) – see WordPress Hosting Requirements.

CF7 Skins Logic

CF7 Skins Logic allows you to add Conditional Logic to Contact Form 7 forms.

With CF7 Skins Logic you can

  • dynamically change the form fields displayed based on user input
  • show or hide form elements depending on the values input in other form fields
  • display selected form items in response to options chosen.

Options

  • Show or Hide – fields
  • Criteria – field, user and post info
  • Value – equals, not equals, contains or changed
  • Compare – numeric or text values
  • Multiple logic statements – if all & if any
  • Multiple fields with varying logic.

Easy to Use

CF7 Skins Logic works right within the Contact Form 7 plugin interface – it adds an extra tab where you can configure each Contact Form 7 form to show or hide fields based on user selections.

CF7 Skins Logic is easy to use
Conditional Logic for Contact Form 7

Using CF7 Skins Logic

1. Select & Add Field

Select Field

2. Choose “Show or Hide” plus “All or Any”

Choose Show this or Hide this

3. Select Criteria, choose Comparison & add Value

Add Value

4. Add Additional Statements & Fields

CF7_Skins_Logic_Step_4

Conditional Logic can also be added within CF7 Skins Multi Forms.

Examples

Show & Hide Form Fields

Show extra fields as a user fills in the form

Your Details

* Required


Instructions – start typing in the Name field to see the form expand to include Message field.

 

Form Logic

Show & Hide Form Fields

Compare Field Values to Set Criteria

Display additional questions based on user input

Your WordPress Experience
  1. Free Pro None 
  2. Which of the following describe how you use WordPress?

* Required


Instructions – additional questions are displayed based on your answer to the first question.

 

Form Logic

Compare Field Values to Set Criteria

08 Staying Updated

Tip: We are only able to provide support for the latest version of WordPress, Contact Form 7 and CF7 Skins. We will need to ask you to upgrade all of these to their latest versions before we are able to provide you with any support.

Please make sure that you are using the latest version of WordPress, Contact Form 7, and CF7 Skins. Updating to the latest version ensures plugin’s compatibility with the WordPress and Contact Form 7 releases. It also helps you get new features as soon as they are released.

Automatically Updating Plugin From WordPress Dashboard

WordPress has a built-in mechanism that notifies you when there is a new version of a plugin is available. This is usually highlighted by a digit appearing on the Plugins menu, on the Updates menu, and on the top admin bar.

A plugin update is available

Tip: We provide almost identical update support for CF7 Skins Pro – plugin will be updated from our website instead of wordpress.org.

You can see available updates, and force WordPress to check for updates by visiting Dashboard → Updates.

Select your updates and hit the update plugins button.

Installing updates in WordPress

WordPress will now download and install the new version of the selected plugins.

Tip: If you move your site after you activate your license you will need to change the site location in your Account to recieve update notifications.

Manually Updating Plugin

An alternate method to apply plugin updates is by uploading the plugin manually using an FTP client.

  1. First you need to download the latest version of the plugin in a zip file to your computer. You can download this file from WordPress.org (CF7 Skins free version) or your CF7 Skins account area (for CF7 Skins Pro).
  2. After downloading the zip file, you need to extract it.
  3. Connect to your web server using an FTP client like FileZilla.
  4. After connecting to your website, go to /wp-content/plugins/
  5. Now upload the contact-form-7-skins folder you extracted to the /wp-content/plugins/ directory on your server.
  6. Your FTP client would warn you that a file with the same name already exists. Choose Overwrite to make sure that your new files replace the older version of the plugin.

That’s all you have successfully updated the plugin to the latest version.