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.
Scroll down to the Skins section. Click the Template tab to begin exploring templates that are available to you.
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:
Sort templates by:
- License (show Pro version templates at the top, for example)
Or, search for a specific template name.
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.
Below each template screenshot, click Details to learn more about it.
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.
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.
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.
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.
The template will also be automatically reflected in the Contact Form 7 form editor at the top of the page.
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.
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.