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. Each option has three fields: Label (what applicants see), Value (what gets stored), and an optional Customer tag. When an applicant selects an option that has a Customer tag and their application is approved, that tag is automatically applied to their Shopify customer account — alongside the baseline B2B Approved tag and any Approved tags configured in Settings → Customer Tags. Tags are limited to 40 characters and cannot contain commas.

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.

Call-to-action button — Optionally add a CTA button to the confirmation page. Check "Add a call-to-action button" to reveal the button text and URL fields. When enabled, a full-width primary button renders above the "Back to store" link, guiding customers to a specific page (e.g., your catalog or a welcome page). When no CTA is configured, the existing "Back to store" link renders unchanged.

Translations — All confirmation strings (heading, success message, "What happens next" steps, CTA button text, and the terms-acceptance checkbox label) are translatable through the Manage Translations page. Default strings — including the CTA text "Continue shopping" and the default terms label "I agree to the terms and conditions" — ship with translations for all 41 built-in locales, as do storefront chrome strings ("Back to store", submission-limit and form-unavailable banners, and the client-side validation error). The translations page marks any field pre-filled from the pack with the hint "Auto-translated from language pack". Type your own value to override the default; clear the field to restore the auto-fill.

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.

B2B Onboard supports multilingual registration forms. You can enable additional languages and translate all field labels, placeholders, and help text for each language. Multi-language forms are available on Growth and Pro plans.

Enabling languages

In the form editor's Build tab, the Languages card sits above the form builder. Click Add language and search from over 40 supported languages. Each enabled language appears as a tag that you can remove. English is always present and cannot be removed. Save the form to persist your language selection.

Built-in Language Pack

B2B Onboard includes a built-in language pack covering 41 languages with translations for common B2B registration fields (company name, contact details, tax IDs, business type, and more). When you enable a language, matching translations are auto-populated instantly — no API calls or waiting required. New fields added to the form also receive translations automatically for all enabled languages.

Fields not covered by the pack stay empty for manual input. You can always edit or override pack translations manually.

Managing translations

Once at least one additional language is enabled, a Manage Translations button appears in the Languages section. Click it to open the translation management page, where you can:

• Select a language from the dropdown to translate into.
• View progress — a progress bar counts every translatable string for the selected language, including form fields and confirmation page strings (heading, success message, "What happens next" steps, and CTA button text).
• Confirmation page card — a dedicated card at the top of the page lets you translate every confirmation string, including the terms-acceptance checkbox label when terms are required. Default strings (heading, success message, steps, CTA "Continue shopping", and the default terms label) are pre-filled from the built-in language pack and marked with the hint "Auto-translated from language pack"; type your own value to override, or clear the field to restore the auto-fill.
• Side-by-side editing — each field shows the English (default) text on the left and the target language fields on the right. Fill in translations for labels, placeholders, and help text.
• Filter untranslated — use the tabs to focus on strings that still need translations.

Click Save when done. A success banner confirms your translations have been saved.

How translations work on the public form

When a customer visits your registration form, B2B Onboard detects their browser language. If translations exist for that language, the form displays in the customer's preferred language. Fields without translations fall back to the English default.

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.