Building Forms
Master the Form Builder interface, field types, and multi-step forms
Building Forms
The Form Builder gives you a visual, drag-and-drop interface to design forms. No code required—add fields, configure them, and preview in real time.
Form Builder interface
The builder has three main areas:
- Field Palette (left sidebar) — All available field types. Drag any field onto the canvas.
- Canvas (center) — Your form layout. Reorder fields by dragging, or drag between steps in multi-step forms.
- Field Editor (right panel) — Edit the selected field's label, placeholder, validation, options, and more.
Image needed: Annotated screenshot of the Form Builder showing: (1) Field Palette sidebar, (2) Canvas area, (3) Field Editor panel.
Adding and configuring fields
- Drag a field from the palette onto the canvas
- Click the field to open the Field Editor
- Set Label, Placeholder, and Required as needed
- For select, radio, and checkbox fields, manage Options in the editor
- Use Step assignment to put the field in a specific step (for multi-step forms)
Image needed: Screenshot of the Field Editor panel with a text field selected, showing label, placeholder, and required toggle.
Field types
| Category | Field | Description |
|---|---|---|
| Basic | Text Input | Single-line text |
| Textarea | Multi-line text | |
| Email with validation | ||
| Number | Numeric input | |
| Date Picker | Date selection | |
| Time Picker | Time selection | |
| Phone Number | Phone with validation | |
| Choices | Dropdown (Select) | Select from list |
| Checkbox | Yes/No or multiple selections | |
| Radio Group | Single choice from options | |
| Advanced | File Upload | Images (JPEG, PNG, GIF, WebP) |
| Star Rating | 1–5 stars | |
| Range Slider | Numeric range | |
| Submit Button | Customizable submit button |
Form recipes (templates)
Recipes are pre-configured layouts to get you started quickly. After applying one, you can customize every field and setting.
| Recipe | Description |
|---|---|
| Inline Email Form | Email input and submit button on the same line (75/25 split)—perfect for newsletter signups |
| Contact Form | Standard contact form with name, email, message, and submit button |
| Multi-Step Contact Form | Two-step form: name and email on step 1, message and submit on step 2 |
Tip: Start with a recipe, then add or remove fields to match your needs.
Multi-step forms
Multi-step forms split your fields across 2–10 steps. Useful for long forms or clearer flows. Available on Starter and Pro plans.
- Open Form Settings
- Turn on Enable multi-step
- Set Step count (2–10)
- Choose a Stepper style
- Assign fields to steps via the Field Editor or by dragging between steps in the canvas
Image needed: Screenshot of the Form Settings panel with "Enable multi-step" toggle and step count selector.
Stepper styles
| Style | Description |
|---|---|
| None | No step indicator shown |
| Numbered | Classic step numbers (1, 2, 3…) |
| Dots | Minimal dot indicators |
| Progress | Progress bar |
| Pills | Pill-shaped step indicators |
| Timeline | Vertical timeline |
Image needed: Side-by-side comparison showing all 6 stepper styles.
Conditional logic
Conditional logic lets you show or hide fields based on answers in other fields. For example, show a "Company name" field only when the user selects "Business" in a dropdown. Available on Starter and Pro plans.
- Select the field you want to show or hide
- In the Field Editor, open the Conditional logic section
- Define the condition (e.g. "Show when Field X equals Y")
- Save
Fields that don't match their conditions are hidden from the form and excluded from submissions.
Form status
Before embedding, set your form to Published. Draft forms are not shown on the storefront. Toggle status in the Form Builder header or in Form Settings.