# Forms on a page

Place any SendBeam form with the block or a shortcode, and give it your site's colours so it stops looking like something pasted in.

## The block

Search for **SendBeam** in the block inserter and add *SendBeam Form*. Pick the form
from the dropdown — it lists the forms in the connected workspace, so nobody has to know an ID. If the
site's key cannot read forms, the block falls back to a plain ID field and still works.

Editors need no key of their own: the block asks WordPress for the list, and WordPress asks us. The key
stays on the server.

## Shortcodes

- `[sendbeam_form]` — the default signup form.
- `[sendbeam_form id="8f3c1a2e-…"]` — any specific form, as often as you like.
- `[sendbeam_contact]` — the contact form chosen in settings.
- `[sendbeam_popup_button label="Subscribe"]` — a button that opens a pop-up on a page where
  it does not appear on its own.

`height` works on all of them, though you rarely need it — see below. Shortcodes work anywhere
shortcodes do: a Shortcode block, a widget, a classic editor, a page builder.

## Defaults

**Settings → SendBeam → Forms** holds the default signup form and the contact form. The block
and the shortcodes fall back to these, so most sites choose a form once and never name one again. The
**Your forms** table on the same tab lists every form in the workspace with a ready-made
shortcode and a copy button.

## Appearance

Forms are served by SendBeam, so by default they carry SendBeam's styling. The
**Appearance** panel on the Forms tab hands the form your site's own: button colour, text
colour, field background, field border, corner radius, text size and typeface. Leave a field blank to keep
our default.

Set the typeface to *Match my theme* and the form inherits the font of the page it sits in. The
values are validated before they are used — a colour must be a hex value, sizes are clamped, and the
typeface is chosen from a list rather than supplied as a font stack.

**Hide the form name and subtitle inside the embed** is on by default, because the section of
your page around the form almost always has its own heading. The *Powered by SendBeam* line stays.

## Height

An embedded form measures itself and tells the page how tall it is, so the plugin sizes the frame to match.
You should not need to set a height, and a fixed one only helps if you are deliberately constraining the
form. Picking a number by hand leaves either a scrollbar or a band of empty space under the button.

## Reacting to a submission

The page fires a `sendbeam:submitted` event on `document` when a form in it is
submitted, carrying the form ID. Use it to record an analytics goal or move the visitor on.

```
document.addEventListener('sendbeam:submitted', function (e) {
  // e.detail.formId
  window.dataLayer && window.dataLayer.push({ event: 'newsletter_signup' });
});
```

---
Source: https://sendbeam.io/docs/wordpress/forms