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

# Install Brudcast forms on WordPress

> Use the Brudcast Forms plugin for a block, a shortcode and the popup site script, or add the snippets to your theme by hand.

On WordPress you can install Brudcast forms with the Brudcast Forms plugin, or paste the snippets
yourself. The plugin is the simpler route: it adds a **Brudcast form** block, a shortcode, and the
popup site script on every page.

**Screenshot coming soon**

The Brudcast form block in the WordPress editor with a form ID and the Full layout selected

> [!NOTE]
>
> **Before you start:** publish the form you want to embed and copy its ID from the embed code on
> its **Share** tab. For popups, add the website under **Contacts > Forms > Websites** and copy its
> site key. See [Add a website](/forms/popups.md#add-a-website).

**With the plugin**

**1. Install the plugin**

Install and activate **Brudcast Forms** from **Plugins > Add New**, or upload its zip
there.

**2. Add your site key**

Go to **Settings > Brudcast Forms**. Paste your website's **Site key** and select
**Save Changes**. The plugin adds the site script to every page of your site, so your live
popups start to show.

**3. Add a form to a page**

In the block editor, add the **Brudcast form** block, enter the **Form ID**, and choose a
**Layout**. In the classic editor or a widget, use the shortcode:

```text theme={"system"}
[brudcast_form id="your_form_id" layout="full"]
```

`layout` is `full`, `condensed` or `horizontal`, and can be left out for `full`.

The block shows a placeholder in the editor. The form itself appears on the published page.

**By hand**

**Popups:** add the site script to every page. With a child theme, add it to the theme's
`functions.php`:

```php theme={"system"}
add_action( 'wp_head', function () {
    echo '<script src="https://forms.brudcast.com/site.js" data-site="your_site_key" async></script>';
} );
```

Or use a header and footer code plugin and paste the install snippet into its header box.
Don't edit a parent theme's files: a theme update replaces them.

**Embedded form:** in the block editor, add a **Custom HTML** block where the form goes and
paste the embed code:

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

Adding **Custom HTML** needs a role that's allowed unfiltered HTML, such as Administrator on a
single site.

## Troubleshooting

> **The block shows nothing on the published page**
>
> **Why:** the form ID is wrong, or the form isn't published. **Fix:** copy the ID again from
> the form's embed code, and check the form is **Live**.

> **Popups don't show after installing the plugin**
>
> **Why:** the site key is missing, or your site's address isn't in the website's list.
> **Fix:** check **Settings > Brudcast Forms**, then add the address you see in the browser,
> including `www.`, under **Contacts > Forms > Websites**.

> **A caching or optimization plugin breaks the form**
>
> **Why:** some plugins delay or combine scripts, which stops `embed.js` and `site.js` from
> finding their own address. **Fix:** exclude `forms.brudcast.com` scripts from deferral and
> combining in that plugin's settings.

## Related

> **[Popups](/forms/popups.md)**
>
> Create the popups the site script shows.

> **[Embed a form](/forms/embed-a-form.md)**
>
> Embed variants, layouts and prefill.


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