.png?fit=max&auto=format&n=EQK5eX9kTD8NzWwA&q=85&s=878008bf159fcc4964d0c0d508b6e400)
Order form types
HoopAI supports two order form layouts:One-step order form
The entire checkout experience — contact details, product selection, and payment information — appears on a single page. One-step forms reduce friction by keeping everything visible at once and work well for low-ticket offers where the purchase decision is straightforward.Two-step order form
Contact information (name, email, phone) is collected on the first step, and payment details are collected on the second. This approach captures the lead before they enter payment information, so if a visitor abandons at the payment step you still have their contact details for follow-up.Adding an order form to a funnel step
Open the funnel step in the builder
Navigate to Sites > Funnels, open your funnel, and click Edit Page on the step where you want the order form.
Add the order form element
In the left panel, click Add Elements and scroll to the Commerce section. Drag either the 1-Step Order Form or 2-Step Order Form element onto the canvas.
Assign a product
Click the order form element to open its settings. Under Products, click Add Product and select from your existing products. You can add multiple products to allow product selection on the checkout page.
Configure payment fields
Toggle the fields you want to collect: name, email, phone, company, address, and custom fields. Mark required fields to enforce completion before submission.
Set the next step
Under On Submit, choose what happens after a successful purchase — typically the visitor is redirected to the next step in the funnel (for example, an upsell or thank-you page).
Product configuration on order forms
Each product assigned to an order form can be configured with:| Option | Description |
|---|---|
| Product name | Displayed on the order form and receipt |
| Price | The charge amount; can be one-time or recurring |
| Quantity | Allow buyers to select quantity if applicable |
| Bump offer | Add an order bump (checkbox upsell) to the form |
| Trial period | Offer a free or discounted trial for subscription products |
Order bumps
An order bump is a checkbox offer displayed directly on the order form — typically a small complementary product or add-on. Buyers can add it to their order with a single click before checkout. To add an order bump:- In the order form element settings, click Add Bump Product.
- Select the product to offer as a bump.
- Write a short bump headline and description that appears next to the checkbox.
- Set the bump price (can differ from the product’s standard price).
Payment modes
The funnel-level Payment Mode setting (found in the funnel’s Settings tab) controls whether order forms process real or test transactions:- Test mode — transactions are simulated; no real charges occur. Use this during setup.
- Live mode — real payments are processed through your connected payment gateway.
Coupon codes
If you have created coupon codes in Payments > Coupons, buyers can enter them at checkout on the order form. Enable the coupon field in the order form element settings.After purchase: what happens next
When a purchase is completed:- A new contact (or existing contact) is created or updated in the CRM with the buyer’s details.
- A transaction record is created in Payments > Transactions.
- Any automation workflows triggered by the product purchase will fire.
- The visitor is redirected to the next step defined in the order form’s On Submit setting.
Order forms require a connected payment gateway (such as Stripe or PayPal) configured in Settings > Payments. Without a connected gateway, the order form element will not process transactions.