Embed a lead form

Add a published Distro lead form to a website page with the generated embed code.

You can embed a Distro lead form directly on your website. Visitors answer questions and continue to scheduling inside the embedded experience. The hosted page and embed use the same published questions and routing.

Start by creating and publishing a lead form.

Add the form to your page

1

Copy the generated embed

Open Form routing → Lead forms, edit the published form, and scroll to Share the published form.

Copy the complete code from Website embed. This section appears after the form has been published.

2

Paste it into your website

Place the code in your page's HTML or a custom HTML/embed block that allows both an iframe and JavaScript.

The generated code has this structure. Use your form's actual code from Distro; YOUR-PUBLISHED-SLUG below is a placeholder.

<iframe
  src="https://app.distro.so/forms/YOUR-PUBLISHED-SLUG"
  title="Request a demo"
  data-distro-lead-form
  style="width:100%;height:760px;border:0"
></iframe>
<script src="https://app.distro.so/lead_forms_embed.js" defer></script>

The iframe fills the width of its container. The script adjusts its height as questions, validation messages, and scheduling change. Keep the data-distro-lead-form attribute and script for automatic resizing.

If your website builder requires scripts in a separate custom-code area, place the iframe in the page and load the script on that same page. The script only needs to be included once per page, even if you embed several lead forms.

3

Publish and test your website

Publish the website page and check it at desktop and mobile widths. Some website editors restrict scripts in their editing preview, so verify the actual published page.

Submit controlled test details, check the qualified and unqualified outcomes, and confirm that the scheduler fits inside the page. A live submission runs your configured actions, and a completed booking can send invitations.

Keep the embed up to date

When you edit a form, Save draft and then Publish saved draft. An embed using the same page URL shows the new published version on its next load; you do not need to replace its code for ordinary question or design changes.

If you change the Page URL and publish it, copy the new embed code into every page using the form. Old form addresses do not redirect.

A lead form keeps the router version selected when the form was published. Publish the router and then republish the lead form when you want to use a newer router configuration.

Embed troubleshooting

Problem	Check
The form does not load	Open the Hosted page link directly. Confirm the form is published and the iframe uses its current URL.
The iframe stays at a fixed height	Confirm the website kept the script and data-distro-lead-form attribute. Check that lead_forms_embed.js loads without being blocked.
The form is clipped or has extra scrollbars	Remove fixed-height or overflow restrictions on the surrounding website container. Keep the generated automatic resizing script.
The website blocks the embed	If your site uses a Content Security Policy, allow the Distro origin in its frame and script policies. For the example above, that origin is https://app.distro.so.
A redirect destination does not display	An embedded form can navigate to the router's configured redirect inside the iframe. The destination must allow framing; some external sites block it. Test your chosen destination.
The form looks different from your website	The iframe uses the lead form's Design and Brand theme settings. Style it in Distro rather than relying on the host page's CSS.

The Website embed code embeds the complete Distro lead form. To keep an existing HubSpot, Marketo, or custom website form and show Distro after it submits, use the separate Form mapping and provider installation guides.