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.
2. The Form tab is open by default.
All of the Contact Form 7 Tags and CF7 Skins Items are shown under Fields. You can drag and drop these onto your form.
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: 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.
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.
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 .
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.
Tip: Take a look at common Troubleshooting Tips in Using Drag and Drop Visual Editor.
Duplicate a Single Field or a Group of Fields
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.
Delete a Single Field or a Group of Fields
1. Click the Delete x icon to delete a single field or an entire set of fields.
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.
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.
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.