Title: Formivo – Visual Form Builder for Contact Form 7 Author: azmarket Published: November 7, 2026 Last modified: November 7, 2026 --- Search plugins ![](https://ps.w.org/formivo-visual-form-builder-for-contact-form-7/assets/banner- 772x250.png?rev=3789372) ![](https://ps.w.org/formivo-visual-form-builder-for-contact-form-7/assets/icon- 256x256.png?rev=3789372) # Formivo – Visual Form Builder for Contact Form 7 By [azmarket](https://profiles.wordpress.org/azmarket/) [Download](https://downloads.wordpress.org/plugin/formivo-visual-form-builder-for-contact-form-7.1.0.0.zip) * [Details](https://wordpress.org/plugins/formivo-visual-form-builder-for-contact-form-7/#description) * [Reviews](https://wordpress.org/plugins/formivo-visual-form-builder-for-contact-form-7/#reviews) * [Installation](https://wordpress.org/plugins/formivo-visual-form-builder-for-contact-form-7/#installation) * [Development](https://wordpress.org/plugins/formivo-visual-form-builder-for-contact-form-7/#developers) [Support](https://wordpress.org/support/plugin/formivo-visual-form-builder-for-contact-form-7/) ## Description **Formivo** turns the plain HTML textarea of Contact Form 7 into a modern, visual drag & drop form builder. Drag fields onto the canvas, arrange them in rows and columns, change labels and colors, and check how the form looks on desktop, tablet and mobile. You don’t need to write a single form-tag. Everything you build is saved as **standard Contact Form 7 markup**. Mail, validation, messages, spam protection and add-ons keep working exactly as before. If you ever deactivate Formivo, your forms keep working too. #### Why Formivo? * **No more form-tag syntax.** Build `[text* your-name]` and `[email* your-email]` with clicks instead of typing. * **Real multi-column forms.** Put name and email side by side, add a sidebar, or center a narrow form. * **What you see is what you get.** The canvas loads your active theme, so the form in the editor looks like the form on your site. * **100% Contact Form 7.** No new form system to learn and no lock-in. Formivo only writes the form template. #### Visual builder * Fullscreen editor that opens right away when you add or edit a contact form. * Drag & drop fields from the side panel into any column. Reorder fields and rows, duplicate and delete with one click. * 10 ready-made structures: 1, 2, 3, 4 and 6 columns, left and right sidebar, wide + narrow, narrow + wide and centered. * Click-to-add: click a field and it is added after the selected element. * Rename the form directly from the builder. * Undo / redo (Ctrl+Z / Ctrl+Shift+Z), keyboard shortcuts for save, duplicate and delete. * Ready-made templates: Contact, Quote request and Newsletter. #### Fields and elements * **Form fields:** Text, Email, Textarea, Select (dropdown), Checkbox, Radio, Number, Date, Phone, URL, File upload, Acceptance (consent) and Submit button. * **Content elements:** Heading, Paragraph, Image (from the Media Library), Divider and custom HTML. * **Field settings:** label, field name (mail-tag), required, placeholder, default value, options, help text, min / max / step, length limits, autocomplete, file types and size, CSS ID and classes, and extra CF7 options. #### Styling * **Built-in field styling:** clean inputs, custom checkboxes and radio buttons, styled select and button. Turn it off to use your theme’s own form styles. * **Style tab** for every element: colors, font size and weight, spacing, borders, border radius and padding for labels, inputs, options, help text and buttons, with normal, hover and focus states. * **Form settings:** set default styles for every field of the form at once. Element styles override them. * **Responsive:** each style value and each column width can be set separately for desktop, tablet and mobile. #### Preview and output * Live canvas in your active theme, with desktop, tablet and mobile views. * **Preview mode** hides the editor outlines so you can type into the form and try it out. * **Shortcode tab** shows the form’s shortcode and the generated Contact Form 7 template, each with a copy button. * Front-end output is plain HTML plus CF7 form-tags and a lightweight grid stylesheet. Custom styles are added as a small inline stylesheet only on pages that show a Formivo form. #### Works with your existing forms Open any existing Contact Form 7 form and Formivo imports it into the builder. You can switch back to the classic HTML editor at any time from the builder’s menu. Formivo never touches your mail settings, messages or additional settings. #### Source code The editor is built with Vue 3. The full, unminified source code is included in the plugin in the `admin/src` folder, together with `package.json` and `vite.config. js`. To rebuild the compiled files in `assets/build`, run: ``` npm install && npm run build ``` Bundled third-party libraries, all MIT licensed: * Vue – https://github.com/vuejs/core * vuedraggable – https://github.com/SortableJS/vue.draggable.next * SortableJS – https://github.com/SortableJS/Sortable ## Screenshots [⌊The visual builder: elements on the left, the form canvas in your theme, and settings on the right.⌉⌊The visual builder: elements on the left, the form canvas in your theme, and settings on the right.⌉[ The visual builder: elements on the left, the form canvas in your theme, and settings on the right. [⌊Ready-made templates in the Advanced tab.⌉⌊Ready-made templates in the Advanced tab.⌉[ Ready-made templates in the Advanced tab. [⌊Style tab: colors, typography and spacing for a single field, with separate values per device.⌉⌊Style tab: colors, typography and spacing for a single field, with separate values per device.⌉[ Style tab: colors, typography and spacing for a single field, with separate values per device. [⌊Responsive preview on tablet.⌉⌊Responsive preview on tablet.⌉[ Responsive preview on tablet. ## Installation 1. Install and activate **Contact Form 7** (required). 2. In your WordPress admin, go to **Plugins Add New**, search for **Formivo** and click **Install Now**, then **Activate**. Or upload the `formivo-visual-form-builder- for-contact-form-7` folder to `/wp-content/plugins/` and activate it on the Plugins screen. 3. Go to **Contact Contact Forms** and add a new form or edit an existing one. The builder opens automatically. 4. Build your form, then click **Save Changes**. 5. Open the **Shortcode** tab, copy the shortcode and paste it into any page or post. ## FAQ ### Do I need Contact Form 7? Yes. Formivo is a visual editor for Contact Form 7, so Contact Form 7 must be installed and active. If it is missing, WordPress shows a link to install it on the Plugins screen. ### Does Formivo change how Contact Form 7 sends mail? No. Formivo only writes the form template on the “Form” tab. Mail, messages, additional settings and integrations such as reCAPTCHA, Cloudflare Turnstile, Akismet, Constant Contact or Brevo are handled by Contact Form 7 as usual. ### Will my existing forms still work? Yes. When you open an existing form, Formivo imports its template into the builder. Nothing changes until you click Save Changes. Forms you never open in the builder are not touched. ### What happens if I deactivate or delete Formivo? Your forms keep working, because the saved template is standard Contact Form 7 markup. Only the column grid and your custom styles stop loading, so multi-column layouts show as one column. When you delete the plugin, it removes only its own builder data; your Contact Form 7 forms stay. ### Can I still edit the HTML by hand? Yes. Open the menu (⋮) in the builder and choose “Switch to HTML editor”. When you open the builder again later, it offers to import your manual changes. ### Can I use other Contact Form 7 form-tags or add-ons? Yes. Add any form-tag with the HTML element, or use “Extra CF7 options” in a field’s Advanced tab. Tags from add-ons and other plugins work inside the HTML element. ### The form in the editor looks different from my site. Why? The canvas loads your active theme. If your site uses a page builder or custom CSS that only loads on certain pages, a few styles can differ. If your theme already styles forms, turn off “Built-in field styling” in the Settings tab to use your theme’s styles. ### Can I make a field full width on mobile? Yes, and that is the default: columns stack on mobile. Select a column and switch the device to tablet or mobile to set a different width for that screen size. ### Where is my form’s shortcode? Save the form, then open the **Shortcode** tab in the builder’s top bar. It is also shown on Contact Form 7’s own form list and edit screen, as always. ### Does Formivo slow down my site? No. On the front end Formivo loads only one small stylesheet, plus a few lines of inline CSS when you use custom styles. There is no front-end JavaScript from Formivo. The builder itself loads only on the Contact Form 7 edit screen. ### Is Formivo translation ready? Yes. The text domain is `formivo-visual-form-builder-for-contact-form-7`. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Formivo – Visual Form Builder for Contact Form 7” is open source software. The following people have contributed to this plugin. Contributors * [ azmarket ](https://profiles.wordpress.org/azmarket/) [Translate “Formivo – Visual Form Builder for Contact Form 7” into your language.](https://translate.wordpress.org/projects/wp-plugins/formivo-visual-form-builder-for-contact-form-7) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/formivo-visual-form-builder-for-contact-form-7/), check out the [SVN repository](https://plugins.svn.wordpress.org/formivo-visual-form-builder-for-contact-form-7/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/formivo-visual-form-builder-for-contact-form-7/) by [RSS](https://plugins.trac.wordpress.org/log/formivo-visual-form-builder-for-contact-form-7/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * Initial release. ## Meta * Version **1.0.0** * Last updated **1 day ago** * Active installations **Fewer than 10** * WordPress version ** 6.2 or higher ** * Tested up to **7.1.4** * PHP version ** 8.1 or higher ** * Tags * [cf7](https://wordpress.org/plugins/tags/cf7/)[contact form](https://wordpress.org/plugins/tags/contact-form/) [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/) * [Advanced View](https://wordpress.org/plugins/formivo-visual-form-builder-for-contact-form-7/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/formivo-visual-form-builder-for-contact-form-7/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/formivo-visual-form-builder-for-contact-form-7/reviews/) ## Contributors * [ azmarket ](https://profiles.wordpress.org/azmarket/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/formivo-visual-form-builder-for-contact-form-7/)