> For the complete documentation index, see [llms.txt](https://help.distro.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.distro.so/routing-forms/lead-forms/embed.md).

# 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](https://help.distro.so/routing-forms/lead-forms).

### Add the form to your page

{% stepper %}
{% step %}

#### 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.
{% endstep %}

{% step %}

#### 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.

```html
<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.
{% endstep %}

{% step %}

#### 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.
{% endstep %}
{% endstepper %}

### 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](https://help.distro.so/routing-forms/overview).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.distro.so/routing-forms/lead-forms/embed.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.