Setting Up and Customizing the New Order Form

The redesigned Order Form in Captivation Hub makes it easier to build flexible, branded checkout experiences for your funnels and websites. With a single Order Form element, you can switch between One-step, Two-step, and Split layouts without rebuilding your checkout from scratch.

You can also add CRM custom fields, customize products and order bumps, and control the appearance of your checkout using advanced styling options.

Note: This feature must be enabled in Admin Settings first. If you don't see the new Order Form in the builder, ask your admin to activate it under Admin Settings > Labs > Brand New Order Forms with New Layouts and Custom Fields.

What Is the New Order Form?

The new Order Form is a unified checkout element that lets you collect customer information, display products, and accept payments through a customizable checkout experience. Instead of using separate One-Step and Two-Step elements, you now choose between three layouts within the same element and switch whenever you need to.

The redesigned Order Form brings contact fields, products, order bumps, checkout behavior, shopper-facing content, and visual styling together in one centralized workspace. A live preview updates alongside your settings so you can see changes without switching panels.

Step 1: Enable the New Order Form Feature

This feature is activated through a Labs setting. If you're an admin, you can enable it yourself. Otherwise, contact your admin to turn it on.

1. Go to Admin Settings.
2. Open Labs.
3. Search for Brand New Order Forms with New Layouts and Custom Fields.
4. Click Activate Feature.

Step 2: Add an Order Form to Your Page

1. Navigate to Funnels or the website builder.
2. Open the funnel or website containing your checkout page.
3. Select the page you want to edit.

4. Open the page builder and click Add Elements.
5. Locate and add the Order Form element.

6. Select the element and click Customize order form to open the configuration workspace.

Step 3: Choose Your Checkout Layout

1. In the Order Form customization workspace, open Steps.
2. Select One-step, Two-step, or Split.
3. Review the layout in the live preview. Switch between layouts until you find the best fit.

Your configured fields, products, order bumps, content, and styling stay with the Order Form when you change layouts.

Step 4: Configure Contact Fields

1. Open Contact fields and review the standard contact fields.
2. Show or hide fields as needed, make supported fields required, reorder fields, and set full-width or half-width widths.
3. Use the custom field picker to add supported CRM custom fields.

Full Name and Email are always required. If a required custom field doesn't yet exist in the CRM, create it in Custom Fields settings before adding it here.

Step 5: Configure Products

1. Open Products and search for the products and prices you want to offer.
2. Add products, then edit, duplicate, reorder, or remove rows as needed.
3. Enable multiple quantities, configure maximum quantity limits, and choose whether to display product images and descriptions.
4. Enable coupon entry if customers should be able to apply discounts.

Important: Product changes may affect other Order Forms on the same funnel step. Review existing products before making changes.

Step 6: Configure Order Bumps

1. Open Order bump and configure the product to offer as an add-on.
2. Enter the headline, add supporting text, and configure an image override if needed.
3. Set the initial selection state, choose a bump styling preset, and customize its appearance.

Step 7: Configure Checkout Options

1. Open Checkout options and review available checkout behavior settings.
2. Configure options such as coupons, terms, taxes, and other supported behaviors.

Review these settings carefully before publishing, especially when your checkout includes subscriptions, discounts, or additional purchase options.

Step 8: Customize Checkout Content

1. Open Content and edit step headlines, field labels, placeholders, validation messages, and button text.
2. If using Two-step, customize the step navigation labels.

Step 9: Apply a Theme and Customize Styling

1. Open Theme & style and select a theme preset.
2. Configure brand colors, typography, input styling, buttons, and device-specific sizing.
3. Return to Order bump styling controls if you want to adjust the bump separately.

Step 10: Save, Publish, and Test

1. Save your Order Form configuration, then save and publish the checkout page.
2. Open the published page and verify the layout, fields, products, and pricing display correctly.
3. Test checkout using your payment provider's test process.
4. Review the checkout on both desktop and mobile.

Important: The builder preview uses placeholder payment fields and locally calculated totals. Always verify the published checkout rather than relying on preview values.

Order Form Layouts

One-step: Displays the entire checkout process on a single screen. Customers enter their contact details, review products, and complete payment without navigating between steps.

Two-step: Divides checkout into two stages. Step 1 collects and validates contact information. Step 2 displays payment. Contact information carries forward automatically.

Split: Displays the checkout form and offer summary in side-by-side columns. When the element width becomes too narrow, the columns stack automatically to fit the available space.

You can change layouts at any time without recreating the Order Form — your existing fields, products, order bumps, content, and styling carry over.

Contact Fields and CRM Custom Fields

The Order Form supports nine standard fields: Full Name, Email, Phone, Company, Address, City, State/Province, Postal Code, and Country. You can show or hide fields, make them required, reorder them, and set them to full or half width.

CRM custom fields allow you to capture additional information at checkout. Supported types include text, numeric, phone, monetary, large text, date, option-based fields, file upload, and signature. Custom field configuration is managed in the CRM and the Order Form reads those settings when displaying fields to customers.

Migrating Existing Order Forms

Existing Order Forms continue to work without migration. The new Order Form provides an optional migration process for eligible legacy elements so you can adopt the redesigned experience one at a time, without affecting your other forms.

Migration is a single undoable action. If you change your mind, use the builder's Undo action to restore the original element. Note that the redesigned Order Form uses different underlying markup, so custom CSS selectors written for the legacy form may need to be updated after migration.

Frequently Asked Questions

Q: Do I need to migrate all my existing order forms?
No. Existing forms keep working without mandatory migration. You can create a new Order Form while leaving legacy elements unchanged.

Q: Can I migrate some forms and leave others?
Yes. Migration is done individually for each eligible element.

Q: What if my custom CSS looks different after migration?
The new Order Form uses different markup, so selectors targeting the original markup may need to be updated. Review the published checkout after migration.

Q: Why does the preview total differ from the published checkout?
The builder calculates preview totals locally. Always verify actual pricing on the published checkout.

Q: Can I style order bumps differently from the rest of the checkout?
Yes. Order bumps have their own styling controls and presets.

Q: Why can't I find the new Order Form in the builder?
Confirm that the feature has been activated in Admin Settings > Labs. If you don't have access to Admin Settings, contact your account admin.