The redesigned Order Form in ZipLeads makes it easier to create flexible, branded checkouts 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.
You can also add CRM custom fields, customise products and order bumps, and control how your checkout looks using advanced styling options. This article explains how to set up the new Order Form, customise its features, and migrate existing order forms when you're ready.
What is the new Order Form?
The new Order Form is a single checkout element. It lets you collect customer details, show products and take payments through a checkout you can customise. You no longer need separate One-Step and Two-Step elements. Instead, you choose between three layouts within the same element, and you can change them whenever you like.
The redesigned Order Form has one central workspace for customising your checkout. Contact fields, products, order bumps, checkout behaviour, shopper-facing content and visual styling are all in one place. A live preview shows your changes next to the settings, so you don't have to keep switching between panels.
You can also collect extra customer details using supported CRM custom fields. Both the Order Form and its order bumps have their own styling options.
Key benefits of the new Order Form
The redesigned Order Form gives you more control over how customers check out and how your checkout pages match your brand. Layout, fields, product settings and visual design are all in one workspace, so you can make changes without rebuilding your forms.
Three flexible checkout layouts: Switch between One-step, Two-step and Split layouts. Your existing fields, products, content and styling are kept.
Central configuration: Manage checkout settings, shopper-facing content, products and styling from one workspace with a live preview.
CRM custom fields: Collect extra customer details at checkout using supported CRM custom field types.
Advanced styling options: Choose from six design presets and customise more than 80 styling properties to match your brand.
Customisable order bumps: Design order bumps separately using their own presets and detailed appearance controls.
Flexible product management: Add and manage products, adjust quantity options, show product details and control whether coupons can be used.
Customisable shopper experience: Edit field labels, placeholders, validation messages, checkout buttons and other customer-facing text.
Optional migration of older forms: Convert eligible existing order forms to the new experience without automatically changing your other forms.
How to set up the new Order Form
Setting up your form properly makes sure your checkout uses the right layout, collects the right customer details, shows the right products and gives customers a consistent experience. Before you publish, make sure the feature is turned on, configure the Order Form, and test the published checkout.
Step 1: Make sure the new Order Form is turned on
The redesigned Order Form is a Labs feature called Brand New Order Forms with New Layouts and Custom Fields. If you can't see the new Order Form in your builder, contact the ZipLeads support team and ask them to activate it for your account.
Step 2: Add an Order Form to your page
Go to Sites → Funnels or the website builder.
Open the funnel or website that contains your checkout page.
Select the page you want to edit.
Open the page builder.
Click Add Elements.
Find and add the Order Form element.
Select the element and click Customize order form.
The Order Form customisation workspace opens, where you can set up your checkout.
Step 3: Choose your checkout layout
In the Order Form customisation workspace, open Steps.
Select one of these layouts:
One-step
Two-step
Split
Check the layout in the live preview.
Switch between layouts as needed until you find the best arrangement for your checkout.
Your fields, products, order bumps, content and styling stay with the Order Form when you change layouts.
Step 4: Configure contact fields
Open Contact fields.
Review the standard contact fields.
Show or hide supported fields as needed.
Set fields as mandatory where available.
Reorder fields to control where they appear.
Choose full-width or half-width arrangements.
Use the custom field picker to add supported CRM custom fields.
Check the updated form in the preview.
Full Name and Email are always required. If a custom field you need doesn't exist in the CRM yet, create it in your Custom Fields settings before you select it in the Order Form.
Step 5: Configure products
Open Products.
Search for the products and prices you want to offer.
Add the products you need.
Review the product rows.
Edit, duplicate, reorder or remove rows as needed.
Turn on multiple quantities where it makes sense.
Set maximum quantity limits.
Choose whether to show product images and descriptions.
Set up multi-product selection if you need it.
Turn on coupon entry if you want customers to be able to apply eligible discounts.
Important: Changes to funnel-step products may affect other Order Forms on the same step. Check the existing products before you make changes.
Step 6: Configure order bumps
Open Order bump.
Set up the product you want to offer as an extra purchase.
Enter the order bump headline.
Add supporting text.
Set an image override if needed.
Set whether the bump starts selected or not.
Choose one of the bump styling presets.
Customise the appearance using the bump's own styling controls.
Check the bump in the checkout preview.
Step 7: Configure checkout options
Open Checkout options.
Review the checkout behaviour settings.
Set the options you need, such as coupons, terms and other supported checkout behaviours.
Make sure the settings suit the products and purchase experience you're creating.
Check these settings carefully before you publish, especially if your checkout includes subscriptions, discounts, taxes or extra purchase options.
Step 8: Customise checkout content
Open Content.
Edit step headlines and supporting text.
Customise field labels and placeholders.
Update validation messages.
Customise product summary labels and payment-related text.
Update the checkout button text.
If you're using Two-step, customise the step navigation labels.
Check the wording in the preview.
Keep your wording short and clear so customers understand each stage of checkout.
Step 9: Apply a theme and customise styling
Open Theme & style.
Select a theme preset.
Set your brand colours.
Adjust typography and input styling.
Customise buttons, product presentation and step indicators.
Adjust sizing, spacing and alignment for each device where available.
Check the appearance in the live preview.
Go back to the Order bump styling controls if you want to adjust the bump separately.
Step 10: Save, publish and test
Save your Order Form configuration.
Save and publish the checkout page.
Open the published page.
Check that the correct layout is showing.
Confirm that standard and custom fields appear as expected.
Check product selection, prices and quantity controls.
Check how coupons and order bumps behave.
Check required field validation and checkout navigation.
Test the checkout using your payment provider's supported test process.
Check the checkout on both desktop and mobile.
Important: The builder preview uses placeholder payment fields and calculates totals locally. Always check the published checkout rather than relying only on the preview.
Order Form layouts
The new Order Form has three layouts for different checkout experiences. Choosing the right one helps you organise contact details, payment details and product summaries to suit how you want customers to buy.
One-step layout: The One-step layout shows the whole checkout on a single screen. Customers enter their contact details, review their products and pay without moving between steps.
This layout is handy when you want to keep buying simple and show everything together.
Two-step layout: The Two-step layout splits checkout into two stages.
Step 1: Collects and checks the customer's contact details.
Step 2: Shows the payment stage so the customer can complete the purchase.
Contact details from the first stage are carried through to the payment stage. This layout is handy when you want customers to give their contact details before they pay.
Split layout: The Split layout shows the checkout form and the offer summary side by side. Customers can see product information next to the form.
If the element becomes too narrow, the columns automatically stack to fit the space.
Important: You can change layouts without recreating the Order Form. Your fields, products, order bumps, shopper-facing content and styling carry over when you switch layouts.
Contact fields and CRM custom fields
Contact fields decide what customer details you collect at checkout. With the redesigned Order Form you can customise the standard contact fields and add supported CRM custom fields, so you can collect details specific to your business or offer.
Standard contact fields
The Order Form supports nine standard fields:
Full Name
Email
Phone
Company
Address
City
State/Province
Postal Code
Country
You can customise how the standard fields are arranged and shown using these options:
Field visibility: Show or hide fields depending on the details you want to collect.
Required fields: Make supported fields mandatory at checkout.
Field order: Reorder fields to control where they appear in the form.
Field width: Show fields at full width or half width to make the best use of space.
Important: Full Name and Email are always required because checkout can't be submitted without them. Address-related fields work as a smart address group that rearranges itself to fit the available width.
CRM custom fields
CRM custom fields let you collect details beyond the standard checkout fields. For example, you might ask for a preferred service date, extra instructions, or details about the product or service being purchased.
The Order Form supports these CRM custom field types:
Text
Numeric
Phone
Monetary
Large text
Date
Option-based fields, such as dropdowns and other selections
File upload
Signature
You can add custom fields using the field picker in the Order Form customisation workspace. Custom field settings, including dropdown choices and other option values, are managed in the CRM. The Order Form uses those settings when it shows the fields to customers.
To create or manage custom fields, see Creating and Managing Custom Fields for Better Data Organization.
Products and checkout options
Product settings decide what customers can buy and how product information appears at checkout. The new Order Form gives you controls for product selection, quantities, display options and discount entry, while keeping the existing checkout features.
Product management
The Products settings let you manage the products and prices on your checkout. You can:
Search for and add products and prices.
Edit existing product rows.
Duplicate product rows.
Reorder products.
Remove products.
Let customers choose multiple quantities.
Set the maximum quantity allowed.
Show or hide product images.
Show or hide product descriptions.
Turn multi-product selection on or off.
Important: Products belong to the funnel step, not to an individual Order Form. Changing the products on a funnel step can affect every Order Form on that step.
Checkout options
Checkout options control how customers use your form and complete their purchase. The redesigned Order Form keeps supported checkout features, including:
Coupon codes
Taxes
Gift cards
Recurring prices
Sticky Contact
Terms and Conditions
Post-purchase redirects
You can also turn coupon entry on or off in the checkout configuration. If you want customers to apply discounts, create the coupons in ZipLeads and set up who they apply to.
For more information, see Getting Started with Coupons.
Order bumps
Order bumps let you offer an extra product during checkout. The redesigned Order Form has separate order bump styling controls, so you can customise how these offers look without changing the styling of the main checkout form.
For more details, see Order Bump Configuration.
Themes and styling
Themes control how the Order Form looks, including colours, typography, buttons, input fields, spacing and product presentation. The redesigned styling system gives you more control over your checkout design, while letting you start from a ready-made theme.
Important: The builder preview is for visual setup only. Payment fields are shown as placeholders, and preview totals are calculated locally. The amounts in the builder preview may differ from those on the published checkout.
Customising Order Form content
Checkout content helps customers understand what to enter, what they're buying and how to complete their order. The Content settings let you customise customer-facing wording without custom code. Use clear labels and short instructions so customers know what's needed before they submit their order.
Migrating existing order forms
Your existing order forms keep working without being migrated. The new Order Form offers optional migration for eligible older elements, so you can move to the redesigned experience one form at a time while keeping your existing checkout setup.
Undoing a migration
Migration is a single action you can undo. If you decide not to keep the migrated version, use the builder's Undo action to restore the original element.
Custom CSS considerations
Custom classes and custom CSS are kept during migration. However, the redesigned Order Form uses different underlying markup. CSS selectors written for the old form structure may no longer match the migrated element. Review and test any custom CSS after migrating to make sure the published checkout looks right.
Important: Migration is optional, happens one eligible element at a time, and has no deadline. Order forms you don't migrate keep working with their existing settings.
Frequently Asked Questions
Q: Do I need to migrate all my existing order forms to use the new Order Form?
No. Existing order forms keep working without migration. You can create a new Order Form and leave your older elements as they are.
Q: Can I migrate some order forms and leave others unchanged?
Yes. Each eligible element is migrated on its own. You can migrate one Order Form and leave the others as they are.
Q: What happens if my custom CSS looks different after migration?
The new Order Form uses different markup from the old element. Your custom CSS and custom classes carry over, but selectors that target the old markup may need updating. Check the published checkout after migrating.
Q: Why does the total in the builder preview differ from the published checkout?
The builder calculates preview totals locally and doesn't reproduce every live checkout calculation. Use the published checkout to check actual pricing, including taxes and discounts.
Q: Where do I update the choices in a custom dropdown field?
Update the choices in the CRM custom field settings. The Order Form reads the options from the CRM rather than keeping its own list.
Q: Why did a product change affect another Order Form on the same funnel step?
Products belong to the funnel step, not to a specific Order Form element. Changing products on that step can affect every Order Form on it.
Q: Can I style order bumps differently from the rest of the checkout?
Yes. Order bumps have their own styling controls and presets, so you can customise them separately from the main Order Form.
Q: Why can't I find the redesigned Order Form in the builder?
The Brand New Order Forms with New Layouts and Custom Fields Labs feature may not be turned on for your account. Contact the ZipLeads support team and ask them to activate it.
Q: Does switching from Two-step to Split remove the information I've configured?
No. Switching layouts keeps the Order Form's fields, products, order bumps, shopper-facing content and styling. Review the new layout afterwards to make sure it suits your needs.