View a live preview of your form as you’re building it.
Contact Form 7 Preview
Contact Form 7 is great, but building your forms using form tags can be painful and slow when you have to constantly save, switch tabs and refresh to see your changes.
Contact Form 7 Live Preview relieves this pain by displaying a live preview of your form directly underneath the form editor.
How does it work
Contact Form 7 Live Preview creates a “dummy” form and displays it in the live preview pane. Whenever you make changes to a form you’re working on, it saves your current state to the dummy form and refreshes the preview. This means you don’t have to save your form to see your changes, which can be especially important if your form is currently live.
The dummy form is set to
demo_mode: on, which means you can test the validation and success messages and no emails will be sent.
Note: It may not work with some themes or plugins
The preview window displays just the form. It loads your site’s scripts and styles as long as they’re enqueued properly via hooks. If something isn’t looking right in the preview, make sure your scripts and styles are enqueued correctly, and aren’t loaded conditionally (E.g.
If it doesn’t work for you, please don’t go straight for leaving a bad review. Let me know in the forums and we’ll figure out if the problem is with the plugin, or with your theme. If it’s a problem with the plugin I’ll try and fix it.
- Live preview changes to your form
- Test validation and error messages without sending emails
- Set the background colour of the preview (helpful if your form is going to be on a different coloured background once live)
- Works with most CF7 addons that affect the look and behaviour of your form
- Material Design for Contact Form 7
- Conditional Fields for Contact Form 7
- Upload the zip to the
/wp-content/plugins/directory and unzip
- Activate the plugin through the ‘Plugins’ menu in WordPress
OR go to ‘Plugins’ > ‘Add new’, and search for ‘contact form 7 live preview’ to install through the WordPress dashboard.
Contributors & Developers
“Live Preview for Contact Form 7” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
- Fixed a security issue allowing logged in users without the correct privileges to update the hidden contact form.
- Fixed autoreloading
- Added a width slider
- Updates to comply with the “Contact Form 7” trademark policy
- Plugin has been stable long enough to be given 1.0.0 tag
- Fix a bug that displayed admin bar on front end
- Fix a deactivation bug
- Fix a plugin activation bug
- Add support and rating links to sidebar
- First release – beta