Title: Visual Builder for Contact Form 7 Author: etruel Published: 7 setembro, 2015 Last modified: 12 outubro, 2026 --- Pesquisar plugins ![](https://ps.w.org/visual-builder-for-contact-form-7/assets/banner-772x250.jpg? rev=2600243) ![](https://ps.w.org/visual-builder-for-contact-form-7/assets/icon-256x256.jpg?rev =2600239) # Visual Builder for Contact Form 7 Por [etruel](https://profiles.wordpress.org/etruel/) [Baixar](https://downloads.wordpress.org/plugin/visual-builder-for-contact-form-7.3.0.zip) * [Detalhes](https://br.wordpress.org/plugins/visual-builder-for-contact-form-7/#description) * [Avaliações](https://br.wordpress.org/plugins/visual-builder-for-contact-form-7/#reviews) * [Instalação](https://br.wordpress.org/plugins/visual-builder-for-contact-form-7/#installation) * [Desenvolvimento](https://br.wordpress.org/plugins/visual-builder-for-contact-form-7/#developers) [Suporte](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/) ## Descrição **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 * **Syntax highlighting** with the code editor built into WordPress. * **Color schemes** for the code: Default, Monokai, Blackboard and Cobalt. * Your layout and color scheme are **remembered for each user**. #### Safe for your forms * **Your hand-written code is respected**: custom HTML, comments, styles and scripts stay exactly as you wrote them. Visual Builder only changes the fields you work on. * **Every change can be undone**, from the Undo button or with Ctrl+Z in the code editor. * **Nothing changes on your site** until you click Save, and your forms on the front end are served by Contact Form 7 as always. * **No lock-in**: if you ever deactivate Visual Builder, your forms keep working exactly the same. #### Made for everybody * **Beginners** create and organize forms without learning the Contact Form 7 syntax. * **Designers and agencies** build client forms in minutes and see the result right away. * **Developers** keep full control of the code, with a faster way to reorder and review long forms. Visual Builder follows the look of the WordPress admin, works with screen readers and the keyboard, adapts to small screens and comes translated into 12 languages. ## Capturas de tela [⌊Build your form visually, side by side with the code: every field is a card with a live preview.⌉⌊Build your form visually, side by side with the code: every field is a card with a live preview.⌉[ Build your form visually, side by side with the code: every field is a card with a live preview. [⌊Edit any field in one click: label, name, required, options and choices, with a live preview.⌉⌊Edit any field in one click: label, name, required, options and choices, with a live preview.⌉[ Edit any field in one click: label, name, required, options and choices, with a live preview. [⌊Visual layout: hide the code and focus on your form.⌉⌊Visual layout: hide the code and focus on your form.⌉[ Visual layout: hide the code and focus on your form. ## Instalação You can either install it automatically from the WordPress admin, or do it manually: #### Using the Plugin Manager 1. Click Plugins 2. Click Add New 3. Search for `Contact Form 7 Visual Builder` 4. Click Install 5. Click Install Now 6. Click Activate Plugin 7. Edit a contact form: the Visual Form tab shows the builder next to the code editor. #### Manually 1. Upload the `visual-builder-for-contact-form-7` folder to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress ## Perguntas frequentes ### Do I need Contact Form 7? Yes. Visual Builder is an add-on for Contact Form 7 6.0 or newer. WordPress lists Contact Form 7 as a required plugin and lets you install it in one click. ### Will my existing forms keep working? Yes. Visual Builder opens your current forms as they are, and it only changes the fields you edit. Your forms on the site are still served by Contact Form 7. ### Does it change how my forms look on my site? No. The look of your forms on the site comes from your theme and Contact Form 7. The preview in the builder shows the fields with the WordPress admin styles, so you can focus on the content and the order. ### Can I still write code? Of course. The code editor is always one click away, in the Split or Code layout, and every change you make there shows up in the visual builder. ### Does it work on tablets and phones? Yes. The builder adapts to small screens and you can drag fields with your finger. ### What happens if I deactivate it? Your forms keep working exactly the same, because Visual Builder saves them in the standard Contact Form 7 format. ### Why does a block say “This block has no visible output”? That block only contains content that visitors do not see, such as hidden fields or HTML comments. ## Avaliações ![](https://secure.gravatar.com/avatar/8b320cb3a6fbdd7d218f85a58c939345971814d69762f6e3d63d16657e2a369d? s=60&d=retro&r=g) ### 󠀁[Justo not work](https://wordpress.org/support/topic/justo-not-work/)󠁿 [dentk2010](https://profiles.wordpress.org/dentk2010/) 11 agosto, 2021 1 resposta Justo not work ![](https://secure.gravatar.com/avatar/97494013f81f4589af0761fb2fb12762b2f06fe4f178f294f038e1ea373c8d00? s=60&d=retro&r=g) ### 󠀁[Good plugin](https://wordpress.org/support/topic/good-plugin-5258/)󠁿 [Alessandro](https://profiles.wordpress.org/marajah/) 28 maio, 2021 1 resposta Thanks for sharing it and doing it for free. Despite from who said it's not working, it works well. Maybe they're trolls or maybe they need to hire someone to build their website. ![](https://secure.gravatar.com/avatar/eb3d4ebde3728a2b46f1061572466fa10dc909fa076e1b3dc4bb12fbe96cbeb7? s=60&d=retro&r=g) ### 󠀁[Useful tool](https://wordpress.org/support/topic/useful-tool-33/)󠁿 [arrubakook](https://profiles.wordpress.org/arrubakook/) 12 janeiro, 2018 This is a great tool, it saves me switching between Sublime and Wordpress when I want to make small changes to a form. I still build the majority of a form inside a code editor but this saves a lot of time further down the line! Excellent. ![](https://secure.gravatar.com/avatar/4245dd3699dc45f50bcb987b0298739bea61a717a09b639f5060085490267562? s=60&d=retro&r=g) ### 󠀁[Can’t save contact form](https://wordpress.org/support/topic/cant-save-contact-form/)󠁿 [jonson71](https://profiles.wordpress.org/jonson71/) 24 novembro, 2017 3 respostas Hey, plugin author, I just want to say do you use your own plugin, just to make sure if it works. ![](https://secure.gravatar.com/avatar/8f22865e17dc870e6f65d9d1aec5100d0e54e34bffe0c77463ba1b2410cc4ef3? s=60&d=retro&r=g) ### 󠀁[Great addition for Contact Form 7](https://wordpress.org/support/topic/great-addition-for-contact-form-7/)󠁿 [vipteam](https://profiles.wordpress.org/vipteam/) 3 setembro, 2016 This is a time saver. Visual view greatly facilitates work with input fields. Regards ![](https://secure.gravatar.com/avatar/49cca01b200e414df2fbec3d5a3b1ae5365ba018114fa584d05940bd5080e0ee? s=60&d=retro&r=g) ### 󠀁[I want to make this easy!!](https://wordpress.org/support/topic/i-want-to-make-this-easy/)󠁿 [etruel](https://profiles.wordpress.org/etruel/) 3 setembro, 2016 I needed to make the form edit a little more easy than HTML edit, then I made this for myself and I share with everybody with the vision to make it better in the time. Please test and gives a good review to continue development !! 🙂 [ Leia todas as 6 avaliações ](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/) ## Colaboradores e desenvolvedores “Visual Builder for Contact Form 7” é um programa de código aberto. As seguintes pessoas contribuíram para este plugin. Colaboradores * [ etruel ](https://profiles.wordpress.org/etruel/) Visual Builder for Contact Form 7” foi traduzido para 4 localidades. Agradecemos aos [tradutores](https://translate.wordpress.org/projects/wp-plugins/visual-builder-for-contact-form-7/contributors) por suas contribuições. [Traduzir o “Visual Builder for Contact Form 7” para seu idioma.](https://translate.wordpress.org/projects/wp-plugins/visual-builder-for-contact-form-7) ### Interessado no desenvolvimento? [Navegue pelo código](https://plugins.trac.wordpress.org/browser/visual-builder-for-contact-form-7/), consulte o [repositório SVN](https://plugins.svn.wordpress.org/visual-builder-for-contact-form-7/) ou assine o [registro de desenvolvimento](https://plugins.trac.wordpress.org/log/visual-builder-for-contact-form-7/) por [RSS](https://plugins.trac.wordpress.org/log/visual-builder-for-contact-form-7/?limit=100&mode=stop_on_copy&format=rss). ## Registro de alterações #### 3.0 Oct 12, 2026 The biggest update ever: a brand-new visual builder, built for Contact Form 7 6. x. * New: modern interface with Split, Code and Visual layouts. * New: every field is a card with a live preview rendered by Contact Form 7. * New: drag & drop on desktop, tablets and phones. * New: one-click field editor with live preview: label, name, required, options and choices. * New: type a label and Visual Builder writes the label markup for you. * New: duplicate fields, move them up and down, and delete them with Undo. * New: add new fields right after the selected one. * New: click a field to find it in the code, and see which field the code cursor is in. * New: keyboard shortcuts to move between fields, reorder, delete and edit. * New: each field on its own line gets its own card, for a clearer view of long forms. * Improved: code editor based on the one built into WordPress, for a lighter plugin, with the Monokai, Blackboard and Cobalt color schemes. * Improved: your layout and color scheme are remembered for each user. * Improved: your custom HTML, comments, styles and scripts are always kept as you wrote them. * Improved: stronger security, with permission checks and sanitized data in every request. * Improved: accessibility for keyboard and screen reader users. * New: translated into 12 languages: Japanese, Spanish, German, French, Portuguese( Brazil), Italian, Dutch, Polish, Russian, Turkish, Vietnamese and Persian. * Improved: new screenshots. * Compatible with WordPress 7.1 and Contact Form 7 6.2.2. Requires WordPress 6.4, PHP 7.4 and Contact Form 7 6.0 or newer. #### 2.5 Sep 16, 2021 * Tested with WP 5.8.1 and CF7 5.4.2 * New icons and logo 😀 * Tweaks some styes. * Added .pot catalog and Spanish language files. * Fixes issue does not show form or visual builder on New Form. * Updated Author name and URIs. #### 2.4 May 2, 2021 * Compatibility with Contact Form 7 v5.4.1 and WordPress v5.7.1 * Adds requirements on activating to avoid errors if CF7 is not present. * Tweak uses the WordPress wheel gif for reload when refreshing the form. * Fixes the functionality of the form viewer hiding the reload form. * Fixes bug when refreshing the form and deleting an item. * Fixes failure to execute script elements in visual form. * Fixes javascript errors on contact forms list. * Fixes javascript errors for cm.theme.options on editing form screen. #### 2.3 * Compatibility with Contact Form 7 v4.8 and WordPress v4.8. * Few tweaks on design and cosmetic. #### 2.2 * Fixes a Fatal error: Can’t use function return value in write context in some versions of PHP. #### 2.1 * Improvement the text editor to works with javascript. You can now change order like any field. * Improvement the text editor retain the css in the top of the form. * Tweak, Option to refresh the visual form. * Tweak, by adding nonces to the AJAX requests. #### 2.0 Closest… * Tested with WP 4.7 and CF7 4.6 * Tweak, the color scheme is now htmlmixed for html, js and css coding. * Tweak, eye icon is now a wordpress dashicon saving loading time of data images in css. * Improvement, Visual form view (eye icon) state is now saved on click via ajax. * Improvement, TextArea code Highlighter have now selectable themes to choose different colors schemes. * Improvement The color schema is saved via ajax on select. * Fixes the shortcodes without html tags as in default forms adding p tags. * New collaborator & new Banners 😀 #### 1.1 Second approach: Added HTML code highlighter in the textarea. Added support for“ p” and “label” html tags. (Until now was just p) #### 1.0 First approach to Visual Builder for forms from Contact Form 7. ## Meta * Versão **3.0** * Última atualização **3 dias atrás** * Instalações ativas **400+** * Versão do WordPress ** 6.4 ou superior ** * Testado até **7.1.3** * Versão do PHP ** 7.4 ou superior ** * Idiomas * [Dutch](https://nl.wordpress.org/plugins/visual-builder-for-contact-form-7/), [English (US)](https://wordpress.org/plugins/visual-builder-for-contact-form-7/), [Spanish (Chile)](https://cl.wordpress.org/plugins/visual-builder-for-contact-form-7/), [Spanish (Mexico)](https://es-mx.wordpress.org/plugins/visual-builder-for-contact-form-7/) e [Spanish (Spain)](https://es.wordpress.org/plugins/visual-builder-for-contact-form-7/). * [Traduzir para seu idioma](https://translate.wordpress.org/projects/wp-plugins/visual-builder-for-contact-form-7) * Tags * [cf7](https://br.wordpress.org/plugins/tags/cf7/)[contact form 7](https://br.wordpress.org/plugins/tags/contact-form-7/) [drag-and-drop](https://br.wordpress.org/plugins/tags/drag-and-drop/)[form builder](https://br.wordpress.org/plugins/tags/form-builder/) [visual editor](https://br.wordpress.org/plugins/tags/visual-editor/) * [Visualização avançada](https://br.wordpress.org/plugins/visual-builder-for-contact-form-7/advanced/) ## Classificações 3.7 de 5 estrelas. * [ 4 avaliações com 5 estrelas ](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/?filter=5) * [ 0 avaliação com 4 estrela ](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/?filter=4) * [ 0 avaliação com 3 estrela ](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/?filter=3) * [ 0 avaliação com 2 estrela ](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/?filter=2) * [ 2 avaliações com 1 estrelas ](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/?filter=1) [Sua avaliação](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/#new-post) [Ver todas avaliações](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/reviews/) ## Colaboradores * [ etruel ](https://profiles.wordpress.org/etruel/) ## Suporte Tem algo a dizer? Precisa de ajuda? [Ver fórum de suporte](https://wordpress.org/support/plugin/visual-builder-for-contact-form-7/) ## Doar Gostaria de contribuir para o desenvolvimento deste plugin? [ Doe para este plugin ](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GT3UVS8UCAHV8)