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.

Wordpress Menu - Contact Forms - Add New

Scroll down until you see the CF7 Skins section, just below the regular Contact Form 7 user interface.

CF7 Skins - UI - Inside Contact Form 7

Skins

The Skins section is divided into several main tabs:

  • Form
  • Template
  • Style

CF7 Skins - UI - Main Sections - Form, Template, Style

Form

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.

CF7 Skins - Visual Form Editor - Form Only - Template - Contact

CF7 Skins Form tab showing the visual form editor

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.

CF7 Skins - Form Tab - Drag and Drop New Field

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.

CF7 Skins - Visual Form Editor - Save Visual Button

Tip: Once you click Save Visual, you do not need to click any other Save buttons.

Template

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.

cf7skins-templates-top-row-view

Filter, sort, or search to find a template that most closely matches the form you want to create.

Styles

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.

CF7 Skins - Styles

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.

CF7 Skins - UI - Getting Started and Add-Ons Tabs

%d bloggers like this: