Find out how to create an order form in Ontraport so you can start collecting payments online.
error
Check out this article for more information.
Feature updates: You can now auto-generate taxes on your order forms based on your customer’s location using our TaxJar integration.
Check out this article for more information.
Home > Ontraport for payments > Creating order forms > Creating an order form
Home > Creating order forms > Creating an order form
Creating an order form
Course Instructor
- How to create a page and add a block for collecting payments
- What fields to include on your order form
- How to style your form to fit your brand and product
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
As fun as marketing is, eventually there comes a time when you need to actually sell the stuff and make the money. Crazy concept, I know. In this video, I’ll give you a tour of Ontraport order forms.
Order forms are the same as other forms in Ontraport – and we have a whole section of lessons about Forms in the Ontraport for Marketing course, so definitely check that out first. What makes order forms different is only that they have payment functionality.
In this video I’ll show you how to build an order form in 5 steps.The first step is creating the page. Second is adding your block or using a prebuilt one. Third is adding the required elements. Fourth is adding optional elements, and finally you'll polish the form styling
You’ll see where you can choose from prebuilt order forms or what you need to create your own custom order form. You’ll have plenty of flexibility – so let’s dig in!
Let me start by saying that order forms can be built in a couple of ways. You can build a standalone order form using the Ontraform builder. Or you can build an order form directly into an Ontraport Page. In this video I’ll use Ontraport Pages because that’s the most powerful editor, but just know – you’ve got options.
So, first you’ll create a new page by navigating to Pages and then Create New Page. Use a prebuilt order page template for a headstart on the design, or create one from scratch.
And just like page templates, there are block templates too. These let you add prebuilt order forms right on your page. They are a great option if your goal is to quickly build an order page. You might even use them to get inspiration for your order form’s design.
You can edit your prebuilt blocks as soon as you add them to your page, just like any other page element. To add prebuilt blocks to your pages:
From your page editor, click add New Block.
Click “Pre-designed blocks,” then select “order forms” from the left sidebar. Select the prebuilt form that looks best to you.
My time-saving tip here is to find something that looks similar to what you want, then just edit the parts of it you want to change. Super easy. But since you’re a control freak, I’ll show you how to build an order form block from scratch.
Keep in mind, we have an entire course section dedicated to building pages and blocks. So dig through that to learn about every little button and detail you can tweak on your pages.
In the Form and Sales section of elements, you’ll see a bunch of different element types you can drag into your new form block. Some are for both order forms regular forms, like form fields and submit buttons. A regular ol’ form morphs into an order form when you start dragging in elements like credit card and order summary.
Certain elements are required when building an order form, and others are optional. I’ll run through the required ones first:
You have to have all the credit card elements: Drag and drop Name on Card, Card Number, Expiration Month, Expiration Year, and CVC to automatically add them to your form. These are the minimum required fields that most payment gateways need to process a transaction.
But actually, gateways have different requirements. Some might only need Card Number, CVV, and Expiration Date, while others need Name and Address. Check out what yours requires before you decide what to include on your order form.
Next, consider the Order summary element. This one isn’t actually required — your order forms can still function without an order summary — but people usually expect to see it.
Your order summary tells your customers what they are buying and how much they’ll be charged. I’d suggest adding it unless you have a good reason not to.
It’s also where you can show information about your more complex offers. Let’s say you offer a trial period... Your order summary will show the trial price and duration as well as the regular price.
And, finally, if you want customers to be able to adjust the quantity of the products they’re ordering, this order summary is a must. Without it they won’t be able to modify their order quantity, which might annoy some potential customers. The same is true for payment plans. Without the summary, they won’t be able to select a plan.
When you drag in an order summary, you’ll see these elements: Product and Payment Settings, Header, Order items, Quantity, Price, Separator line, Subtotal, Coupon code, Shipping,Tax and Total. Toggle off any of them to adjust the information you want your order summary to show.
I know it feels like we’re going down an order form rabbit hole, but it’s worth talking about Product and Payment Settings in a little more detail.
If you’re using an order summary on your form, this is your first stop – click the “Edit Product Settings” button to bring up this screen.
From here you’ll add whatever product it is you’re selling on this form. Click “Add Product” and select it from the drop-down. If you don’t have products yet, just click “Add New Product,” add the product name, and click “Save as Draft.”
You can edit the quantity here.
Set the price for your product here. Toggling this button lets you charge tax and will bring up this window over here. Taxes is a whole other enchilada, so watch our video on Taxes and shipping to figure out if you should turn this on or not.
Mouse over this gear to mess with things like trial period, offer a subscription, payment plans, quantity adjustments, and shipping.
We cover each of these in detail in our video on Types of offers, so refer to that for more info!
Down here you select your payment gateway by clicking add, then selecting your gateway from the dropdown. If you don’t have a gateway, check out the video on Gateway setup!
And here you can choose your invoice template. Once again, we have a whole video on this called Invoices. You can also select your order summary language here so your text like “Item” and “Today’s total” will be translated to the language you prefer.
Next, add any additional form fields that make sense for your business. Obviously you want to add First Name, Last Name, and Email on your order form, so go ahead and do that. Consider custom fields that would be useful. For example, if you’re an auto mechanic you might want to ask for the make and model of the car you’ll be servicing.
Now add your submit button, which of course is required to make your form work. Ontraport won’t even publish your page without it, so you’ll be alerted if you forget this.
Once you’ve added it, you can click on the order form element to view its settings. Here you can edit those product settings we covered in the order summary earlier. If you aren’t using an order summary, here’s where you’d find that stuff. You can also get to the form settings from here to set things like thank you pages and opt-in settings.
There are some optional fields that you might want to add in certain cases. Add billing address – the address associated with the credit card your customer is using – if your payment gateway requires it. And definitely include shipping address if you’re delivering physical goods!
When you add billing address or shipping address elements, Address, Address 2, City, State, Country and Zip Code fields are automatically added to your form. To remove any of these fields such as “Billing Address 2,” hover over the field and click the trash icon.
Moving on to the PayPal button.
The first thing to know about PayPal is that there are Basic and Payflow Pro account types. Basic will actually send customers over to PayPal to process the payment, then come back.
If you’re using Basic PayPal and want payment exclusively via PayPal, you don’t need the credit card fields I just discussed. They’ll handle all that on their page.
Note that you cannot use standard PayPal for any offers that include things like trial periods or subscriptions. This is because you cannot store card details for charging later using this method. This can limit your options for managing cancels and other automations as well.
Generally speaking, you should consider the standard “Pay with PayPal” button only in situations where you’re charging a one-time fee for something. You have very basic functionality here. But you can add a credit card payment gateway alongside your PayPal standard payment gateway to give your customers options.
On the other hand, Payflow Pro is a payment gateway much like Authorize.net or Stripe, so it doesn’t need this PayPal button element. You’d just select Payflow Pro as your gateway and you’re all set.
It’s worth reminding you at this point that you’ve got some nice styling options in Ontraport. Because when you just drop all these different elements on the page, it can honestly come out looking a little funky. So you can make a few adjustments here.
If you’re using a block with more than one column, you can drag and drop your fields around to get them to appear side by side or all on the left or right side of your page.
Additionally, you can mess with the padding and spacing of the individual fields, or the entire row or column by navigating to the Position tab. They should match whatever your default styling is for this page. If you want to change up your font size, color, etc. you can do that in the Style tab. For more on making this thing really sparkle, check out our videos on Pages and Forms.
If you’re still with me, you’re basically an order form expert now! You’re ready to jump in and start making your own. In the near future – if you keep watching – I’ll cover setting up your products!
Order forms are the same as other forms in Ontraport – and we have a whole section of lessons about Forms in the Ontraport for Marketing course, so definitely check that out first. What makes order forms different is only that they have payment functionality.
In this video I’ll show you how to build an order form in 5 steps.The first step is creating the page. Second is adding your block or using a prebuilt one. Third is adding the required elements. Fourth is adding optional elements, and finally you'll polish the form styling
You’ll see where you can choose from prebuilt order forms or what you need to create your own custom order form. You’ll have plenty of flexibility – so let’s dig in!
Let me start by saying that order forms can be built in a couple of ways. You can build a standalone order form using the Ontraform builder. Or you can build an order form directly into an Ontraport Page. In this video I’ll use Ontraport Pages because that’s the most powerful editor, but just know – you’ve got options.
So, first you’ll create a new page by navigating to Pages and then Create New Page. Use a prebuilt order page template for a headstart on the design, or create one from scratch.
And just like page templates, there are block templates too. These let you add prebuilt order forms right on your page. They are a great option if your goal is to quickly build an order page. You might even use them to get inspiration for your order form’s design.
You can edit your prebuilt blocks as soon as you add them to your page, just like any other page element. To add prebuilt blocks to your pages:
From your page editor, click add New Block.
Click “Pre-designed blocks,” then select “order forms” from the left sidebar. Select the prebuilt form that looks best to you.
My time-saving tip here is to find something that looks similar to what you want, then just edit the parts of it you want to change. Super easy. But since you’re a control freak, I’ll show you how to build an order form block from scratch.
Keep in mind, we have an entire course section dedicated to building pages and blocks. So dig through that to learn about every little button and detail you can tweak on your pages.
In the Form and Sales section of elements, you’ll see a bunch of different element types you can drag into your new form block. Some are for both order forms regular forms, like form fields and submit buttons. A regular ol’ form morphs into an order form when you start dragging in elements like credit card and order summary.
Certain elements are required when building an order form, and others are optional. I’ll run through the required ones first:
You have to have all the credit card elements: Drag and drop Name on Card, Card Number, Expiration Month, Expiration Year, and CVC to automatically add them to your form. These are the minimum required fields that most payment gateways need to process a transaction.
But actually, gateways have different requirements. Some might only need Card Number, CVV, and Expiration Date, while others need Name and Address. Check out what yours requires before you decide what to include on your order form.
Next, consider the Order summary element. This one isn’t actually required — your order forms can still function without an order summary — but people usually expect to see it.
Your order summary tells your customers what they are buying and how much they’ll be charged. I’d suggest adding it unless you have a good reason not to.
It’s also where you can show information about your more complex offers. Let’s say you offer a trial period... Your order summary will show the trial price and duration as well as the regular price.
And, finally, if you want customers to be able to adjust the quantity of the products they’re ordering, this order summary is a must. Without it they won’t be able to modify their order quantity, which might annoy some potential customers. The same is true for payment plans. Without the summary, they won’t be able to select a plan.
When you drag in an order summary, you’ll see these elements: Product and Payment Settings, Header, Order items, Quantity, Price, Separator line, Subtotal, Coupon code, Shipping,Tax and Total. Toggle off any of them to adjust the information you want your order summary to show.
I know it feels like we’re going down an order form rabbit hole, but it’s worth talking about Product and Payment Settings in a little more detail.
If you’re using an order summary on your form, this is your first stop – click the “Edit Product Settings” button to bring up this screen.
From here you’ll add whatever product it is you’re selling on this form. Click “Add Product” and select it from the drop-down. If you don’t have products yet, just click “Add New Product,” add the product name, and click “Save as Draft.”
You can edit the quantity here.
Set the price for your product here. Toggling this button lets you charge tax and will bring up this window over here. Taxes is a whole other enchilada, so watch our video on Taxes and shipping to figure out if you should turn this on or not.
Mouse over this gear to mess with things like trial period, offer a subscription, payment plans, quantity adjustments, and shipping.
We cover each of these in detail in our video on Types of offers, so refer to that for more info!
Down here you select your payment gateway by clicking add, then selecting your gateway from the dropdown. If you don’t have a gateway, check out the video on Gateway setup!
And here you can choose your invoice template. Once again, we have a whole video on this called Invoices. You can also select your order summary language here so your text like “Item” and “Today’s total” will be translated to the language you prefer.
Next, add any additional form fields that make sense for your business. Obviously you want to add First Name, Last Name, and Email on your order form, so go ahead and do that. Consider custom fields that would be useful. For example, if you’re an auto mechanic you might want to ask for the make and model of the car you’ll be servicing.
Now add your submit button, which of course is required to make your form work. Ontraport won’t even publish your page without it, so you’ll be alerted if you forget this.
Once you’ve added it, you can click on the order form element to view its settings. Here you can edit those product settings we covered in the order summary earlier. If you aren’t using an order summary, here’s where you’d find that stuff. You can also get to the form settings from here to set things like thank you pages and opt-in settings.
There are some optional fields that you might want to add in certain cases. Add billing address – the address associated with the credit card your customer is using – if your payment gateway requires it. And definitely include shipping address if you’re delivering physical goods!
When you add billing address or shipping address elements, Address, Address 2, City, State, Country and Zip Code fields are automatically added to your form. To remove any of these fields such as “Billing Address 2,” hover over the field and click the trash icon.
Moving on to the PayPal button.
The first thing to know about PayPal is that there are Basic and Payflow Pro account types. Basic will actually send customers over to PayPal to process the payment, then come back.
If you’re using Basic PayPal and want payment exclusively via PayPal, you don’t need the credit card fields I just discussed. They’ll handle all that on their page.
Note that you cannot use standard PayPal for any offers that include things like trial periods or subscriptions. This is because you cannot store card details for charging later using this method. This can limit your options for managing cancels and other automations as well.
Generally speaking, you should consider the standard “Pay with PayPal” button only in situations where you’re charging a one-time fee for something. You have very basic functionality here. But you can add a credit card payment gateway alongside your PayPal standard payment gateway to give your customers options.
On the other hand, Payflow Pro is a payment gateway much like Authorize.net or Stripe, so it doesn’t need this PayPal button element. You’d just select Payflow Pro as your gateway and you’re all set.
It’s worth reminding you at this point that you’ve got some nice styling options in Ontraport. Because when you just drop all these different elements on the page, it can honestly come out looking a little funky. So you can make a few adjustments here.
If you’re using a block with more than one column, you can drag and drop your fields around to get them to appear side by side or all on the left or right side of your page.
Additionally, you can mess with the padding and spacing of the individual fields, or the entire row or column by navigating to the Position tab. They should match whatever your default styling is for this page. If you want to change up your font size, color, etc. you can do that in the Style tab. For more on making this thing really sparkle, check out our videos on Pages and Forms.
If you’re still with me, you’re basically an order form expert now! You’re ready to jump in and start making your own. In the near future – if you keep watching – I’ll cover setting up your products!
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified