Last Updated on

The CF7 Skins Form tab is where you edit your form using the Visual Editor.

The visual editor enables you to make changes to your form without having to know about Contact Form 7 tags and syntax. 

If this is your first time using CF7 Skins or creating a new form, we recommend starting with How do I create a form with CF7 Skins?

The Visual Form Editor

1. Once you have created a form, open it and scroll down until you see Skins.

CF7 Skins - UI - Inside Contact Form 7

2. The Form tab is open by default.

CF7 Skins - Form - Visual Editor

All of the Contact Form 7 Tags and CF7 Skins Items are shown under Fields. You can drag and drop these onto your form.

CF7 Skins - Form tab - Contact Form 7 Tags and CF7 Skins Field Items

Add New Fields

All of the available form fields are under Fields (CF7 Tags) and Fields (CF7 Skins Items).

1. Click and hold down your mouse on a field.

2. Drag and drop it onto your form in the place you would like it to appear.

Tip: A single click on a field will add it to the bottom of your form.

CF7 Skins - Form Tab - Drag and Drop New Field

CF7 Skins - Drag and Drop - Add a Contact Form 7 Tag

Edit a Field

1. Click the Edit pen icon CF7 Skins - Form - Edit Field Icon on a field.

2. On the right side, the field’s edit options will appear. Each field has different edit options.

Tip: If you edit the Fieldset item, you can enter a Legend (a title) for your form.

Below is an example of what you can edit on a Text field tag.

CF7 Skins - Form - Edit a Field Options

The most common edits on the text field are the field’s label and default value.

Adjust form fields quickly to suit your needs

On the visual form, you can drag and drop to re-order the fields or click to edit, duplicate, and delete them.

CF7 Skins - Visual Form Editor - Field Tag Edit Duplicate Remove

Rearrange Existing Fields

To rearrange where fields appear on the form, changing their order:

1. Click and hold your mouse down on the field’s drag-and-drop box CF7 Skins - Form Tab - Drag-and-Drop Grey Box Icon.

2. Move your mouse to drag-and-drop a field up and down the form.

When moving a field, the editor will show you a blue or red box. Blue means you can move a field to that position, red is when you cannot.

CF7 Skins - Form Tab - Drag and Drop Field Blue SuccessCF7 Skins- Form - Move Field Red Box Unable

Tip: Take a look at common Troubleshooting Tips in Using Drag and Drop Visual Editor.

CF7 Skins - Drag and Drop - Rearrange a Contact Form 7 Tag

Duplicate a Single Field or a Group of Fields

1. Click the Duplicate paper icon CF7 Skins - Form - Duplicate Field Icon to make a copy of a single field or an entire set of fields.

CF7 Skins - Form - Duplicate Lists and Fields

Tip: To know what you are duplicating, click the minimize icon CF7 Skins - Form - Minimize Minus Icon beside the field name. Anything that collapses below the field will be duplicated.

Delete a Single Field or a Group of Fields

1. Click the Delete x icon CF7 Skins - Form - Delete X Icon to delete a single field or an entire set of fields.

CF7 Skins - Form - Delete Set of Fields or Delete Single Set

Save & View your Form

To permanently save any changes made in CF7 Skins,

1. Click Save Visual.

Tip: After clicking Save Visual, you do not need to click any other save buttons. You cannot recover a previous version of the form after saving.

CF7 Skins - Visual Form Editor - Save Visual Button

2. Visit the page or post on your WordPress website (where the form is in use) to see your updated form. If it is a new form, see how you preview what your form will look like.

You can still use the Contact Form 7 Tag Editor to make any changes to your form fields.

Please note that any changes made in the traditional Contact Form 7 tag editor will not be reflected in the visual editor.

Templates & Styles

Choosing or changing the Template and Style for your form each have their own respective sections and are separate from the Form tab.

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

A Template is like a guide to help you on the Form tab. Learn more about Choosing a Template.

Tip: Use the Visual Editor after choosing a CF7 Skins Template. If you choose a Template later, the template form will override any form fields you have created and edited.

A Style is the visual aesthetic design of your form and cannot be seen on the Form tab. Learn more about Choosing a Style.

%d bloggers like this: