Guides
How to Embed a Form in WordPress and Beyond
Embedding is how a finished form reaches visitors — on a WordPress page, inside a page builder or even on an external site. Auto Form Builder offers a shortcode and Gutenberg block for WordPress, plus a standalone embed code for anywhere HTML is allowed. This guide covers every placement option so your form goes live wherever your audience is.
What you'll need
Auto Form Builder installed free from WordPress.org — no account required for the core plugin.
Step 1: Install Auto Form Builder and build your form
Install the free plugin from WordPress.org and create your form in the drag-and-drop editor with the fields, notifications and styling you need. Save the form before copying any embed code — unsaved drafts cannot be embedded on the front end. Test notifications and success messages in the builder preview so you only embed once the form behaves correctly.
Step 2: Embed on a WordPress page with a shortcode
Open the Forms screen and copy the shortcode for your form. Edit any WordPress page or post, add a Shortcode block and paste the code, or use the Auto Form Builder Gutenberg block and pick the form from the dropdown for a live editor preview. The shortcode always renders the latest saved version, so updates in the builder appear automatically without changing the page.
Step 3: Use the Gutenberg block for in-editor preview
In the block editor, search for the Auto Form Builder block and insert it on your page. Select your form from the dropdown — the block shows a preview so you can confirm layout before publishing. This method is ideal when you manage content in blocks and want to avoid pasting raw shortcodes manually.
Step 4: Embed on external sites or page builders
For non-WordPress sites or builders like Elementor, WP Bakery and Brizy, copy the embed code from the Forms screen instead of the shortcode. Paste the embed snippet into an HTML widget or custom code block on the target site. The embedded form keeps your Auto Form Builder styling, auto-resizes to its content and stays isolated from the host theme CSS.
Step 5: Share a direct link as a standalone form page
Every form can also be accessed via a direct URL that renders it as its own page — useful for email campaigns or social links where you do not want to send people through your homepage first. Copy the link from the Forms screen and share it anywhere. Submissions, notifications and webhooks behave the same as embedded forms.
Step 6: Test the embed and confirm submissions
Visit the page or external site where the form is embedded and submit a test entry from a private browser window. Check that the success message or redirect works, the admin notification email arrives and the entry appears in your WordPress dashboard. If embedding externally, confirm the form loads without being blocked by the host site Content Security Policy.
Tips
- Use the Gutenberg block when editing in WordPress — it is easier to reposition than a raw shortcode and shows a preview in the editor.
- For external embeds, test on mobile because iframe height and scroll behavior can differ from your WordPress preview.
- If you use redirect thank-you pages, enable the option to break out of the iframe frame so visitors land on your full thank-you page instead of inside the embed container.
Go deeper
FAQ
Can I embed a form on a non-WordPress website?
Yes — copy the embed code from the Forms screen and paste it into any site that allows HTML embeds. The form keeps your styling and auto-resizes to its content.
Do I need to update the embed code when I edit the form?
No — both the shortcode and external embed code always load the latest saved version of the form automatically.