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

# Create and publish a form

> Build a signup form or a full page form, add questions, brand it and publish it, in one page.

export const DemoVideo = ({id, title, embedUrl, src, poster, duration}) => {
  if (embedUrl) {
    return <figure className="brd-media" data-media-id={id}>
        <iframe className="brd-media-frame w-full aspect-video" src={embedUrl} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture" allowFullScreen />
      </figure>;
  }
  if (src) {
    return <figure className="brd-media" data-media-id={id}>
        <video className="brd-media-frame w-full aspect-video" src={src} poster={poster} controls playsInline preload="metadata" />
      </figure>;
  }
  const label = duration ? `Video walkthrough coming soon · ${duration}` : "Video walkthrough coming soon";
  return <Placeholder id={id} kind="video" label={label} description={title} ratio="16 / 9" icon={<PlayIcon />} />;
};

export const Loop = ({id, src, alt, caption}) => {
  if (!src) {
    return <Placeholder id={id} kind="loop" label="Animation coming soon" description={alt} icon={<PlayIcon />} />;
  }
  return <figure className="brd-media" data-media-id={id}>
      <video className="brd-media-frame" src={src} autoPlay muted loop playsInline aria-label={alt} />
      {caption && <figcaption className="brd-media-caption">{caption}</figcaption>}
    </figure>;
};

export const Screenshot = ({id, src, srcDark, alt, caption}) => {
  if (!src) {
    return <Placeholder id={id} kind="screenshot" label="Screenshot coming soon" description={alt} icon={<ImageIcon />} />;
  }
  return <figure className="brd-media" data-media-id={id}>
      <img className="brd-media-frame block dark:hidden" src={src} alt={alt} />
      <img className="brd-media-frame hidden dark:block" src={srcDark || src} alt={alt} />
      {caption && <figcaption className="brd-media-caption">{caption}</figcaption>}
    </figure>;
};

Build a form, publish it and share the link in about ten minutes. Everything happens on one page,
and your changes save as you go.

<Screenshot id="ss-forms-create-a-form-hero" alt="The form builder with the Setup, Fields and Design sections on the left and the Before you publish checklist and preview on the right" />

<Info>
  **Before you start:** forms need access to the Email product. If the form will send a
  confirmation email, which signup forms do by default, you also need a
  [verified sending domain](/channels/email/verify-your-domain).
</Info>

<Accordion title="Watch the walkthrough" icon="circle-play">
  <DemoVideo id="V09" title="Create and publish a signup form" duration="3 min" />
</Accordion>

