> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brudcast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed a form on your website

> Put a published form inside your own pages with the script embed, a plain iframe or an unstyled HTML form, and choose its layout and prefill.

An embedded form sits inside a page on your own site instead of on its hosted page. Submissions go
through the same checks, the same list and the same confirmation email as the hosted page.

**Screenshot coming soon**

The Embed code dialog with Script selected, the Layout menu set to Full and the snippet ready to copy

> [!NOTE]
>
> **Before you start:** the form must be published. An embedded form that isn't live shows the same
> closed message as its hosted page. See [Publish and share](/forms/publish-and-share.md).

## Get the embed code

**1. Open the Share tab**

Go to **Contacts > Forms**, open the form and select the **Share** tab.

**2. Open the embed code**

Under **Embed code**, select **Get embed code**.

**3. Choose a variant and a layout**

Pick **Script**, **Plain iframe** or **HTML only**. For the first two, choose a **Layout**.

**4. Copy it into your page**

Copy the snippet and paste it into your page's HTML where the form should appear. For your
website builder, see the install guides below.

## Choose a variant

| Variant | Height | Styling | Use it when |
| - | - | - | - |
| **Script** | Grows and shrinks with the form, so nothing inside scrolls | Your form's design | You can add a script tag. This is the one to use in most cases. |
| **Plain iframe** | Fixed. You set it. | Your form's design | Your site builder strips scripts |
| **HTML only** | Your page's | None. Your own CSS styles it. | You want the form to look like the rest of your site |

### Script

```html theme={"system"}
<div data-brudcast-form="your_form_id" data-title="Newsletter"></div>
<script src="https://forms.brudcast.com/embed.js" async></script>
```

The script finds every element with a `data-brudcast-form` attribute and puts the form inside it.

