Embed a form on your website

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.

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.

Get the embed code

Open the Share tab

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

Open the embed code

Under Embed code, select Get embed code.

Choose a variant and a layout

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

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

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

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

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

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

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

<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

WordPress

Shopify

Webflow

Wix

Squarespace

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.

Popups

Show a form as a popup, slide in or banner.

Publish and share

Share the hosted link or a QR code.

Submit from your code

Send answers from your own server instead.

Submissions and responses

The spam checks every submission passes.

Get started

Migrate to Brudcast

Channels

Audience

Campaigns

Deliverability

Mailboxes

Billing

Organization and account

Embed a form on your website

Get the embed code

Choose a variant

Script

Plain iframe

HTML only

Choose a layout

Prefill answers

Install on your site

Google Tag Manager

WordPress

Shopify

Webflow

Wix

Squarespace

Troubleshooting

Popups

Publish and share

Submit from your code

Submissions and responses

​Get the embed code

​Choose a variant

​Script

​Plain iframe

​HTML only

​Choose a layout

​Prefill answers

​Install on your site

Google Tag Manager

WordPress

Shopify

Webflow

Wix

Squarespace

​Troubleshooting

​Related

Popups

Publish and share

Submit from your code

Submissions and responses

Get the embed code

Choose a variant

Script

Plain iframe

HTML only

Choose a layout

Prefill answers

Install on your site

Troubleshooting

Related