Adding a contact form with a Gutenberg block

In the block editor, add the form plugin's block where you want the form and choose which form it shows. The form itself is built and saved in the plugin's own screen, so the same form can sit on several pages and be changed in one place.

Two ways plugins do it

The form is built inside the block editor, one block per field. Flexible, but the form's settings end up in sidebar panels that are easy to miss, and the form is tied to that page.
The block places a form built elsewhere. The form lives in the plugin's screen, and the block only says which one goes here. One form, many pages, one place to edit.

Mailbag Contact Form uses the second approach. Its editor lays every field out in rows, with label, type and whether it's required visible at once — no panels to open.

Placing the form

Edit the page, click the + inserter and search for Mailbag Form.
Choose the form from the list in the block. With none chosen, it shows your oldest active form.
Update the page. The form is drawn on the server, so what visitors get is plain HTML that works even when JavaScript doesn't load.

What loads, and where

Mailbag's stylesheet and script are only added to pages where the block — or the shortcode — actually appears. A site with the form on one contact page carries nothing extra on every other page. If you've switched on a CAPTCHA, its script follows the same rule.

Themes and styling

The form uses your theme's fonts and colours for text and inputs, with a small stylesheet for layout — two fields side by side where you've set them to half width, error messages, and the thank-you message. There's no styling panel to fight with; if your theme styles forms, the form looks like the rest of your site.

Prefer shortcodes, or using a page builder? The same form can be placed with [mailbag id="…"] — see the shortcode guide.

Mailbag Contact Form is a free contact form that saves every entry before it sends anything, and shows you what happened to each email.

See what it does