How to Add a Contact Form to Gutenberg (WordPress Block Editor)

The WordPress block editor (Gutenberg) builds pages out of blocks, and getting a contact form into one is simpler than it might look — you don’t need a dedicated “form block” to do it. Here are the three ways to do it with Contactum, from easiest to most flexible.

Option 1: The Embed Button (Easiest)

If you’re building the form and the page at the same time, this is the fastest route. Open your form in Contactum → Forms, click Embed in the toolbar, then choose Add to Existing Page (pick a page from the dropdown) or Create New Page (type a title). Either way, Contactum inserts the form’s shortcode into that page’s content automatically and drops you straight into the block editor to review and hit Publish.

Option 2: The Shortcode Block

If you already have a page open in the block editor and just want to drop a form into a specific spot, add a Shortcode block (search for “Shortcode” in the block inserter) and paste in the form’s shortcode:

[contactum id="123"]

Replace 123 with your form’s actual ID, which you’ll find in the form’s Embed dialog or in the Forms list in wp-admin. This is the most flexible option — the Shortcode block can go anywhere in your layout: inside a Columns block, below a hero section, wherever you need it.

Want the form to open as a popup instead of sitting inline on the page? Add modal="true":

[contactum id="123" modal="true"]

Option 3: The Legacy Widget Block

Contactum also ships a proper classic widget, and Gutenberg has a built-in Legacy Widget block that can render any classic widget inside the block editor. Search the block inserter for “Legacy Widget,” add it, and select Contactum Forms Widget from the dropdown that appears — then choose which form to display. This is a good option if you’re more comfortable configuring a widget-style dropdown than typing a shortcode, and it works identically in true widget areas (like your sidebar or footer, under Appearance → Widgets) if you want the same form to appear there too.

Which Should You Use?

Use the Embed button when you’re creating the page from scratch — it’s the least manual work. Use the Shortcode block when you need precise placement inside an existing block layout, since it behaves like any other block and can sit inside columns, groups, or anywhere else. Use the Legacy Widget block if you’d rather pick the form from a dropdown than remember an ID number, or if you’re placing the same form in both page content and a sidebar.

All three place the exact same live form — the only difference is how you insert it into your layout.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *