Form Builder Interface
The Form Builder is where you create and customize your forms. This guide provides a comprehensive overview of the interface and its features.
Interface Overview
Section titled “Interface Overview”The Form Builder is divided into three main areas:
1. Left Panel - Fields & Settings
Section titled “1. Left Panel - Fields & Settings”This panel contains everything you need to build your form:
Add Elements Section
Section titled “Add Elements Section”- Click Add Elements to open the field picker
- Browse all available field types organized by category
- Click any field to add it to your form
Field Settings Section
Section titled “Field Settings Section”- Appears when you select a field
- Configure label, placeholder, validation, and more
- Settings vary based on field type
Form Settings Section
Section titled “Form Settings Section”- Overall form configuration
- Success messages, styling, notifications
- Access via the settings icon or form background
2. Right Panel - Live Preview
Section titled “2. Right Panel - Live Preview”See your form exactly as customers will see it:
Interactive Preview
Section titled “Interactive Preview”- Click any field to select and edit it
- Drag fields to reorder them
- Real-time updates as you make changes
Responsive Toggle
Section titled “Responsive Toggle”- Desktop View: See how form looks on desktop
- Mobile View: See how form looks on mobile devices
- Toggle located at the top of the preview
3. Top Toolbar
Section titled “3. Top Toolbar”| Button | Function |
|---|---|
| Desktop | Switch to desktop preview |
| Mobile | Switch to mobile preview |
| Preview | Open form in a new browser tab |
| Save | Save all changes to the form |
Working with Fields
Section titled “Working with Fields”Adding Fields
Section titled “Adding Fields”- Click Add Elements in the left panel
- Browse or search for the field type you need
- Click on the field to add it to your form
- The field appears at the bottom of your form
Selecting Fields
Section titled “Selecting Fields”- Click on any field in the preview to select it
- Selected fields show a blue highlight
- Field settings appear in the left panel
Field Toolbar
Section titled “Field Toolbar”When you hover over a field, a toolbar appears:
| Icon | Action | Description |
|---|---|---|
| ⋮⋮ | Move | Drag to reposition the field |
| ▭ | Width | Change field width (1/4, 1/3, 1/2, full) |
| ⧉ | Duplicate | Create a copy of the field |
| 👁 | Hide | Temporarily hide from customers |
| 🗑 | Delete | Remove the field permanently |
Reordering Fields
Section titled “Reordering Fields”- Hover over the field you want to move
- Click and hold the Move icon (⋮⋮)
- Drag the field to its new position
- Release to drop it in place
Form Settings
Section titled “Form Settings”Access form-level settings by:
- Clicking on the form background (not a field), or
- Clicking the Settings icon in the toolbar
Available Form Settings
Section titled “Available Form Settings”| Setting | Description |
|---|---|
| Form Name | Internal name for organization |
| Description | Optional description for your reference |
| Success Message | Text shown after successful submission |
| Font Size | Base font size for the form |
| Padding | Internal spacing of the form |
| Background | Color or image for form background |
| Trigger Type | How the form is displayed (AUTO, BUTTON, EMBEDDING) |
Preview Options
Section titled “Preview Options”In-Builder Preview
Section titled “In-Builder Preview”- Use the desktop/mobile toggle for responsive preview
- Changes update instantly
- Limited to the builder frame
Full Page Preview
Section titled “Full Page Preview”- Click Preview in the top toolbar
- Form opens in a new browser tab
- See exactly how it will appear on your store
- Test all functionality including submission
Keyboard Shortcuts
Section titled “Keyboard Shortcuts”| Shortcut | Action |
|---|---|
Ctrl/Cmd + S | Save form |
Escape | Deselect current field |
Delete | Remove selected field |
Ctrl/Cmd + Z | Undo last action |
Tips for Efficient Form Building
Section titled “Tips for Efficient Form Building”Organization
Section titled “Organization”- Group related fields together
- Use dividers to separate sections
- Keep forms concise for better completion rates
Best Practices
Section titled “Best Practices”- Save frequently to avoid losing work
- Test on both desktop and mobile views
- Use the preview function before going live
Workflow
Section titled “Workflow”- Plan your form structure first
- Add all needed fields
- Configure field settings
- Set up form-level settings
- Preview and test
- Save and publish