Form Builder Guide

The form builder uses a three-column layout designed for intuitive form creation:

• Field Palette (left, 200px) — Browse available field types and B2B templates. Click or drag a field to add it to your form.
• Sortable Canvas (center) — Your form takes shape here. Drag fields to reorder them, click to select and edit.
• Field Editor Sidebar (right, 280px) — Configure the selected field's label, placeholder, validation rules, and more.

Drag-and-drop functionality is powered by @dnd-kit for smooth, accessible interactions.

B2B Onboard supports 11 field types to cover every B2B registration scenario:

The field palette includes pre-built templates for common B2B registration scenarios. Each template adds a complete set of fields to your form with a single click, saving you time when setting up standard registration workflows.

Templates are designed around real-world B2B use cases such as wholesale applications, reseller registrations, and trade account requests. You can customize any template fields after adding them to the canvas.

Click any field on the canvas to open the editor sidebar on the right. From here you can configure:

• Label — The field name shown to applicants
• Placeholder — Hint text displayed inside the empty field
• Required / Optional — Whether the field must be filled out before submission
• Validation rules — Format constraints such as email validation or character limits

For select and multi-select fields, you can also manage the list of options directly in the sidebar.

Drag fields on the canvas to reorder them. Visual indicators show exactly where the field will be placed when you release it. This makes it easy to organize your form layout without removing and re-adding fields.

You can also drag new fields from the field palette directly to a specific position on the canvas.

Click the Save button to persist your form changes. The entire field configuration is saved atomically, so your form is always in a consistent state.

Use Preview mode to see exactly how your form will appear to customers on your storefront. Preview renders the form using the same layout and styling that applicants will see.

Each form has submission settings you can configure in the form editor:

• Terms and conditions — An optional checkbox requiring applicants to agree to your terms before submitting. You can enter your own terms text.
• CAPTCHA protection — Enable Google reCAPTCHA v3 to protect your form from spam and bot submissions. This runs invisibly in the background without requiring applicants to solve puzzles. Note: When enabled, Google reCAPTCHA may set third-party cookies. See our FAQ for details.
• Auto-approval rules (Growth plan and above) — Automatically approve applications that meet specific criteria. Two rule types:
  • VAT verified: auto-approve when the submitted VAT number is verified as valid via VIES
  • Email domain allowlist: auto-approve when the applicant's email matches one of your allowed domains
  Auto-approved applications go through the same process as manual approvals — customer creation, tags, email notifications, and Flow triggers all fire as normal. The application timeline shows "Auto-approved" as the actor.

Customize the page shown to customers after they submit their application. Each form has its own confirmation page settings, configured in the form editor's Confirmation page section.

• Confirmation heading — The main heading displayed on the confirmation page. Defaults to "Application Submitted".
• Success message — Shown below the heading. Customize this to match your brand voice. Defaults to "Thank you for your application. We will review it shortly."
• "What happens next" steps — A numbered list of up to 3 steps shown below the success message. Each step has a title and an optional subtitle. Use these to set expectations about your review process.

New forms come with three default steps:

1. We review your application
2. You'll receive an email with our decision
3. Next steps will be shared in the approval email

You can add, remove, and reorder steps using the arrow buttons. If you remove all steps, the "What happens next" section is hidden from customers entirely.

Tip: The global review timeframe setting in Settings can also appear as a step subtitle. For more control, configure steps directly on each form.

Control whether customers who previously applied can submit again. This is configured per-form in the form editor's Reapplication policy section. Three options are available:

• Allow reapplications (default) — Customers can resubmit applications at any time.
• Allow after 30 days — Customers must wait 30 days after their last application before reapplying.
• Do not allow reapplications — Customers who have already applied will be blocked from submitting again.

Every form has a Style tab where you configure the visual appearance of the registration form. Styling is available on Growth and Pro plans.

Getting started with styling

• Import from my store — Automatically detect your Shopify theme's colors and fonts (Growth+)
• Choose a preset — Pick from 7 pre-built themes: Clean Light, Dark Professional, Minimal, Bold, Classic, Warm, or Match My Store (Growth+)
• Start from scratch — Begin with sensible defaults
• Copy from another form — Reuse styling from an existing styled form (Growth+)

Color controls (Growth+)

• Form background and text colors
• Input field background, border, and text colors
• Button background and text colors
• WCAG contrast checking shows whether your color combinations meet accessibility standards

Typography (all plans)

Choose from 30+ Google Fonts grouped by category (sans-serif, serif, display, monospace).

Shape and layout (Growth+)

• Corner roundness (sharp to rounded)
• Form width (narrow to wide)
• Form shadow (none, subtle, medium, strong)
• Column layout — single or two-column form layout

Advanced styling (Pro plan)

• Fine-tune colors: heading color, link color, label color, placeholder text, button hover, focus ring, error colors
• Fine-tune typography: separate heading font, heading/body sizes, font weights
• Fine-tune shape: individual corner radius for inputs, buttons, and containers; container border width and color
• Fine-tune spacing: field gap, form padding, section gap, label gap
• Custom content: rich text header and footer with bold, italic, links, and lists
• Live preview: side-by-side preview panel with desktop/mobile toggle and draft vs saved comparison
• Undo/redo: step through style changes

Responsive behavior

All forms are fully responsive and adapt to mobile screen sizes automatically, regardless of your plan.

You can create multiple registration forms, each with its own unique registration URL. This is useful when you need different application processes for different customer types (e.g., wholesalers vs. resellers).

The number of forms you can create depends on your plan:

Each form gets a unique URL that you can share with prospective B2B customers or link to from your storefront.