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.

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

CF7 Skins Form tab showing the visual form editor for 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.

Add Fields

On the right side of the visual editor, form Fields are divided by CF7 Tags (Contact Form 7 form tags) and CF7 Skins Items.

CF7 Skins - Form tab - Contact Form 7 Tags and CF7 Skins Field 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.

CF7 Skins - Form Tab - Drag and Drop New Field

When adding a CF7 Tag, the visual editor will automatically add a CF7 Skins Item LIST-LI for you.

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

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.

Re-order Fields

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 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.

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

Troubleshooting Tips

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

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 CF7 Skins - Form - Duplicate Field Iconfeature to copy a similar field tag. For example, if you want first name and last name fields, duplicate a text field tag and edit  CF7 Skins - Form - Edit Pen for Contact Form 7 tagthe label.
  • Deleting CF7 Skins - Form - Delete X Icona LIST-LI will 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 LIST-LI (except Submit).
  • Adding a LIST-OL will always create a LIST-LI.

Save Your Changes

To save any changes or edits made on visual editor, you must click Save Visual CF7 Skins - Save Visual Button

Once you save, your changes are reflected in the traditional Contact Form 7 Tag Editor.

CF7 Skins - Visual Editor and Tag Editor View of Contact Form Template

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 - Form - Ready Class - Singleline and Column

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.

CF7 Skins - Form Tab Visual Editor Starter Template

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.

Contact Form 7 - CF7 Skins Full Screen

If you ever need to make any changes using Contact Form 7, you can.

%d bloggers like this: