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
groupwrites[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
Installation
- Install and activate Contact Form 7.
- Install and activate PolarOne Visual Form Editor for Contact Form 7.
- 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 orhalf/one-thirdwrappers 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.
-
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 Visual Form Editor for Contact Form 7” has been translated into 1 locale. Thank you to the translators for their contributions.
Translate “PolarOne Visual Form Editor for Contact Form 7” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by 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-thirdwrappers are read back as rows and columns.