CF7 Skins Visual Editor

This article now includes information on our drag & drop Visual Editor for Contact Form 7, which will be released shortly.

When you select a CF7 Skins Template, it instantly generates a form with predefined HTML fields and Contact Form 7 tags. All of your available templates are on the Template tab.

Choosing a Template

To begin, select your Contact Form from the admin panel.

WordPress Admin - Contact Form Plugin

Scroll down to the Skins section. Click the Template tab to begin exploring templates that are available to you.

cf7skins-template-tab-open

When looking for a template, the goal is to select one that gives you a good foundation to build off of. Not every template will have all of the fields or information that you want. Look for something that most closely represents the form that you want to create.

Filter which templates you can see by viewing:

  • All
  • Featured
  • Popular
  • Latest

Sort templates by:

  • Name
  • Date
  • License (show Pro version templates at the top, for example)

Or, search for a specific template name.

CF7 Skins - Template - FIlter - Sort - Search

When searching, type in the first few letters of what you are looking for and hit Enter. For example, entering ‘reg’ will pull up two different Registration forms.

CF7 Skins - Template - Search - Registration

Below each template screenshot, click Details to learn more about it.

cf7skins-template-contact-details

Clicking on the Details link will display a larger screenshot of the template with its description and usage details. The screenshots provided with each template are an accurate view of what your form will be structured like. To change the appearance of the form, learn more about CF7 Skins Styles.

CF7 Skins Template - Contact Form - Details View

Tip: For short help tips and advice anywhere in the CF7 Skins Plugin, hover your mouse over any text links, icons, or question marks.

Once you have found a template that is close enough to what you need, click Select below the template screenshot. The template will now show as selected and, to easily check at any time, Template:[ ] will display the template name you chose.

cf7skins-template-contact-selected

If a template is selected, the CF7 Skins Form tab and the Contact Form 7 form editor will automatically update with the structure of the template.

At any point in time, you can erase any changes and go back to the default template. Go back to the Template tab, deselect the template, and reselect it.

Example: Choosing the Event Form Template

Let’s say you are hosting an event and want a registration form on your site. Go to the Template tab, find Event, and Select it.

CF7 Skins - Template - Event - Selected

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.

Click the Form tab to see the template in the CF7 Skins visual form editor.

CF7 - Form Editor - Event Template

The template will also be automatically reflected in the Contact Form 7 form editor at the top of the page.

CF7 - Form Editor - Event Template

That’s all it takes to successfully begin using the Event Template. To save the event form or any changes that you have made to it, you must click Save Visual.

Tip: Once you click Save Visual, any changes made in CF7 Skins (the Form, Template, and Style tabs) will be permanent.

CF7 Skins - Visual Form Editor - Save Visual Button

For instructions on how to edit your form on the CF7 Skins Form tab, follow along with the tutorial Create a form with CF7 Skins.

%d bloggers like this: