# Customising Forms

Style your forms and configure success messages.

## Styling the form

The embed snippet is ordinary HTML with inline styles, and it is yours to edit. SendBeam does
not host a stylesheet or inject any markup, so whatever you paste into your page is exactly
what visitors see. Two approaches work well:

- **Edit the inline styles** — each input and the button carry a
  `style` attribute. Change the colours, border radius, padding and font to match
  your site.
- **Strip the inline styles and use your own CSS** — remove the
  `style` attributes and target the form by its id
  (`sendbeam-form-`) from your stylesheet. This keeps the form in
  step with your design system.

Whichever you choose, keep these parts intact so the form keeps working:

- The form's `id` and the `name` attributes on the inputs (`email`, `first_name`, `last_name`, and for contact forms `name`, `subject`, `message`).
- The hidden input in the off-screen wrapper, and the wrapper itself. Its name is unique to your form and it must stay hidden and empty.
- The message element (`sendbeam-msg-`) where the response is shown.
- The script block, which posts the submission and handles the response.
- The Turnstile `div` and script, if the form has Turnstile enabled.

> Use your browser's developer tools or your design system documentation to find the exact
> hex values your website already uses. Matching them makes the form feel like a native
> element rather than a third-party widget.
> 

The four [pop-up styles](https://sendbeam.io/docs/forms/embedding#pop-up-styles) take the same colours.
A pop-up is a card rather than a bare form, so it lays itself out — accent, text, muted, field,
border, radius, font and size are read exactly as they are here, and the style decides the rest.
Set your colours once and the embedded form, the hosted page and all four pop-ups agree.

## Button text

A form can also carry its own **headline**, **line of copy** and **button label**,
set on its page under Form settings. They show on the hosted page and in the pop-up wherever the embed or
plugin did not pass its own; a heading passed in the URL still wins.

The submit button reads "Subscribe" (or "Send message" for a contact form). Edit the button's
text in the snippet to something more specific and action-oriented — it is the last thing a
visitor reads before deciding to sign up.

Effective patterns:

- Benefit-focused: "Get weekly tips", "Send me the guide", "Start learning"
- First-person: "Sign me up", "Get my discount", "Join the list"
- Context-specific: "Download now" for a lead magnet, "Get early access" for a waitlist

Avoid generic labels like "Submit" or "Click here" — they do not tell the visitor what
they are getting and perform noticeably worse than action-oriented alternatives.

## Success message and redirect

After a successful submission, the snippet shows your thank-you message under the form or
sends the visitor to a URL. Both are set on the form's page in SendBeam and returned with each
submission, so you can change them without re-copying the snippet:

- **Thank You Message** — shown in the message element. Good for simple
  confirmations. Customise it to set expectations, for example: "You're on the list! Check
  your inbox for a welcome email."
- **Redirect URL** — the visitor is sent to this page after submitting. Useful
  for lead-magnet funnels where you want to deliver a download link, show a thank-you page,
  or present an upsell offer. When a redirect is set, it takes precedence over the message.

> If the target list uses **double opt-in**, your thank-you message must tell
> visitors to check their email and click the confirmation link. A generic "Thanks for
> subscribing!" will leave visitors confused about why they haven't received anything yet.
> 

## Fields and placeholders

Which inputs appear is decided by the **Form Fields** section on the form's page
(email is always included; first name, last name and any custom fields are optional). The
snippet lists them in a fixed order — email, first name, last name, then custom fields — but
you can reorder the inputs in your HTML freely; only their `name` attributes matter.

Each input uses a placeholder rather than a label. Edit the placeholder text to anything you
like — for example, "Your email address" or "What should we call you?" — or add
`` elements above the inputs for accessibility.

> To capture something beyond names — a company, a plan, a region — add the key under
> **Custom fields** on the form's page. The regenerated snippet includes an input
> for it, and the value lands in the contact's custom fields, ready for merge tags and
> segments. If you keep an older copy of the snippet, add an input with that `name`
> yourself.
>

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