How-to
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 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 | 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
emailorcompany. Keep it unique on the form. - Label, Placeholder (or Date format for dates:
MM/DD/YYYY,DD/MM/YYYYorYYYY-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 exampleWeekly 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.