| Attribute | On | What it does |
| - | - | - |
| `data-brudcast-form` | The `div` | The form's ID. Required. |
| `data-title` | The `div` | A name for the frame that screen readers announce. Defaults to `Form`. |
| `data-layout` | The `div` | `full`, `condensed` or `horizontal`. Leave it out for `full`. |
| `data-prefill` | The `script` tag | Comma separated names to copy from the page address into the form. See [Prefill answers](#prefill-answers). |

One `script` tag serves every form on the page. To show two forms, add two `div` elements and keep
one `script` tag.

If your page adds the `div` after it has loaded, for example in a single page app or a modal,
call `window.BrudcastForms.mount()` once the `div` is in the page.

When the form redirects after submitting, the whole page goes to your redirect address, not just
the frame.

### Plain iframe

```html theme={"system"}
<iframe
  src="https://forms.brudcast.com/embed/your_form_id"
  title="Newsletter"
  width="100%"
  height="720"
  style="border: 0; display: block;"
  loading="lazy"
></iframe>
```

Add `?layout=condensed` or `?layout=horizontal` to the `src` for another layout. The height
doesn't change with the form, so set it to fit. On a narrow screen a visitor may scroll inside the
frame.

### HTML only

**HTML only** is a plain `<form>` with no styling. It posts to Brudcast, and the visitor lands on
your thank you page or your redirect address.

```html theme={"system"}
<form method="post" action="https://forms.brudcast.com/h/your_form_id" accept-charset="UTF-8">
  <div>
    <label for="brudcast-email">Email</label>
    <input type="email" id="brudcast-email" name="email" required>
  </div>
  <div aria-hidden="true" style="position: absolute; left: -9999px;">
    <input type="text" name="your_hidden_field" tabindex="-1" autocomplete="off">
  </div>
  <input type="hidden" name="_brudcast_started">
  <button type="submit">Subscribe</button>
</form>
<script>document.currentScript.previousElementSibling.elements._brudcast_started.value = Date.now();</script>
```

Copy your form's own snippet from the dashboard rather than this example. It names each input
after the question's key and carries your form's hidden field.

> [!WARNING]
>
> **Keep the hidden field and the one line script.** The hidden field is a trap only bots fill in,
> and the script records when the page opened so a submission sent too fast is caught. Remove
> either and real submissions may be refused.

Rules for **HTML only**:

* Change the markup and add classes as you like, but keep each input's `name`. A checkbox
  question repeats its name once per option.
* A consent checkbox counts as ticked with any value.
* A birthday is typed as `MM-DD`. `M-D`, `MM/DD` and `MM.DD` are accepted too.
* There's no bot challenge, so the form relies on the hidden field, the time check and the hourly
  cap. It shares the hourly cap with the hosted page.
* The variant isn't offered for forms with file uploads, addresses, grids or layout items such as
  section breaks and images, because a plain form can't carry them.
* Errors aren't shown next to each input. A refused submission goes back to the form's hosted
  page, where the visitor can try again.

## Choose a layout

The **Script** and **Plain iframe** variants offer three layouts.

| Layout | `data-layout` / `?layout=` | What it shows |
| - | - | - |
| **Full** | `full` | Everything on the hosted page, title and cover included |
| **Condensed** | `condensed` | Just the questions and the button, without the header, logo, cover or layout items. Always one page. |
| **Horizontal** | `horizontal` | The questions and the button on one row, stacking when the frame is narrower than 480px |

**Horizontal** is offered only for forms with three questions or fewer, which suits a footer or a
sidebar newsletter box.

## Prefill answers

A question can take its first value from the address of the page the form is on. Open the question
on the **Questions** tab and enter a name in **Fill from the link**, such as `plan`. A link ending in
`?plan=pro` then fills that answer in when the form opens.

For an embedded form the value sits in your own page's address, so the script has to pass it on.
For privacy, the script only passes on:

* every `utm_` parameter, such as `utm_source` and `utm_campaign`
* the names you list in `data-prefill` on the `script` tag

```html theme={"system"}
<div data-brudcast-form="your_form_id"></div>
<script src="https://forms.brudcast.com/embed.js" data-prefill="plan,ref" async></script>
```

Anything else in your page's address, such as a session token, never reaches Brudcast.

A value has to fit the question: a choice must be one of its options and a country a known code.
Consent checkboxes are never prefilled, because a box ticked for someone isn't consent. File
uploads, grids and addresses can't be prefilled either.

A hidden question with **Fill from the link** set is a simple way to record where a signup came
from.

## Install on your site

> **[Google Tag Manager](/forms/install/google-tag-manager.md)**

> **[WordPress](/forms/install/wordpress.md)**

> **[Shopify](/forms/install/shopify.md)**

> **[Webflow](/forms/install/webflow.md)**

> **[Wix](/forms/install/wix.md)**

> **[Squarespace](/forms/install/squarespace.md)**

## Troubleshooting

> **Nothing appears where the form should be**
>
> **Why:** the `script` tag was removed, the site builder stripped it, or the `div` was added
> after the page loaded. **Fix:** check both lines are in the page. If your builder strips
> scripts, use **Plain iframe**. If the `div` is added later, call
> `window.BrudcastForms.mount()` after adding it.

> **The form is cut off or has a scroll bar**
>
> **Why:** a **Plain iframe** has a fixed height. **Fix:** raise the `height`, or switch to
> **Script**, which sizes the frame to the form.

> **Prefilled answers are empty**
>
> **Why:** the parameter isn't a `utm_` one and isn't listed in `data-prefill`, or the value
> doesn't fit the question. **Fix:** add the name to `data-prefill` on the `script` tag, and
> check the value matches one of the question's options.

> **HTML only submissions are refused**
>
> **Why:** the hidden field or the line of script was removed, or an input was renamed.
> **Fix:** copy the snippet again from **Get embed code** and restyle it without changing the
> names.

## Related

> **[Popups](/forms/popups.md)**
>
> Show a form as a popup, slide in or banner.

> **[Publish and share](/forms/publish-and-share.md)**
>
> Share the hosted link or a QR code.

> **[Submit from your code](/developers/guides/submit-forms-from-your-code.md)**
>
> Send answers from your own server instead.

> **[Submissions and responses](/forms/submissions-and-responses.md)**
>
> The spam checks every submission passes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.