Tutorial
How to Embed Your Form on Any Website
Step-by-step guide to embedding a DynamicFormBuilder form on any website — WordPress, Webflow, custom HTML, or any platform that accepts embed code.
6 min readTutorial
#Embedding#Tutorial#WordPress#Webflow#HTML#Integration
Publishing a form on DynamicFormBuilder's hosted URL is the fastest way to share it, but embedding it directly in your own website creates a seamless experience for your visitors.
Step 1: Publish Your Form
Click Publish in the form builder. The form becomes live at a unique URL (e.g. forms.dynamicformbuilder.io/f/abc123). Embedding is an additional channel, not a replacement.
Step 2: Get the Embed Code
Open the Share menu → Embed. Choose iframe Embed (most compatible) or JavaScript Embed (better for custom styling and events).
The iframe Embed Code
Paste the generated iframe into your page. Adjust
height to match your form and set a descriptive title for accessibility.Embedding on WordPress
Add a Custom HTML block in Gutenberg and paste the iframe code. In the Classic Editor, use the Text tab — not Visual — to avoid corrupting the embed.
WordPress Classic Editor
Switch to the Text tab before pasting HTML. Switching back to Visual after pasting can corrupt the embed code.
Embedding on Webflow
Drag an Embed element onto the canvas, click </> Edit Code, paste the iframe, and resize the container.
Embedding on Custom HTML Pages
Paste the iframe anywhere inside
<body>. Use max-width on the container for readable line length.Styling Tips
- Match your site's primary color as the form accent color.
- Align border radius with your site design.
- Enable transparent form background when your container supplies the background.
- Use the font selector to match your site typeface from Google Fonts.
Dynamic Height (No Scroll Bar)
Use the JavaScript embed to auto-resize, or set a generous iframe height. Avoid internal scrollbars when possible.
Troubleshooting
- Form not loading: Ensure the form is published and the iframe src is the live URL.
- Form cut off: Increase iframe height; multi-step forms need the tallest step plus buffer.
- Powered by badge: Upgrade to Pro for white-label embeds.