How to Add a Form in the Block Editor, Elementor or a Shortcode

To add a form in the block editor, you insert the Echo Form block, pick your form from a list and see a live preview right in the editor. It is the quickest way to put a form on a page or post in modern WordPress, and the same form can sit on as many pages as you like. This guide is ideal for beginners and for teams building pages in Gutenberg or Elementor. We cover the block, the Elementor widget and the form shortcode, plus how to check a form before visitors see it, in about 5 minutes.

Which way should you use?

Where you build pages	Use	What you get
The block editor (Gutenberg)	The Echo Form block	A live preview in the editor
Elementor	The Echo Form widget	A preview, and sending without a page reload
A text widget, a theme setting, anything else	The shortcode	Works wherever shortcodes work

All three show the same form, styled the same way, and every copy sends its entries to one list. Change the form once and every page updates, so you never fix the same typo on 5 pages.

How to add a form in the block editor, step by step

1. Open the page or post in the WordPress editor.
2. Press the + button where the form should go.
3. Search for Echo Form and add the block.
4. Pick the form from the block’s list.
5. Check the live preview, then save or update the page.
6. Open the page as a visitor and send a test entry.

The put a form on your site guide shows each way with pictures. WordPress’s own guide to the block editor covers adding blocks if you are new to it.

How do you use the form shortcode?

Every form has a shortcode like

. Find it in the Shortcode column on Echo Forms > Forms and press it to copy it, or press Copy shortcode in the builder. Paste it into any page, post or text widget. It is the right choice for places the block and widget cannot reach, such as some theme footers, because shortcodes work almost everywhere in WordPress and have done for more than 15 years. Our popup form guide shows another way to place a form, from a button.

What if the form shows without its styling?

That can happen when a page builder or theme adds content in an unusual way. Under Site-wide settings, switch on Load the form styles and scripts on every page. It costs a little loading on every page, about a few kilobytes, so switch it on only when you need it. We leave it off on most sites, because the block and widget load what they need on their own.

How do you check a form before it goes live?

Use Preview in the builder, which opens the saved form inside your own theme. Test mode and Auto-fill and submit let you run through it in about 1 minute without typing everything. The Active switch on the forms list closes a form everywhere at once without deleting it, which is handy for a seasonal form. Our form templates guide covers starting from a ready-made form.

To add a form in the block editor takes about 5 minutes the first time and 30 seconds after that. Use the block in Gutenberg, the widget in Elementor and the shortcode everywhere else, and test each page once in 2 browsers and on 1 phone, which takes about 3 minutes.