Last Updated on
Using the visual editor, quickly create new fields and rearrange them on your form using drag and drop. The Form tab is where you edit and save your form using the visual editor.
First, select a Template or open an existing form. In the image below, the visual editor shows a form that was created by selecting the Contact Form 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.
On the right side of the visual editor, form Fields are divided by CF7 Tags (Contact Form 7 form tags) and CF7 Skins Items.
To add a field, drag and drop it onto your form.
1. Click the field you want, holding down your mouse.
2. Drag the field over the form and drop it where you want the field to be.
When adding a CF7 Tag, the visual editor will automatically add a CF7 Skins Item
LIST-LI for you.
To learn more about why the editor adds items, see Why we use Fieldset, Legend, and Lists in CF7 Skins.
Tip: You are not required to write any code. The visual editor replaces all Contact Form 7 form-tag syntax and capabilities with the visual interactive boxes.
Rearrange the order where fields appear on the form by dragging and dropping them into the correct position.
1. Click and hold your mouse down on the field’s drag & drop 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.
These rules are intended to help you build well-constructed forms that work with any CF7 Skins Style.
A few drag & drop tips and best practices to follow are:
- Use a Template for guidance.
- If you are adding a field onto your form and see a red box, drag it slowly left until you get a blue box.
- Use the duplicate feature to copy a similar field tag. For example, if you want first name and last name fields, duplicate a text field tag and edit the label.
- Deleting a
LIST-LIwill also delete it’s accompanying CF7 Tag.
- If you change your mind when dragging a field, drop it on a red box. No changes will be made to your form.
- A Contact Form 7 Tag always needs it’s own, dedicated
- Adding a
LIST-OLwill always create a
Save Your Changes
To save any changes or edits made on visual editor, you must click Save Visual
Once you save, your changes are reflected in the traditional Contact Form 7 Tag Editor.
Complexity made easy through innovative features
Manage complex forms all within the visual editor.
Save time with the great features such as:
- minimizing sections you don’t need to focus on
- duplicating entire sections of a form to re-use
CF7 Skins Visual is great for simple forms but it really shines for more complex forms. Especially when you combine this with the convenience offered by CF7 Skins Add-ons.
Clear, readable, and accessible forms
The visual editor makes building of CF7 Skins forms, including fieldsets and lists , even easier by the use of a simple drag & drop interface.
Using these important form elements supported by CF7 Skins enhances form usability and allows significantly more detailed styling of your forms. Learn Why we use Fieldset, Legend & Lists in CF7 Skins.
All within Contact Form 7
CF7 Skins builds on top of the power of Contact Form 7 and is accessed right inside the plugin interface.
If you ever need to make any changes using Contact Form 7, you can.