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.
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. Here's how to do it on any platform.
Step 1: Publish Your Form
Before you can embed a form, it must be published. From your form builder, click Publish in the top-right corner. If the form was previously unpublished, it will become live at a unique URL (e.g., forms.dynamicformbuilder.io/f/abc123).
You can publish a form without embedding it — the hosted URL works independently. Embedding is an additional distribution channel, not a replacement.
Step 2: Get the Embed Code
With your form published, open the Share menu (the share icon in the top toolbar). You'll see three tabs: Link, Embed, and QR Code. Click Embed.
The embed panel offers two options:
- codeiframe Embed — A standard HTML iframe that works on any website. The most compatible option.
- integration_instructionsJavaScript Embed — A script tag that renders the form inline in your page's DOM. Better for custom styling and event handling.
For most use cases, the iframe embed is the right choice. Choose JavaScript embed only if you need to intercept form events programmatically from your page's code.
The iframe Embed Code
The generated iframe code looks like this:
<iframe src="https://forms.dynamicformbuilder.io/f/abc123" width="100%" height="600" frameborder="0" style="border: none; border-radius: 12px;" title="Contact Form" loading="lazy" ></iframe>
You can adjust the height to match your form's length, or use a fixed height with the form's internal scrollbar. The title attribute is important for accessibility — update it to describe what the form does.
Embedding on WordPress
WordPress's block editor (Gutenberg) supports custom HTML blocks. Here's how to embed:
- Open the page or post where you want the form.
- Click the + button to add a new block.
- Search for and select the Custom HTML block.
- Paste the iframe embed code into the block.
- Click Preview to confirm the form renders correctly, then Update or Publish.
If you're using the Classic Editor, switch to the Text tab (not Visual) and paste the iframe code directly. Switching back to Visual after pasting HTML can corrupt the embed code.
Embedding on Webflow
Webflow's Embed element accepts raw HTML, making it ideal for iframes.
- In the Webflow Designer, open the Add Elements panel.
- Search for Embed and drag it onto your canvas.
- Click the </> Edit Code button that appears when you select the embed element.
- Paste the iframe code and click Save & Close.
- The form will render in the Webflow canvas. Resize the embed container to control the form's width on your page.
Embedding on Custom HTML Pages
For raw HTML, paste the iframe code anywhere in your <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
</head>
<body>
<h1>Get in Touch</h1>
<p>Fill out the form below and we'll be in touch within 24 hours.</p>
<iframe
src="https://forms.dynamicformbuilder.io/f/abc123"
width="100%"
height="620"
frameborder="0"
style="border: none; border-radius: 12px; max-width: 680px;"
title="Contact Form"
loading="lazy"
></iframe>
</body>
</html>Styling Tips
The form renders inside an iframe sandbox, so your page's CSS doesn't affect it. Style your form itself in DynamicFormBuilder using the Theme panel. You can customize colors, fonts, border radius, input styles, and button appearance to match your website's design system.
- paletteUse your site's primary color as the form's accent color for visual consistency.
- paletteMatch border radius — a site with sharp corners (0px) looks odd with a form that has heavily rounded fields.
- paletteFor transparent backgrounds, enable "Transparent Form Background" in Theme Settings and give your container element the background color.
- paletteUse the font selector to match your site's typeface if it's available in DynamicFormBuilder's font library (includes all Google Fonts).
Dynamic Height (No Scroll Bar)
A fixed-height iframe creates an internal scrollbar if the form is taller than the iframe. To avoid this, use the JavaScript embed instead, which communicates the form's height to the parent page and auto-resizes. Alternatively, set the iframe height generously and hide any visible scrollbar with:
<iframe ... style="border: none; overflow: hidden;" scrolling="no"></iframe>
Note that scrolling="no" is deprecated in HTML5 but still widely supported. The recommended modern approach is the JavaScript embed for pages where you control the code.
Troubleshooting
Form not loading inside iframe
Check that the form is published (not in draft). The iframe src must point to the live form URL, not the builder URL.
Form appears too small or cut off
Increase the iframe height attribute. For multi-step forms, set height to the tallest step plus some buffer.
Form shows "Powered by DynamicFormBuilder" badge
This badge appears on Free plan submissions. Upgrade to Pro to remove it and enable full white-label embeds.