10 min read

Using the form builder

Learn how to add fields, configure settings, and build forms with drag-and-drop.

#Form builder guide

The form builder is where you create and edit your forms. It is a drag-and-drop editor split into three main areas: the field library on the left, the form canvas in the center, and the settings panel on the right. This guide covers every part of the interface so you can build exactly the form you need.

#Opening the form builder

You can reach the form builder in several ways:

Click Create Form on the Dashboard or Forms page to start a new form from scratch
Click Use Template on the Templates page to start from a pre-built template
Click Generate with AI on the Templates page to have the AI create a form for you
Click Edit on any existing form in your Forms list to modify it

#Left sidebar: Field library

The left sidebar is your toolbox. It contains every field type available in the app, organized into categories for easy browsing.

#Field categories

Contact Info — Email, Name, Phone, Password, Country
Selects — Image Options, Image Dropdown, Checkbox, Dropdown, Radio Buttons, Consent, Switch, Range Slider, Button, Product
Input — URL, Date Time, Hidden, Repeater, Signature
Text — Text (single line), Textarea (multi-line)
Static Text — Heading, Paragraph, HTML, Divider
Ratings — Feedback (emoji), Matrix, Rating Level, Rating Star
File Upload — File Upload
Color — Color Swatch, Color Picker
Number — Number, Quantity

#Adding fields to your form

To add a field, simply drag it from the sidebar and drop it onto the canvas. The field appears at the position where you drop it. You can also drop a field between two existing fields to insert it in that spot.

#AI form generator

At the top of the left sidebar, you will find the AI prompt input. Type a description of the form you want (for example, "A product return request form with order number, reason for return, and file upload for photos") and the AI will generate a complete form for you. The generated form replaces the current canvas contents, so use this at the start of building a new form.

See the AI form generator guide for tips on writing effective prompts.

#Center: Form canvas

The canvas is your form's live workspace. It shows exactly how your fields are arranged and gives you a real-time sense of the form's structure.

#Selecting fields

Click any field on the canvas to select it. The selected field gets a visual highlight, and the right panel updates to show that field's settings. Click the canvas background (or press Escape) to deselect.

#Reordering fields

Drag any field up or down on the canvas to change its position. A visual indicator shows where the field will land when you release it.

#Duplicating fields

Hover over a field to reveal action icons. Click the Duplicate icon to create an exact copy of the field, including all its settings. The copy appears directly below the original.

#Deleting fields

Hover over a field and click the Delete icon to remove it from the form. This action is immediate, so double-check before deleting.

#Multi-page forms

For longer forms, you can split your content across multiple pages. Customers will see a step-by-step progress bar at the top of the form and navigate forward and back between pages.

To work with pages:

Add a page — Click the Add Page button in the page controls area above the canvas. A new blank page is added.
Switch pages — Click on a page in the stepper to navigate to it. Each page has its own set of fields.
Delete a page — Remove a page and all its fields using the delete option in the page controls.
Rename pages — Each page can have its own name, which shows in the progress stepper.

Multi-page forms are available on the Starter plan and above.

#Row layouts (side-by-side fields)

You can place two or more fields next to each other on the same row. This is great for combinations like First Name + Last Name, or City + Postal Code.

To create a row layout:

Add a Row element to the canvas (available in the field library).
Drag fields into the row container. Fields inside a row are displayed side by side.
Rows can hold between 2 and 10 fields.
Each field inside a row can have its column width adjusted (e.g., 50% + 50%, or 30% + 70%).

You can also set a field's Column width to 50% in the right panel. When two consecutive fields are both set to 50%, they display side by side automatically.

#Form header and footer

Your form includes a header area at the top and a footer area at the bottom:

Header — Add a title and description that appear above your form fields. This is where you introduce the form's purpose to customers (e.g., "Contact Us" with a short message underneath).
Footer — Add a title or note below the form fields but above the submit button. Useful for disclaimers, privacy notices, or additional instructions.

#Right panel: Field settings

When you select a field on the canvas, the right panel shows all configurable settings for that field. The available settings depend on the field type.

#Common settings (all fields)

Setting	Description
Label	The text shown above the field. This is what customers see as the field name.
Placeholder	Hint text displayed inside the field before the customer types anything.
Description	Optional help text shown below the field. Use it to provide instructions.
Required	When turned on, the form cannot be submitted unless this field has a value.
Column width	Set to 100% for full width or 50% to share the row with another field.
Hide label	Hides the field label from view. Useful for minimal designs where the placeholder provides enough context.
Input icon	Choose an icon to display inside the input field for a polished look.

#Type-specific settings

Different field types have additional settings. Here are some examples:

Dropdown, Radio, Checkbox, Button — Manage the list of options. Add, remove, reorder, and set default selected values.
Image Options / Image Dropdown — Upload images for each option. Enable multi-select and set selection limits.
Range Slider — Set minimum, maximum, step value, and optional prefix/suffix text.
File Upload — Choose which file types to allow (images, documents, archives, media) and whether to allow multiple files.
Date Time — Choose between date only, time only, or both. Set the date format and restrict to a date range.
Matrix — Define rows (questions) and columns (answer options). Choose radio or checkbox mode.
Repeater — Configure the sub-fields that repeat when customers click "Add another."
Product — Enable product search, quantity selector, and multi-selection.
Consent — Customize the acceptance text (e.g., "I agree to the terms and conditions").
Rating Star — Optionally show numbers under each star.
Number — Set minimum and maximum allowed values.

