Skip to content
Docs

How-to

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.

Updated Oct 1, 2026

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 if it isn’t available in your workspace.
  • Create the form under Email MarketingForms 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 on your site if you haven’t yet.

Show your live forms on your site.
Form types, statuses and submissions.

Was this page helpful?

Thanks for the feedback.

Thanks, we read every message.