<Steps>
  <Step title="Start a form">
    Go to **Contacts > Forms** and select **Create Form**. The builder opens with **Setup** first.
    The header shows **Saving** and **Draft · saved** as your work is stored.
  </Step>

  <Step title="Set it up">
    Enter a **Form name**; only you see it. Under **Form type**, choose **Signup form** or
    **Full page form**. See [Forms overview](/forms/overview) for the difference.

    Then choose where submissions go:

    * A signup form needs a list under **Signups join**. Pick one, or select **Create a new list**
      and name it.
    * A full page form can add responses to a list under **Add responses to a list (optional)**, or
      leave it empty to collect answers only.

    With a list chosen, **Require email confirmation** appears. Leave it on unless you have a
    reason not to; see [Double opt-in and consent](#double-opt-in-and-consent).

    The rest of the builder unlocks once the form has a name and, for a signup form, a list.
  </Step>

  <Step title="Add fields or questions">
    In **Fields** (or **Questions** on a full page form), select **Add field** or **Add question**
    and pick a type. Drag the handle on a row to reorder it, and select the arrow to edit its label,
    placeholder, help text and options.

    <Loop id="lp-forms-create-a-form-drag-question" alt="Adding a Dropdown question, typing two options and dragging it above the email field" />

    A signup form always has an **Email address** field. See [Question types](#question-types).
  </Step>

  <Step title="Brand it">
    In **Design**, add a **Cover image** and a **Logo**. In **Copy**, change the button label and
    the messages people see after submitting. See
    [Design and branding](/forms/publish-and-share#design-and-branding).
  </Step>

  <Step title="Map answers (full page forms with a list)">
    In **Mapping**, choose where each answer goes on the contact. One question must map to
    **Email address**. See [Map answers to contact fields](#map-answers-to-contact-fields).
  </Step>

  <Step title="Review the settings">
    In **Settings**, set the **Sender name** and **Sender address** for the confirmation email, a
    **Redirect after submitting** if you want one, and the limits under **After submitting** and
    **Bot protection**. The defaults suit most forms.
  </Step>

  <Step title="Clear the checklist">
    **Before you publish**, beside the builder, lists what's still missing. Select an item's button
    to jump to the fix. The preview underneath shows the form as visitors will see it; select
    **Preview** at the top to open the real hosted page.

    <Screenshot id="ss-forms-create-a-form-01-checklist" alt="The Before you publish checklist with the sender address and verified domain items still outstanding" />
  </Step>

  <Step title="Publish">
    Select **Publish**. The form goes **Live**, and a dialog shows its link, a QR code and a summary
    of what happens to each submission.
  </Step>
</Steps>

## What happens next

* The form's link, `https://forms.brudcast.com/f/…`, starts accepting submissions. Share it from
  the **Share** tab; see [Publish and share](/forms/publish-and-share).
* Signups appear on the **Submissions** tab, and responses on **Responses**.
* After publishing, the form opens in tabs instead of the single builder page. Each tab has its own
  save button.
* You can switch the form's type until it's published. After that it's fixed.

## Question types

A full page form can use any of these question types. A signup form uses a fixed set of contact
fields instead.

| Group         | Types                                                                                                                        |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Text          | **Short answer**, **Paragraph**, **Email address**, **Phone number**, **Number**, **Link**                                   |
| Date and time | **Date**, **Time** (a time of day or a duration)                                                                             |
| Choice        | **Multiple choice**, **Checkboxes**, **Dropdown**, **Linear scale**, **Rating**, **Multiple choice grid**, **Checkbox grid** |
| Other         | **File upload**, **Consent checkbox**, **Hidden value**                                                                      |

Every question also has a **Label**, **Help text** and a **Required** switch. Layout items shape the
page but collect nothing: **Section** (which starts a new page), **Title and description**, **Image**
and **Video**.

A signup form asks only for details that land on a contact: **First name**, **Last name**,
**Phone number**, **Consent checkbox**, **Hidden field**, and any of your
[custom fields](/contacts/custom-fields). Its **Email address** field is
always there, always required, and can't be removed. Each field can appear once.

| Limit                               | Value |
| ----------------------------------- | ----- |
| Questions and layout items per form | 50    |
| Options per choice question         | 100   |
| Rows per grid                       | 20    |
| Characters in one answer            | 2,000 |
| Files per upload question           | 10    |
| Size of one uploaded file           | 10 MB |

Two details are easy to miss. The wording of a **Consent checkbox** is saved word for word in the
consent record of anyone who ticks it, and rewording it later doesn't change records already
written. **Phone number** answers are converted to international format, for example
`+2348000000001`, when they arrive.

## Map answers to contact fields

Mapping only matters for a form that adds people to a list. A full page form with no list keeps
every answer on the response and creates no contact.

| Target                        | What it fills                                                            |
| ----------------------------- | ------------------------------------------------------------------------ |
| **Email address**             | The contact's primary email address. It identifies the person            |
| **First name**, **Last name** | The contact's name                                                       |
| **Phone number**              | Kept with the submission. It isn't added to the contact as an SMS number |
| **Custom field**              | One of your custom fields                                                |
| **Consent checkbox**          | The consent record, with the checkbox's wording saved word for word      |
| **Hidden field**              | A value sent with the submission that the visitor never sees             |

Each target can be used once per form, except **Custom field**, where each of your fields can be
used once. A custom field only accepts questions that produce the right kind of value: **Text**
takes text and contact-detail questions, **Number** takes Number, Linear scale and Rating, **Date**
takes Date, **Boolean** takes a Consent checkbox, and **Select (Dropdown)** takes Dropdown, Multiple
choice and Checkboxes. When a **Checkboxes** answer fills a single field, the chosen options are
joined into one value, separated by commas.

On a signup form, every field is mapped when you add it. A full page form asks its questions first
and decides where the answers go on the **Mapping** tab, where one question must map to **Email
address** before the form can be published. Only questions that can fill a contact field appear
there; grids, file uploads and layout items always stay on the response, and an unmapped answer is
still readable on the **Responses** tab.

Mapped answers are written to the contact when the signup completes: straight away with single
opt-in, or when the person confirms with double opt-in. For a new contact, the form sets the email
address, name and custom fields. For someone who is already a contact, the form adds them to the
list and confirms their address, but doesn't overwrite the details you already hold.

## Double opt-in and consent

With double opt-in, someone who fills in your form only joins your list after clicking a link in a
confirmation email. It proves the address is real and belongs to the person who signed up.

A form is a public page, and anyone can type anyone's address into it. Without confirmation, every
typo, fake and hostile signup becomes a contact you pay for and send to, and those addresses bounce
and complain. That's why **Require email confirmation** is on by default. A brand-new address
doesn't become a contact until it confirms, so unconfirmed signups don't use up your contact limit.

* The email comes from the form's sender address, with a confirm link and a decline link.
* The link opens a page where the person confirms with a button, so mail scanners that follow links
  can't confirm on their behalf.
* The link lasts **7 days**. After that the submission is **Expired**, and the person can submit the
  form again for a new link.
* Submitting twice doesn't create a second signup. The same submission is updated and the email is
  sent again.
* An existing contact who signs up is held as awaiting confirmation until they click, and isn't
  counted as a subscriber in the meantime.
* Declining marks the submission **Rejected**, so you can see the address said no.

Turn **Require email confirmation** off and people join the list as soon as they submit, with no
email. A consent record is still written, marked as single opt-in. Use single opt-in only when you
already trust where the signups come from, such as a form behind your own login.

Either way, a consent record is written in the same step that subscribes the contact, holding the
opt-in kind, the exact wording of your consent checkbox, the form's name and list, the IP address,
browser and referring page, and when the person submitted and confirmed. See
[Suppression list](/contacts/suppressions#unsubscribes-and-consent).

<Note>
  This explains how Brudcast records consent. It isn't legal advice. Check what the laws in your
  recipients' countries require.
</Note>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Publish is greyed out" icon="circle-alert">
    **Why:** a check in **Before you publish** is still failing. **Fix:** hover over **Publish** to
    see the first item, or follow the buttons in the checklist.
  </Accordion>

  <Accordion title="Verify the sending domain of the address this form sends from" icon="circle-alert">
    **Why:** confirmation emails go out from your own domain, and this one isn't verified.
    **Fix:** verify it under **Channels > Email**, or turn off **Require email confirmation** if
    you really want single opt-in.
  </Accordion>

  <Accordion title="Switching the type deleted some questions" icon="circle-alert">
    **Why:** a signup form only carries fields that map onto a contact, so switching from a full
    page form discards the rest. The dialog lists them before you confirm with
    **Switch and discard**. **Fix:** choose **Keep current type** to back out.
  </Accordion>
</AccordionGroup>

## Related

<Columns cols={2}>
  <Card title="Publish and share" icon="share-2" href="/forms/publish-and-share">
    Share the link and QR code.
  </Card>

  <Card title="Submissions and spam" icon="inbox" href="/forms/publish-and-share#submissions-and-spam-protection">
    What happens to each submission.
  </Card>

  <Card title="Forms overview" icon="clipboard-list" href="/forms/overview">
    The two kinds of form, and where submissions go.
  </Card>
</Columns>
