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.
On the form itself, you can drag-and-drop to re-order the fields or click to edit, duplicate, and delete them.
All of the available Contact Form 7 form tags and CF7 Skins Items are shown under Fields.
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 .
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.
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.
Edit a Field
1. Click the Edit pen 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.
The most common edits on the text field are the field’s label and default value.
1. Click the Duplicate paper icon to make a copy of a single field or an entire set of fields.
Tip: To know what you are duplicating, click the minimize icon beside the field name. Anything that collapses below the field will be duplicated.
1. Click the Delete x icon to delete a single field or an entire set of fields.
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.