Visual Builder for Contact Form 7

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