Form Builder
Form Builder Interface
An overview of the three panels in the SK Form Builder Fields, Settings, and Design.
Last updated June 15, 2026
The form builder has three panels, accessed from the icon strip on the left sidebar. Each panel controls a different aspect of your form.
Fields panel
The Fields panel lists every available field type, grouped by category: Basic, Advanced, Shopify, and Layout Elements.
How to use it:
- Drag a field from the panel onto the canvas to add it.
- Drag fields within the canvas to reorder them.
- Click any field on the canvas to open its individual settings in the right-side panel.
Fields can be set to 33%, 50%, or 100% width so you can place multiple fields on the same row.
Settings panel
The gear icon opens form-level settings. This is where you configure everything that happens around the form not the fields themselves.
| Setting group | What you configure |
|---|---|
| After submission | What happens when the form is submitted (message, redirect, prevent resubmit) |
| Email notifications | Admin and customer emails, SMTP, merge tags |
| Integrations | Klaviyo list, Mailchimp audience, Google Sheets, Zapier webhook, Slack |
| Spam protection | Enable/disable reCAPTCHA for this form |
| Shopify | Customer tags, metafield mapping, Flow, discount codes, draft orders |
| Scheduling | Active From / Until date range |
| Display rules | Popup trigger and frequency cap |
Design panel
The palette icon opens the Design panel. This controls the visual appearance of the form.
| Setting | Description |
|---|---|
| Layout type | Default, Boxed, Popup, or Floating |
| Form width | Max-width of the form container |
| Background | Color or image |
| Input style | Border color, background color, border radius, spacing |
| Text color | Color for labels and input text |
| Button | Background color, text color, border radius |
| Custom CSS | Add any custom styles (Basic+ plans) |
Canvas
The canvas is the central area where you build your form. It shows a live preview of the form layout as you drag and configure fields.
Page breaks
To create a multi-step form, drag a Page Break element from the Layout section of the Fields panel. Everything above the page break is Step 1, everything below is Step 2.
Saving
Click Save in the top-right corner at any time to save your changes. Changes are not published live until you save.
Was this page helpful?