Add Order Forms to Legacy ONTRApages

About Order Forms in ONTRApages

Note: This article covers our legacy ONTRApages builder. For details on our newest Page builder, see this article.

Applies to: ONTRAPORT Plus and above.

ONTRApages uses Order Form Blocks to create sales pages. Learn the steps to create persuasive order pages for all of your products and services.

Select a template with an Order Form block

Navigate to Pages and click the + New Landing Page button
Select Create New in the ONTRApages icon
Click Sales in the Palette to show ONTRApages with Order Form Blocks included
Click to select the ONTRApages template you like

You can also add an Order Form block to any other ONTRApages template.

Add an Order Form Block to Any ONTRApage

Select any ONTRApage template you like
Delete or hide any existing Smart Form blocks by hovering over the name of the block in the Palette and clicking the trash can icon or sliding the green slide icon off
Hover over the Canvas and select Add Block where you would like to insert the Order Form Block
Select the Order Form filter in the Palette and choose an Order Form block you like

About Order Forms

Note: Order forms must be published on a web page with SSL (HTTPS) in order to display. As of April 30, 2018, order forms on non-HTTPS pages will not display and will instead have a placeholder image displayed.

Edit Fields on your Order Form

Click on the Order Form Block and select Edit

OR
Click the + Add button to add fields to the form. Use the dropdown menu to select your desired field.
Click Create New Field to add a new field to the Contacts database.
Delete or hide fields by clicking the trashcan icon next to the field name in the Palette, or by sliding the green display toggle until it turns red. This does not delete the field from your Contacts database.

Add Products to Sell

Ensure you are in the Order Form block
From the Palette, click Product Grid or Payment Settings. Alternatively, you can click the Edit button in the product information section from the Canvas.
The product grid appears which is where you can add products, shipping rates, payment methods, taxes and invoices to send for this order.
Add products and setup payment structure. Click the Add / Edit Products button.
From the Canvas, select the items you'd like to sell on your Order Form by using the dropdown under the item column. Add multiple items by clicking the + Add Row button.
If the item hasn't been created, select the + Create New from the dropdown menu. Type in the item (product) name, press tab and submit the quantity and price.
Hover to the right of each item and select from the options
- Add a Trial period: To offer a product with a trial period (e.g., 1 week for $9.99 and $197 thereafter) adjust the settings.
- Make this a subscription: To offer a product with a continuous, recurring payments (e.g., $97 per month), adjust these settings.
- Offer a payment plan: To offer payment plans (e.g., one payment of $497 or 3 payments of $199 per month), adjust these settings. Tip: Offer multiple payment plans by clicking the + Add payment option link in the product grid.
- Allow buyer to change quantity: To allow customers to change quantities of items on the order form. select this option. Enter the default quantity, minimum and maximum allowed per order. The product grid will show an up/down arrow next to the quantity of the item so customers can tick the arrows up or down.
- Add to shipping/packing slip: For products that need to be shipped, select this option. Once complete, the product will show a small truck icon next to it in the product grid.
- Insert Coupon Code: To enable customers to enter a Coupon Code for a discount, select this option. Once complete, the product grid will show a row for Coupon Code.
- Remove this item: To remove a product from the order form, hover over the item row and select this setting. The item will disappear from the product grid.
- Charge on a later date: To charge all items on the order form on a later date, hover over the "Total" column and enter the date you'd like all charges to go through on. To remove this item, hover right and select remove charge on later date.
Move items into your preferred order by hovering left and clicking the arrows.
When finished adding items and payment structures, click Done.

For detailed information on payment structures, please see this article.
Add Shipping methods (optional): To set shipping rates for products, click + Add Shipping Method in the Palette. See this article for detailed information about adding shipping methods.
- Enter a name and price of your shipping type
- Add rules that declare when each shipping type is charged based on field values.
- Select whether or not you’d like to charge shipping each time on recurring orders.
Click the + Add A Payment Method from the Product Grid in the Palette. Use the dropdown to select a payment gateway integrated with ONTRAPORT. When compatible, you can select PayPal as well as any other credit card gateway (single purchase orders only).

