# Build a form

> Use the form builder to add steps, text, images, buttons and input fields, style the form, preview it on each device and publish it once the checks pass.

The form builder is a full-screen editor where you design what visitors see: one or more form steps, a success step, every block on them and the form's styles. This page walks through each part of the builder and the checks a form must pass before you can publish it.

## Before you begin

- Forms is in early access. See [Forms](/docs/forms/) if it isn't available in your workspace.
- Create the form under **Email Marketing → Forms** with **Create form**, giving it a **Name** and a **Type**.

## Open the builder

On the form's page, select **Edit form**. The builder opens over the dashboard:

- **Header:** the form name (select it to rename), the **Draft** or **Live** badge, an **Unsaved** marker when you have changes, **Undo** and **Redo**, one button per step, **Add step**, **Publish**, **Save** and the close button.
- **Canvas:** a live preview of the selected step. Switch between **Desktop**, **Mobile** and **Both**, check the form's size, zoom with **Scale** and select **Reset canvas** to re-center it.
- **Side panel:** the **Content** and **Styles** tabs, and **Alerts & checks** at the bottom.

Select **Save** to keep your changes. Saving a live form updates it on your site too.

## Steps

A new form has two steps: **Step 1**, with a "Join our list" text, an **Email** field and a **Subscribe** button, and a **Success** step that says "Thanks for subscribing!".

- **Form steps** hold the fields visitors fill in. Select **Add step** (the plus button in the header) to add another form step. New steps go before the success step.
- **The success step** is shown after the visitor submits the form. Use it to say thanks, link somewhere or offer a discount code.
- **Move between steps** with buttons. A **Next step** button validates the current step and shows the next one. A **Submit** button validates the step, sends the submission and shows the success step.

Select a step's button in the header to edit it on the canvas.

## Add blocks

On the **Content** tab, select a block to add it to the current step. To insert a block in a specific place, hover over the canvas between two blocks and select the plus button. Drag blocks to reorder them, and select a block to edit its settings. **Delete** is at the top of each block's settings.

| Group | Block | Use it for |
| --- | --- | --- |
| **Elements** | **Text** | Headings and paragraphs, with bold, italic, links and emoji. |
| | **Button** | Submitting, moving to the next step, closing the form or opening a link. |
| | **Image** | A logo, product shot or banner image, optionally linked. |
| **Inputs** | **Email** | The visitor's email address. Checked for a valid format. |
| | **Text input** | Any short text, such as a name or company. |
| | **Phone** | A phone number. Checked for a valid format. |
| | **Radio** | One choice from a list. |
| | **Checkbox** | Several choices from a list, or a single consent checkbox. |
| | **Date** | A date, in the format you choose. |
| | **Dropdown** | One choice from a list, in a compact menu. |

### Block settings

**Text**

- Content, edited inline.
- **Typography:** **Alignment**, **Font size**, **Weight**, **Color** and **Link color**.

**Button**

- **Label** and **Action**: **Submit**, **Next step**, **Close** or **Go to URL**. **Go to URL** also needs a **URL**.
- **Button style:** **Width** (auto or full), **Alignment**, **Background**, **Text**, **Hover** and **Border radius**.

**Image**

- **Image URL**, **Alt text** and an optional **Link URL**.
- **Layout:** **Width (%)**, **Alignment** and **Object fit**.

**Email, Text input, Phone and Date**

- **Property name:** the key the value is stored under in each submission, for example `email` or `company`. Keep it unique on the form.
- **Label**, **Placeholder** (or **Date format** for dates: `MM/DD/YYYY`, `DD/MM/YYYY` or `YYYY-MM-DD`) and **Help text**.
- **Required**, with an optional **Required message**, and an **Invalid message** shown when an email address or phone number doesn't look valid. Phone numbers are easiest to validate in international format, such as `+15551234567`.

**Radio, Checkbox and Dropdown**

- **Property name**, **Label** and **Help text**.
- **Required**, with an optional **Required message**.
- **Layout:** vertical or horizontal.
- **Options**, one per line as `label|value`, for example `Weekly digest|weekly`.

**Every block**

- **Spacing:** **Margin top** and **Margin bottom**.
- **Visibility:** **Show on** **Desktop & mobile**, **Desktop only** or **Mobile only**. Hidden blocks stay in the form and are only filtered out of the matching preview and device.

## Style the form

The **Styles** tab controls the whole form:

| Section | Settings |
| --- | --- |
| **Form type** | **Type**. For flyouts, **Flyout side** (**Bottom right**, **Bottom left** or **Bottom**). For banners, **Banner position** (**Top** or **Bottom**). |
| **Size** | **Width (px)** and **Min height (px)**. Leave the height at 0 for automatic height. |
| **Overlay** | **Overlay color** and **Opacity** behind popups, flyouts and full-page forms. |
| **Form background** | **Fill**, **Border color**, **Border width**, **Border radius**, **Padding** and **Shadow**. |
| **Side image** | An image to the **Left** or **Right** of the form, with **Image URL**, **Alt text** and **Size**. |
| **Background image** | An image behind the form, with **Image URL** and **Fit** (**Cover** or **Contain**). |
| **Fonts** | **Font family** (**Inter**, **Georgia**, **Mono** or **System**), **Heading color** and **Body color**. |
| **Input field styles** | **Background**, **Border**, **Border radius**, **Text**, **Placeholder** and **Label** colors. |
| **Button styles** | **Fill**, **Text**, **Hover**, **Border radius** and **Style** (**Solid** or **Outline**). Individual buttons can override these. |
| **Close icon** | **Color**, **Size** and **Style** (**X** or **Circle X**) of the close button. Not shown for embedded forms. |

## Preview

Use **Desktop**, **Mobile** or **Both** above the canvas to check the layout on each screen size, including blocks you've hidden on one device. **Undo** and **Redo** step through your recent changes.

## Check and publish

**Alerts & checks** at the bottom of the side panel lists problems with the form. A red count shows how many errors there are.

| Level | Check |
| --- | --- |
| Error | "Add at least one form step before publishing." |
| Error | "Add a success step before publishing." |
| Warning | A form step has no content blocks. |
| Warning | More than one email field. Use a single email field when possible. |
| Warning | No submit or next button on any form step. |
| Warning | A **Go to URL** button has no URL. |

Errors block publishing. Warnings don't, but fix them so visitors can complete the form.

When the checks pass, select **Publish** in the builder header. Emailit saves the form, makes it live and closes the builder. You can also publish or unpublish from the form's page. Next, [install the script](/docs/forms/install/) on your site if you haven't yet.

## Related

  - [Install forms](/docs/forms/install/): Show your live forms on your site.
  - [Forms overview](/docs/forms/): Form types, statuses and submissions.

---
Source: https://emailit.com/docs/forms/build/