#Conditional display

You can set a field to show or hide based on the value of another field in the form. This is called conditional display, and it keeps your forms clean by only showing relevant fields.

For example, if you have a dropdown asking "How would you like to be contacted?" with options "Email" and "Phone," you can set the Phone Number field to only appear when the customer selects "Phone."

To set up conditional display:

Select the field you want to conditionally show or hide.
In the right panel, find the Conditional display section.
Choose the controlling field — the field whose value determines visibility.
Set the value that triggers this field to appear.

Conditional display supports dropdowns, radio buttons, checkboxes, and hidden fields as controlling inputs. It is available on the Growth plan and above.

#Right panel tabs

Beyond field settings, the right panel has several tabs for configuring your form as a whole. When no field is selected, these tabs are the primary view.

#Design tab

The Design tab controls your form's visual appearance. You can configure:

Layout type — Default, Boxed, Float, or Popup
Input style — Classic, Material, Line, or Flat (with rounded variants)
Width — Set the form's maximum width in pixels
Font family — Choose from Google Fonts
Font size — Small (14px), Medium (16px), or Large (18px)
Colors — Background, text, button, button label, outline, and label colors
Background image — Upload an image to use as the form background
Position — For Float and Popup layouts, choose where the button or popup appears (9 positions: corners, sides, and center)

See the Design and styling guide for a deep dive into each option.

#After Submit tab

Configure what happens after a customer successfully submits your form:

Hide form — The form and its header, stepper, and footer title all disappear, leaving only the success message.
Show message — Display a custom title and message (e.g., "Thank you! We will be in touch shortly.").
Redirect — Send the customer to a specific URL after submission.
Discount — Show a discount code to reward the customer for submitting.

You can combine these options. For example, hide the form and show a thank-you message at the same time.

#Email tab

Set up email notifications for form submissions:

Admin notification:

Enter up to 5 email addresses (comma-separated) to receive a notification every time the form is submitted.
Customize the subject line and email body.
Use template variables like {{data}} to include a table of all submitted answers, {{id}} for the submission number, and {{customer.name}} or {{customer.email}} for customer details.

Auto-responder:

Send an automatic email to the customer after they submit.
Select which email field in the form should be used as the recipient address.
Customize the subject and body with the same template variables.

Both email types support the following variables:

Variable	What it shows
`{{data}}`	HTML table of all form answers
`{{id}}`	Submission number
`{{customer.name}}`	Customer's name (from the name field)
`{{customer.email}}`	Customer's email (from the email field)
`{{page.title}}`	Title of the page where the form was submitted
`{{page.href}}`	URL of the page where the form was submitted

#Integrations tab

Connect your form to third-party services so submission data flows automatically to your other tools.

Available integrations:

Integration	What it does	Plan required
reCAPTCHA	Adds spam protection to your form	Free
Google Sheets	Appends each submission as a new row in a spreadsheet	Starter
Mailchimp	Subscribes the customer to an email list	Growth
Klaviyo	Creates a profile and adds the customer to a list	Growth
HubSpot	Creates or updates a contact in HubSpot	Growth
Sendinblue (Brevo)	Adds the customer to a Brevo contact list	Growth
Slack	Posts a message to a Slack channel for each submission	Pro
Zapier	Sends submission data to a Zapier webhook	Pro
Google Analytics	Tracks form submission events	Pro
Facebook Pixel	Tracks form conversion events	Pro

To connect an integration:

Click the Integrations tab in the right panel.
Find the integration you want and click Connect.
Enter the required credentials (API key, webhook URL, etc.) in the configuration modal.
Click Save. The integration is now active for this form.

Integrations run in the background after each submission. If an integration fails, the submission is still saved — your data is never lost.

#Saving your form

Click the Save button at the top right of the form builder to save your form. If this is a new form, it is created with a unique form ID. If you are editing an existing form, the changes are saved to the same form.

Your form must have a name to be saved. The builder validates that your form has a name, a header, at least one page of content, and a footer before saving.

#Editing an existing form

To edit a form you have already created:

Go to Forms in the sidebar.
Find the form you want to edit and click on it (or click the Edit button).
The form builder opens with all your existing fields, settings, and configurations loaded.
Make your changes and click Save.

If the form is currently published, your changes go live as soon as you save. There is no separate "publish" step needed for updates.

#Managing your forms

From the Forms page, you can:

View all forms in a list with their names, status, and creation dates
Filter by status using tabs: All, Published, or Unpublished
Delete forms individually or in bulk by selecting multiple forms and using the bulk delete action
Create new forms using the Create Form button

When you delete a form, all its submissions and integrations are also removed. Published forms are automatically unpublished from your store.