How to Embed a WordPress Form

How do you embed a WordPress form after you finish building it? In most cases, use the Gutenberg block. If you are working in a classic editor, widget area, template, or another place where blocks are not the best fit, use the shortcode instead. GriffinForms 3.0.5.0 also adds a reusable Publish modal from the All Forms list so you can place the form without hunting for the shortcode first.

A few practical examples: use the Gutenberg block on a landing page where an editor needs to swap forms quickly, use the shortcode inside a theme template or classic editor area, and double-check the frontend when the form includes payments, multi-page navigation, or conditional logic.

Use the block editor path when you are working in a normal WordPress page or post.

1. Open the page or post in the WordPress block editor.
2. Insert the GriffinForms Form block.
3. Select the form from the block inspector.
4. If needed, use the block toolbar shortcuts like Edit Form or Open Form Builder to jump back into form editing.

The block is usually the better fit for content editors because it keeps the form selection inside the page editor and reduces manual copy-paste steps.

In the editor, you are choosing which form to place, not running the live form itself.

Use the shortcode when you need a more manual placement path.

• Classic editor content
• Theme or template output
• Widget or custom area where blocks are not the cleanest choice
• Any workflow where you already manage placement in code or reusable snippets

If you are publishing a WordPress contact form across several pages or in a template partial, the shortcode is often the simplest repeatable option.

The Gutenberg preview is useful for layout awareness, but it does not run the real form workflow.

• Validations do not run in the editor preview.
• Conditional logic does not run in the editor preview.
• Payments and live submissions do not run in the editor preview.
• The front-end block output still renders through the same shortcode pipeline used by shortcode embeds.

If you are seeing odd preview behavior in the editor, that does not automatically mean the live form is broken. Start by checking the page preview in the browser. If the live form still fails there, review JavaScript Required and your form-specific settings.

Before you publish, run a quick frontend check.

• Preview the page or post on the frontend, not only inside the editor.
• Submit one test entry with valid values.
• Submit one invalid test to confirm validation messages still make sense.
• Check notifications, CAPTCHA, payments, or redirect behavior if the form uses them.
• Review mobile spacing and button placement on the live page.

Common placement problems

• The form does not appear: confirm the form ID is correct and clear any page caching.
• The shortcode shows as plain text: make sure it is pasted into a normal content area, not a code block.
• The editor preview looks incomplete: this is expected for validations, payments, and conditional logic. Test on the frontend.
• The live page still looks wrong: check Form Settings & Publish and any theme/layout conflicts on the page.