Title: PolarOne Visual Form Editor for Contact Form 7
Author: PolarOne
Published: <strong>November 5, 2026</strong>
Last modified: November 6, 2026

---

Search plugins

![](https://ps.w.org/polarone-visual-form-editor-for-contact-form-7/assets/banner-
772x250.png?rev=3786779)

![](https://ps.w.org/polarone-visual-form-editor-for-contact-form-7/assets/icon-
256x256.gif?rev=3786779)

# PolarOne Visual Form Editor for Contact Form 7

 By [PolarOne](https://profiles.wordpress.org/polarone/)

[Download](https://downloads.wordpress.org/plugin/polarone-visual-form-editor-for-contact-form-7.1.0.3.zip)

 * [Details](https://wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/#description)
 * [Reviews](https://wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/#reviews)
 *  [Installation](https://wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/#installation)
 * [Development](https://wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/#developers)

 [Support](https://wordpress.org/support/plugin/polarone-visual-form-editor-for-contact-form-7/)

## Description

Contact Form 7 is very good at the hard parts: validation, email, spam protection.
Layout is where it gets awkward. Anything more than a single column means writing
HTML and form-tags by hand, and one misplaced bracket or asterisk quietly breaks
a field.

PolarOne Visual Form Editor for Contact Form 7 adds a visual editor to the form 
screen you already use. Add a row, choose how many columns it has, drop fields in
and drag them around. The plugin writes the Contact Form 7 form-tags for you, and
Contact Form 7 keeps doing everything else exactly as before: validation, mail, 
submissions and every add-on you rely on.

**Build the form**

 * Rows with one to four columns, with your own gaps and column widths.
 * All the usual fields: text, email, phone, number, date, URL, textarea, dropdown,
   radio buttons, checkboxes, consent, file upload, submit button, headings and 
   text blocks.
 * Any other form-tag on your site, including tags added by other plugins, shows
   up in the same list with its own settings.
 * Containers, to wrap a group of fields in a section or in a paired tag such as`[
   group] ... [/group]`.
 * Drag and drop, duplicate, reorder, delete. Every element has its own settings
   panel.

**Works with other plugins**

 * **Drag and Drop Multiple File Upload for Contact Form 7**: the “Multiple file
   upload” element writes its `[mfile]` tag with file types, size and number of 
   files. The element appears only while that plugin is active.
 * **Conditional Fields for Contact Form 7**: a Container with the tag `group` writes`[
   group name] ... [/group]`, so conditional groups stay in the visual editor.
 * Any other plugin that registers a Contact Form 7 form-tag adds its own element
   to the list. When the plugin is deactivated its element disappears from the list,
   and a field already on the form is hidden on the site instead of printing the
   raw shortcode.
 * The plugin needs no other plugin: the “File upload” element has its own multiple-
   file and drag-and-drop mode.

**Start from a template**

Ten ready-made designs: labels above or inside the fields, square or round corners,
one or two columns, icons inside fields, a dark variant and a one-line newsletter
form. A template brings its styles with it, so the form looks finished as soon as
you pick it.

**Style it without writing CSS**

 * Alignment, label position, size and width for each element.
 * A Styles tab for colours, corner radius, spacing, font sizes and the focus ring.
   The settings belong to one form only, so two forms on the same page can look 
   completely different.
 * An optional icon inside a field, taken from your media library.
 * A live preview next to the settings.

**After the form is sent**

Add a thank-you screen block anywhere in the form. When Contact Form 7 reports a
successful send, the form is covered with your own title, text and picture, with
an optional close button. It can also close by itself after a few seconds. Leave
the text empty and the plugin shows the success message from the Messages tab of
the form.

When something goes wrong, validation errors stay right under their fields and the
form status appears as one short line below the submit button.

**Design the email too**

Build an HTML email from text, field values, images, buttons, dividers and spacers,
arranged in rows and columns. It is rendered as tables, so Outlook and other desktop
clients show it the way you designed it. Above every mail field there is a palette
of mail-tags, and tags that would not work in that field are greyed out with an 
explanation.

**Your existing forms are safe**

Activating the plugin changes nothing. No form is touched and nothing is switched
on in the front end.

The first time you open an old form in the editor, its markup is read and shown 
as blocks. Forms written with `<label>` wrappers come back as labelled fields, and
layouts built with tables or `half` / `one-third` wrappers come back as rows and
columns. Nothing is saved until you press Save. Form-tags the editor does not know
are kept exactly as they are, options and values included. If you edit the markup
by hand, the editor rebuilds the layout from your markup, never the other way round.

**Light on your site**

 * Minimal front-end code: one small stylesheet for forms built with this plugin,
   and a tiny script only for forms that use the thank-you screen. Nothing else 
   is added to your pages.
 * The editor scripts load on the Contact Form 7 form screen only.
 * No external fonts, no CDN, no tracking. Icons come from Dashicons, which ship
   with WordPress.

## Screenshots

[⌊The visual editor on the standard Contact Form 7 form screen: rows, columns and
fields on the canvas, with the element catalogue on the left.⌉⌊The visual editor
on the standard Contact Form 7 form screen: rows, columns and fields on the canvas,
with the element catalogue on the left.⌉[

The visual editor on the standard Contact Form 7 form screen: rows, columns and 
fields on the canvas, with the element catalogue on the left.

[⌊The template gallery: ten ready-made forms, each with its own styles. One click
fills the canvas and the Styles tab.⌉⌊The template gallery: ten ready-made forms,
each with its own styles. One click fills the canvas and the Styles tab.⌉[

The template gallery: ten ready-made forms, each with its own styles. One click 
fills the canvas and the Styles tab.

[⌊Element settings: alignment, label position, size, width and an optional icon.⌉⌊
Element settings: alignment, label position, size, width and an optional icon.⌉[

Element settings: alignment, label position, size, width and an optional icon.

[⌊The Styles tab: colours, spacing and the focus ring for one form only, with a 
live preview.⌉⌊The Styles tab: colours, spacing and the focus ring for one form 
only, with a live preview.⌉[

The Styles tab: colours, spacing and the focus ring for one form only, with a live
preview.

[⌊The HTML mail template builder.⌉⌊The HTML mail template builder.⌉[

The HTML mail template builder.

[⌊A form on the front end, built from the "Soft card" template.⌉⌊A form on the front
end, built from the "Soft card" template.⌉[

A form on the front end, built from the “Soft card” template.

[⌊Possible appearance of your form.⌉⌊Possible appearance of your form.⌉[

Possible appearance of your form.

## Installation

 1. Install and activate Contact Form 7.
 2. Install and activate PolarOne Visual Form Editor for Contact Form 7.
 3. Open Contact Form 7 and edit a form. The visual editor is the first tab of the 
    form screen.

The plugin refuses to activate without Contact Form 7, because the editor lives 
inside the Contact Form 7 form screen.

## FAQ

### Why do I need this plugin?

Because building a good-looking form in Contact Form 7 should not take an evening.
With this plugin you build the form on screen, the way you would arrange blocks 
on a page.

 * **Columns and widths.** Put two or three fields side by side, set the width of
   every column, and control the gaps between fields and rows.
 * **Drag and drop.** Add fields from a catalogue, drag them where you want them,
   duplicate or delete them in one click. No code to remember.
 * **Icons.** Put an icon inside any field, such as an envelope in the email field,
   straight from your media library.
 * **Looks without CSS.** Choose alignment, label position, size and width for each
   element, and set colours, rounded corners, spacing and the focus ring for the
   whole form. Every form can have its own look.
 * **Ready-made templates.** Pick one of ten designs, change what you need and save.
 * **A proper thank-you.** Show your own message, picture and a close button over
   the form after it is sent, instead of a plain line of text under it.
 * **A nice email, too.** Design the email you receive with the same drag and drop
   approach.

You get a more polished form in a few minutes, and it is still a normal Contact 
Form 7 form, so everything you already use keeps working.

### How does the thank-you screen work?

Add the “Thank-you screen” element to the form, in its own row at the end for example,
and fill in a title, a text and, if you like, a picture. After a successful send
the screen covers the form until the visitor closes it with the button, the Esc 
key or a click outside the card, or until the time you set runs out. If you leave
the text empty, the success message from the Messages tab of the form is shown.

Forms without this element behave as before. The small script that powers the screen
is loaded only on pages with a form that contains it.

### Does it slow down my site or load more than a normal Contact Form 7 form?

No. A form built with the plugin is ordinary Contact Form 7 markup plus one small
stylesheet, and that stylesheet is only loaded for forms built with the plugin. 
If a form uses the thank-you screen, a tiny script is loaded for that form as well.
Forms without it get no JavaScript from this plugin. Everything else (the builder,
the styles panel, the template gallery, the media picker) loads on the Contact Form
7 form screen only, where nobody but an administrator ever goes.

### What happens to my old form when I activate the plugin?

Nothing. Activation does not rewrite a single form, does not add anything to the
front end and does not change how your forms look or behave.

When you open an old form in the editor for the first time, the plugin reads its
markup and shows it as blocks: `<label>` wrappers become field labels, a table or`
half` / `one-third` wrappers become rows and columns. That reading happens on the
fly and is not stored anywhere. If you close the editor without saving, the form
is exactly as it was.

The form markup is rewritten only when you save the form in the visual editor. Before
you do that, open the “Form markup (advanced)” section at the bottom of the Form
tab and check that everything came across; the “Rebuild layout from this markup”
button puts the layout back in sync with the markup at any time.

### Do I lose the form if I deactivate the plugin?

No. A form saved with the plugin is a normal Contact Form 7 form: the markup is 
stored in the standard form field, so it keeps working with the plugin switched 
off. The visual layout is kept in post meta, which Contact Form 7 ignores, so nothing
is lost if you activate the plugin again later.

### Can I still edit the form-tags by hand?

Yes. The “Form markup (advanced)” section on the Form tab is the standard Contact
Form 7 template editor. Edit it, save, and the visual layout is rebuilt from what
you wrote. The visual editor never silently overwrites markup it did not generate.

### Does it work with other Contact Form 7 add-ons?

Yes. Any form-tag type registered on your site — quiz, hidden field, response, a
payment field from an integration — appears in the element catalogue and keeps its
options. A tag the plugin does not know at all is preserved as raw markup, character
for character.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“PolarOne Visual Form Editor for Contact Form 7” is open source software. The following
people have contributed to this plugin.

Contributors

 *   [ PolarOne ](https://profiles.wordpress.org/polarone/)

“PolarOne Visual Form Editor for Contact Form 7” has been translated into 1 locale.
Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/polarone-visual-form-editor-for-contact-form-7/contributors)
for their contributions.

[Translate “PolarOne Visual Form Editor for Contact Form 7” into your language.](https://translate.wordpress.org/projects/wp-plugins/polarone-visual-form-editor-for-contact-form-7)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/polarone-visual-form-editor-for-contact-form-7/),
check out the [SVN repository](https://plugins.svn.wordpress.org/polarone-visual-form-editor-for-contact-form-7/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/polarone-visual-form-editor-for-contact-form-7/)
by [RSS](https://plugins.trac.wordpress.org/log/polarone-visual-form-editor-for-contact-form-7/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.3

 * Elements of plugins that are not active are hidden from the list, and their fields
   are not printed on the site as raw shortcodes.
 * New: the “File upload” element can accept several files and show a drag-and-drop
   area with a list of chosen files; minimum and maximum number of files. Works 
   on the plain Contact Form 7 file field, no extra plugin needed.
 * Added support for the Drag and Drop Multiple File Upload for Contact Form 7 plugin.

#### 1.0.2

 * Fixed: existing forms whose HTML wrappers are split around fields (an opening`
   <div>` before a field and its closing tag after it) kept their structure; the
   wrappers are no longer closed too early.

#### 1.0.1

 * Renamed to PolarOne Visual Form Editor for Contact Form 7; new slug and text 
   domain.
 * Translation files removed from the package (translations come from translate.
   wordpress.org).

#### 1.0.0

 * First public release.
 * Visual rows-and-elements editor for Contact Form 7 forms.
 * Ten ready-made form templates, with their styles.
 * Element style block: alignment, label position, size and width.
 * Styles tab with per-form CSS variables and a live preview.
 * HTML mail template builder.
 * Mail-tag palette for the Mail tab.
 * Thank-you screen: an overlay with text, picture and auto-close after a successful
   send.
 * Validation errors stay under their fields; the form status is a short line next
   to the button.
 * Settings snippets for the Additional Settings tab.
 * Existing forms are imported as blocks; table layouts and `half` / `one-third`
   wrappers are read back as rows and columns.

## Meta

 *  Version **1.0.3**
 *  Last updated **20 hours ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 5.8 or higher **
 *  Tested up to **7.1.4**
 *  PHP version ** 7.4 or higher **
 *  Languages
 * [English (US)](https://wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/)
   and [Russian](https://ru.wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/polarone-visual-form-editor-for-contact-form-7)
 * Tags
 * [cf7](https://wordpress.org/plugins/tags/cf7/)[contact form 7](https://wordpress.org/plugins/tags/contact-form-7/)
   [drag-and-drop](https://wordpress.org/plugins/tags/drag-and-drop/)[form builder](https://wordpress.org/plugins/tags/form-builder/)
   [form designer](https://wordpress.org/plugins/tags/form-designer/)
 *  [Advanced View](https://wordpress.org/plugins/polarone-visual-form-editor-for-contact-form-7/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/polarone-visual-form-editor-for-contact-form-7/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/polarone-visual-form-editor-for-contact-form-7/reviews/)

## Contributors

 *   [ PolarOne ](https://profiles.wordpress.org/polarone/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/polarone-visual-form-editor-for-contact-form-7/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://donatello.to/polarone)