Once your marketing brings people in, an order form is how you make the sale. An order form is a regular Ontraport form with payment added, so if you haven't watched the Forms lessons in the Ontraport for marketing course, start there. In this lesson, you'll build an order form, add the elements it needs, connect your product and payment settings, and style it.
You can build an order form on an Ontraport Page, which handles the PCI compliance step for you, or in an Ontraform, for another website or a pop-up. If you use an Ontraform on another site, that site still needs to meet PCI requirements. In this lesson, we'll use Pages.
Click Pages in the top navigation, then New page. Start from scratch, or pick a template. To add a block, hover over the grey plus icon and click Add block. Build your own from a layout of columns and rows, or browse the pre-designed blocks and filter by type. If one is close to what you want, start with it and edit it.
Everything you need is in the Form and Sales elements. An order form uses regular form fields and a submit button, plus sales elements like Credit Card and Order Summary.
Drag in the Credit Card element. It holds the card details most payment gateways need: the name on the card, the card number, the expiration month and year, and the CVC. The fields load in a secure frame that meets PCI requirements.
The name and the CVC are the only optional fields, and you can turn them off in the element's settings. Gateways differ in what they ask for, so check what yours needs.
If you use Stripe or Stripe Token, you can use the Stripe Payment Element instead. It shows each buyer the payment methods that fit them, like digital wallets, Stripe Link, and pay-over-time options such as Klarna and Affirm. It replaces the Credit Card element, so it can't go in a block that already has card fields, and you can't use it while Stripe Tax is on. It's available on Plus and above.
ACH and Cash App aren't supported. Which methods each buyer sees depends on what you turn on in your Stripe account. For the full setup, including wallets and testing, watch Set up Stripe checkout payment methods, right after this lesson.
Next, add Form Field elements for the buyer's details: at least their name and email. Then add any custom fields your business needs. An auto mechanic, for example, might ask for the car's make and model.
Then add the Order Summary element. It shows customers what they're buying and what they'll pay: the items, the subtotal and the total. It isn't strictly required, but it's recommended, and customers need it to enter coupon codes.
In its settings, choose what information to show. Pick a language to translate its labels, and edit the trial label for products with a trial.
Now connect your product. Hover over the order form block, click the gear icon, and choose Payment Settings. You can also hover over the order summary and click Add / Edit Product. Click Add product, choose your product, and set the quantity. You can change the price right on the form. Setting up products, offer types, and taxes and shipping each have their own lesson.
Your default payment gateway is added automatically. To use a different one, click Add and choose it. Each order form can have one credit card gateway.
You can now set up order forms in other currencies. Turn on Multi-currency Support under your profile icon, then Administration, then Advanced Features. Then choose from the Currency dropdown. This works with Stripe only, on order forms built with Pages. The number stays the same and only the symbol changes, so double-check your price.
Under Invoice receipt, choose the default receipt, a custom template, or no receipt.
Every form needs a Submit Button. You can't publish the page without one, so keep it in the same block as your form fields. Click it, then Form Settings at the bottom, to choose your thank-you page and opt-in settings.
If your gateway needs a billing address, add the Billing Address element. It adds six fields: address, address 2, city, state, country and zip code. That information goes to your gateway to verify the card.
If you sell physical products, add Shipping Address. It adds the same six fields for shipping, plus a checkbox for when the shipping address is different from the billing address.
To let customers pay with PayPal, connect the PayPal Standard gateway to the form and add the PayPal Standard element. It adds a Pay with PayPal button, and depending on the buyer, options like Venmo and Pay Later. You can offer it alongside your credit card gateway, so customers can choose. PayPal Standard can't run trials, payment plans, subscriptions or upsells through Ontraport, so use it for one-time purchases. PayPal Payments Pro is different: it takes credit cards right on the form and doesn't use a PayPal button.
You'll also see Order Bump and Upsell elements here. One rule: never put an upsell on the same page as the order form. Each one has its own lesson in this section.
To put fields side by side, use columns and rows. Style the first form field on the Style tab, and the rest follow it. Then click Publish, then Save & Publish, and test your form before you take real orders.
So: build your order form on an Ontraport Page with a card element, contact fields, an order summary and a submit button, connect your product, gateway and receipt, then add the extras you need and style it. Next up: setting up products, so you have something to sell.