Building Forms with the Form Builder

Building Forms with the Form Builder

Forms let you collect contact requests, feedback, sign-ups, and any other information from visitors. The Form Builder gives you a visual editor with no coding required, plus a built-in inbox for every submission.

Step 1: Open the Forms Section

From the admin sidebar, click Forms (or visit /app/forms). The list shows every form you have created with its slug, field count, and how many submissions it has received.

Step 2: Create a New Form

Click "New Form" and fill in the basics:

1. Form Title — Internal name and the heading shown to visitors.
2. Slug — Auto-generated from the title; used in the form URL and embed code.
3. Description — Optional helper text shown above the form.
4. Submit Button Label — The text on the submit button (defaults to "Send").
5. Success Message — What visitors see after a successful submission.
6. Notification Emails — Comma-separated addresses that receive each submission. Leave blank to skip email alerts.

Step 3: Add Fields

Click "Add Field" for each input you want. The available field types are:

• Text, Long Text, Email, Phone, Number — Single-value inputs with built-in format validation.
• Select List, Radio — Choose one option from a list.
• Checkbox — A yes/no toggle (great for consent boxes).

For each field, set a Label, an internal Name (auto-generated from the label), an optional Placeholder, and toggle Required if the visitor must fill it in. For Select and Radio fields, enter options as a comma-separated list.

Step 4: Reorder or Remove Fields

Use the up/down arrows next to each field to change its order. Click the trash icon to remove a field. Save your changes with the button at the top of the editor.

Step 5: Show as a Popup (Optional)

Expand the Popup Settings panel and toggle it on if you want the form to appear automatically over your store. You can configure how many milliseconds to wait before showing it, a custom popup title, and how many days to remember a visitor's dismissal so they aren't pestered.

Step 6: Embed the Form on a Page

Open any page in the storefront editor and add the Form section, then pick this form from the dropdown. The form will render inline with your store's styling.

Step 7: Review Submissions

Back on the form's edit page, switch to the Submissions tab to see every entry, with the timestamp, source page, and all field values. The submission count badge on the forms list updates automatically.