If you do not have a payment gateway yet, select + Create New Gateway and enter the name "Dummy". Then click Save & Edit

You will be taken to the new Payment Gateway screen. Select Dummy Gateway from the Gateway dropdown and click Save at the top right

When you return to the Order Form Block screen, click the drop down and select the new Dummy Gateway you just created/
Click the + Add A Tax Option from the Palette if you want to add taxes to the order. See this article to learn how to add taxes.
Select Invoice Template (optional): Use the pulldown to select the invoice template customers will receive after purchasing. To create custom invoice templates, see this article.

Optional: Edit or Hide Form Elements (fields, graphics, etc.)

edit fields animation

Edit Section Titles and Toggle Items Off: Order Form blocks have section titles which can be edited for clarity. Locate the blocks in the Palette by looking for the word 'header', click the item to edit the text as needed. You may also use the toggle switch to omit displaying that field on your form.
Order the fields: Ensure the section in the Order Form block is selected in the Palette by clicking on the section you want to edit. Hover over the left side of the field name. When the up and down arrow appears, click and drag the field into the desired location.

Hide Address, Shipping Address Fields: The minimum required information for ONTRAPORT is the First Name, Last Name, and Email address fields. Note that your payment gateway may require address fields as well. Be sure to confirm the fields required by your gateway, otherwise all orders will be rejected.
Hide Credit Card Fields: If your payment gateway does NOT require certain credit card information, slide the Visibility Toggle to the right position, turning it red.
Be sure to confirm what fields are required with your payment gateway. Hiding a required field will cause all orders to be rejected. We recommend leaving them in the default configuration, with green Visibility Toggle icons next to them. The field names are:

Payment Number: Credit Card Number
Payment Code: CVV Code, CVS Code
Payment Expire Month: Expiration Month, Exp. MM
Payment Expire Year: Expiration Year, Exp. YYYY

Hide, change or edit the Credit Cards Graphic: Click the pencil icon to use the Photo Editor

edit graphics animation

Customize Required Fields, Field Labels and Settings

Make a field required: Click on the field name in the Palette and place a checkmark in the Required field box.
Change what the field label displays: Click on the field you'd like to edit and enter your desired text.
If the Order Form block you've chosen has text on the inside of the field, it's a Placeholder. Placeholder information disappears once the viewer clicks in the field.
If the block you've chosen has text on the outside of the field, you can enter a new label for the field as well as enter placeholder information if desired. Placeholder information disappears when the viewer clicks in the field.
Change the Submit Button: You can change the text and upload your own button image. Click the submit button element in the Palette in your Order Form block. Enter your desired text. You can change the background color and create hover effects by specifying different Hover Color Settings (text and background colors).
To upload your own button image, click the image tab and upload your image.

Advanced Settings on Order Forms

ONTRAPORT Order Forms have five options in the Advanced settings section. The default setting for all of these options is unchecked.

Advanced Settings in Order Forms

Override email address and merge with cookie data - This setting overrides the default setting to merge all data based on the email address and instead use the cookie data stored in their browser. This is commonly used on regular opt in forms to allow the Contact to update their email address.

Pass CGI variables to Landing/Thank you page - Usually used in third party applications or by developers, this setting sends the values in the form in a format that can be read by programming languages or applications.

Send Google Ecommerce Tracking Parameters to Landing/Thank You Page - When enabled ONTRAPORT passes the parameters needed by Google's ecommerce tracking to the Thank You page. See Google Analytics Ecommerce Tracking for more information.

If charge is successful, then use this card for all transactions in collections - When a credit card payment fails the order is sent to the Collections and Recharge Settings process. Your customer can update the credit card to be used in the Customer Center of an integrated WordPress website or by using an order form. Check this box if you are using an order form to update the credit card details for orders in collections.

If charge is successful, also update all open orders with this card - This option will force a mass update of all open orders - subscriptions and payment plans - to use the card entered instead of the card originally used for the order. This can be handy when a customer needs to change the credit card for all of their orders.Note: If you are using an order form to allow Contacts to update their credit cards, please see the proper ways to do this in Collections / Recharge Settings.

Frank Hagan

Contents