Last Updated on

This FAQ is about using the CF7 Skins visual form editor. To edit your form using the Contact Form 7 editor, see How do I edit my CF7 Skins form (using Contact Form 7 editor)?


The CF7 Skins Form tab is where you edit your form.

On the Form tab, 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 and creating a form, we recommend starting with How do I create a form with CF7 Skins?

Once you have selected a Template, click Form to open the visual editor.

Warning: Choosing a template and saving it will erase and replace an existing form on your Form tab. We recommend making a copy of the contact form first, in case you want to revert back to the original.

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

CF7 Skins Form tab showing the visual form editor for the Contact form template.

On the form itself, 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

All of the available Contact Form 7 form tags and CF7 Skins Items are shown under Fields.

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

Re-order Existing Fields

To re-order where fields appear on the form,

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

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

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: Any edits automatically appear on the visual editor, but will not appear on your site until you make changes permanent by clicking Save Visual.

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.

Duplicate

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

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

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

Related FAQs:

  1. How do I preview what my form will look like?
  2. Tutorial: Edit your CF7 Skins form (Visual Editor)
  3. How do I edit my CF7 Skins form (using Contact Form 7 editor)?