Stop editing your forms blind. Contact Form 7 is the most popular form plugin for WordPress, but its forms are written as code in a plain text box. Visual Builder for Contact Form 7 turns that box into a modern visual builder: you see your form as your visitors will, and you change it with a click or a drag.

Your forms keep being 100% Contact Form 7. Visual Builder only helps you write them faster and with fewer mistakes, so everything you already know about Contact Form 7 still works: mail settings, messages, add-ons and shortcodes.

See your form while you build it

• Live preview of every field, rendered by Contact Form 7 itself and refreshed as you type.
• Split, Code or Visual layout: work side by side with the code, focus on the code, or hide it and build only visually.
• Click a field to find it in the code, and place the cursor in the code to see which field it belongs to.

Build faster, with the mouse, the keyboard or your finger

• Drag & drop fields to reorder your form, on desktop, tablet and phone.
• Move, duplicate or delete any field with one click, and bring it back with Undo.
• Add new fields exactly where you want them: select a field and the Contact Form 7 buttons insert the new one right after it.
• Keyboard shortcuts for power users: arrows to move between fields, Alt + arrows to reorder, Delete and Enter to edit.

Edit any field without touching the code

• One-click field editor with a live preview: label, name, required, options and choices.
• Labels made easy: type a label and Visual Builder writes the right markup for you, the same way Contact Form 7 does.
• Built-in validation of field names, so you avoid broken forms before you save.
• Prefer code? Edit the source of any block, or the whole form, whenever you want.

A better code editor, too

• Syntax highlighting with the code editor built into WordPress.
• Color schemes for the code: Default, Monokai, Blackboard and Cobalt.
• Your layout and color scheme are remembered for each user.

Safe for your forms

• Your hand-written code is respected: custom HTML, comments, styles and scripts stay exactly as you wrote them. Visual Builder only changes the fields you work on.
• Every change can be undone, from the Undo button or with Ctrl+Z in the code editor.
• Nothing changes on your site until you click Save, and your forms on the front end are served by Contact Form 7 as always.
• No lock-in: if you ever deactivate Visual Builder, your forms keep working exactly the same.

Made for everybody

• Beginners create and organize forms without learning the Contact Form 7 syntax.
• Designers and agencies build client forms in minutes and see the result right away.
• Developers keep full control of the code, with a faster way to reorder and review long forms.

Visual Builder follows the look of the WordPress admin, works with screen readers and the keyboard, adapts to small screens and comes translated into 12 languages.

1. Standard textarea from Contact Form 7, will be replaced with Visual Builder.

2. New areas added after activate the plugin.  Every field is reflected with <p> tag in textarea.

3. Now you can Drag & Drop to change fields order. (If Adds a new field with above tags, must save to see changes in Visual Builder)

4. After Drop a field you’ll see the change also in textarea. You must save Form to save all you have changes.

5. Option to delete a field and its labels just with a click.

6. Click de eye to hide/show the Visual Builder.