CF7 Skins Visual Editor
This article now includes information on our drag & drop Visual Editor for Contact Form 7, which will be released shortly.
CF7 Skins has a simple and easy to learn user interface. Follow along to see the different sections and how they help you quickly create beautiful Contact Form 7 forms.
First, since CF7 Skins is built within Contact Form 7, you need to create a new Contact Form 7 form:
1. Log in to your WordPress account.
2. Go to Contact and click Add New.
Scroll down until you see the CF7 Skins section, just below the regular Contact Form 7 user interface.
The Skins section is divided into several main tabs:
The Form (visual editor) tab is where you build and edit your form. It displays an interactive, visual, layout of your form’s fields and structure.
On the side are all of the available fields, including Contact Form 7 tags and CF7 Skins items.
You can simply drag and drop selected form fields from the Fields section into the Form section.
Important: Only use the visual form editor after choosing a template. Selecting a template overrides the form section and will erase all of your changes.
To save any changes you make to the Form section, click Save Visual.
Tip: Once you click Save Visual, you do not need to click any other Save buttons.
Templates, based on commonly used forms, act like an easy to follow guide that you can adjust based on your needs. Once a template has been selected, the Form section is automatically updated with the new layout, structure, and content.
Filter, sort, or search to find a template that most closely matches the form you want to create.
The Style tab is where you choose which aesthetic design you want to apply to your form. Once a style has been selected, it is automatically applied to your form.
Tip: To keep your WordPress theme’s style and apply it to all form fields, select Default Style.
Filter, sort, or search to find a style that will complement your site’s design.
More templates and styles are available with the CF7 Pro Add-on.
Help & More Features
If you have a question or need extra help, quickly find useful advice and links in the Getting Started section. To see what extra features CF7 Skins offers to make your forms even better, take a look at the Add-ons section.