Using Form and Sales Elements

About Form and Sales Elements

ONTRAPORT Pages provide unprecedented flexibility in deciding where to put your form fields and submit buttons, and adds additional features such as order bumps. We'd love to say there are no rules, but there are just a few. This article explains the form and sales elements and the few rules to make sure you get the opt in or sale.

Create an Opt-In Form on Your Page

Elements used: Form Fields, Submit Button

You're holding a free training webinar for your web design business. You have your headlines on the page and would like a quick, in-line opt in form. Edit the block and add a row with four columns, one each for the first name, last name, email address and the submit button.

Drag and drop the Form Field element into the first column. A dialog box pops up for you to select the field to choose. ONTRAPORT suggest the First Name field in the dialog. Click OK.

Styling the Fields

Note: Apply any Style settings on this first form field now, and your choices will automatically be applied to the rest of the fields as you drop them on the page.

The default style has the field name inside the form field, but you want it positioned above. Click the form field and select the Style tab in the Palette. Click Edit Style and change the value under "Select your input style" to Custom. Verify that the position of the label is set to Top, and click the Done button at the bottom of the palette.

Setting Field Width

The field fills the width of the column. We want a space between the fields. Click on the field and select the Position tab in the palette. Set the Alignment to Left and the Element width to 95%.

Add the rest of the fields and the Submit button. Sometimes you'll want to just resize the element in the column by hovering over it, clicking and dragging. Both methods are shown below.

Now is a great time to save your page!

Form Settings

Click on the Submit button and select the Form Settings icon at the bottom of the palette.

Single Opt-In is recommended, and it will already be selected. If you don't already have a Thank You page created, click the "Use this Landing Page" drop down and select Create New Landing Page. When you save that page you will be returned to this page. Click Save at the bottom of the form settings.

There are other settings, but in most cases you won't use them. We recommend just using Single Opt-In and setting a thank you page, and then saving the settings for almost all your opt in forms on ONTRAPORT Pages.

Order Forms

Elements used: Billing Address, Shipping Address, Credit Card, PayPal Button, Order Summary, Order Bump.

Your free webinars are popular, but you aren't generating much web design business from them. People are asking about buying the materials in hard copy form, so you decide to monetize the webinar itself. Let's create an order form that charges just $5 for the webinar and includes a free eBook, with a download link provided via text message. And, let's allow people to buy a printed copy of the book and optionally a recorded copy of the webinar too.

Drag and drop the Field element onto your page for the first name. Click on the field and select the Style tab in the palette on the side and apply any styles you want to the field. Then drag the last name, email address, and SMS number fields onto the form. On the Settings tab, make sure the first name, last name and email address fields are set to required, and edit the SMS number label to indicate why they should provide it.

Billing and Shipping Address Fields

Dragging the Billing Address or Shipping Address elements onto the block inserts all the fields associated with those features. In this case, our gateway wants us to collect the state, country and zip code for verification purposes. We drag the billing address element onto the block and then delete the fields we don't need. Additional fields added to the billing address fields will be sent to the payment gateway as appropriate.

Order Summary

Drag and drop the Order Summary element onto the block and configure your product and purchase options.

The palette shows several configuration items including one that is required to save the form: the Payment Gateway. You need to add at least one gateway now. If you haven't set any up yet, go ahead and click the Add a Payment Method button and select Create New Gateway.

Let's create the Dummy gateway so we can test our form before having to configure a real gateway. Type Dummy into the space for the gateway name and click Save and Edit. On the Payment Gateway Settings page select Dummy Gateway from the drop down. Click the blue Save button at the top right of the page, and you will be returned to your form. Now you can select the newly configured Dummy gateway from the drop down.

Credit Card and PayPal Elements

Dragging the Credit Card element to the block adds the minimum required fields for most gateways. These include the name on the credit card, the card number field, the expiration month, expiration year and the CVC number. The name on card field does not overwrite the contact's name; it is saved with the billing address fields. You can hover over and delete any of these fields your gateway doesn't require.

The PayPal element adds a PayPal button that can be configured in the settings to show the official PayPal logos in several different styles. When the customer clicks the PayPal button they are redirected to the PayPal sales page to complete their login or credit card entry with PayPal.

Order Bumps

Drag the Order Bump element to the block under the order summary. Edit the order bump element in the palette in the same way you did for the order summary. The order bump element includes a quantity field they can adjust, and a checkbox to activate the add on. All of the products selected are billed on one invoice. You can use order bump with standard PayPal as well as any of the credit card gateways.

Upsell Buttons

An upsell is an additional offer presented to the customer after the transaction has been submitted. They are great for selling additional items while not jeopardizing the original sale by introducing too many options. You would position the upsell buttons on the Thank You page for your order form. You cannot add them to an page with an order form; use an order bump element instead.

Add your sales copy to the thank you page offering the upsell items. Under that copy, drag the upsell button element to the page. A Yes and No button is added, giving the customer a simple choice to buy the upsell item or not.

Click the Yes button and configure the Product and payment settings just as you do with an order form. In the Form settings add a thank you page for this button press.

Click the No button to configure it. You won't have a Product and payment settings option because your customer has decided to pass on the offer. In the Form settings, specify a thank you page for the customer who did buy your original product, but passed on the upsell product.

You can continue to put upsell forms on the thank you pages, daisy-chaining the upsell offers. Some people use three or four offers, branching off the Yes or No button side (or both sides!)

The original purchase is recorded already, and an invoice generated. We cache their payment information so that each additional sale only requires clicking the Yes button. For more on configuring upsells in your ONTRAPORT account, and how they work, see our article on Upsells.

Add More Elements Between Blocks

ONTRAPORT Pages makes it easy to add content anywhere on the page. Here's a short video showing how to add text above an image of credit cards.

Adjust the States and Countries Shown on a form

The billing state dropdown will include all the states and provinces ONTRAPORT serves, so we want to delete the ones that are not needed. Click the Billing State field and click Advanced in the Settings. Click to edit the drop down values.

Follow these steps to edit the dropdown values:

Select a new Default value to show. Normally you would select the first state or province listed in your country.
Click the Hide All button at the top. All of the circles will be filled.
Click on the filled circle next to the states or provinces you want to include.
At the very bottom of the list click on the "My state is not listed" entry to provide a way for international clients to nevertheless register.
Click Okay to save your selection.

Edit the Country dropdown the same way. The country dropdown does not have a "my country is not listed" option because we don't market to Martians.

Hidden Form Fields

Forms created on Pages can have hidden fields. You specify them in the Form Settings. A hidden field can be nearly any Contact Record field including custom fields. Hidden fields do not appear on the form, and are not shown to the Contact during or after the form processing.

To populate the hidden field you can use merge fields. In this image we have the custom field "Owner of value" set to be populated with the [First Name] merge field. Merge fields can be selected using the merge field drop down arrow icon.

You can also use values you pass to the page via the URL. This can be useful when you want to mask the reason for the value being passed. For example, you may want to pass a Last Referrer name without using that term. Using an ad hoc merge field such as "friend" in the URL might have something like this appended to the page URL: ?friend=Thomas+Jefferson.

[friend] is now an ad hoc merge field, and can be used to populate the Last Referrer field in the form's hidden fields. "Thomas Jefferson" would be populated into the Last Referrer field.

Usecase: Google gclid Parameters

Google Click Parameters are added to the URL of Google Ads. If you have a Google ad leading to one of your Ontraport Pages you can capture the "gclid" parameter in a custom field. When you view the "gclid" parameter in the url you will notice it is in the format "gclid=1234567890" where the numbers are a random string. Create your custom field, include it in the Page's form settings as a hidden field, and use the "gclid" portion of the parameter as an adhoc merge field. In this image we have the custom field named "Custom gclid value" specified as a hidden field, and the [gclid] ad hoc merge field.

Things to remember about hidden fields:

The value you pass into the hidden field must match the field type. For example, text for text fields, numbers for numeric fields and dates for date fields. Dates in hidden fields use the MM/DD/YYYY format regardless of your account settings.

Some fields are not available in the drop down. For example, drilldown fields in the Contact Record, such as the WordPress Websites field where you "drill down" to select one of several WordPress websites, and multi-value fields using drop down or list selection do not appear in the drop down because they cannot be used as hidden fields.

Using reCaptcha on Forms

Elements used: reCAPTCHA

reCAPTCHA uses a single mouse click to confirm the visitor to the page is not an automated "bot" and helps prevent spam submissions.

the reCAPTCHA as it appears on your forms

Signing Up and Configuring reCAPTCHA

Go to Google reCAPTCHA and click the button at the top right. Name the integration in the Label field. You will use a single reCAPTCHA configuration for all your ONTRAPORT forms. Select reCAPTCHA V2 in the Register a new site dialog box. The dialog box will expand to allow you to enter all of the domains you will use reCAPTCHA on. In addition to your own domains add these ONTRAPORT domains if you plan to use them for ONTRAPORT Pages:

ontraport.net
ontraport.com
qwkcheckout.com
safechkout.net
securechkout.com
securechkout.net
myquickcheckout.com
safechckout.com
safecheckout.info
checkoutnow.info
viprespond.com
vip2site.com
vipreplynow.com
zreply.com

You can return to add additional domains later.

Check the box next to Accept the reCAPTCHA Terms of Service and Send alerts to owners, and click Register.

the reCAPTCHA configuration screen

Copy the Site Key and Secret Key to a text file for use later in ONTRAPORT.

Add reCAPTCHA keys to ONTRAPORT

Open ONTRAPORT in a new tab and click reCAPTCHA Settings (or, navigate using the profile icon at the top right and click on Administration > Security > reCAPTCHA Settings).

Enter the Site Key and Secret Key numbers from reCAPTCHA in the appropriate spots, and click Save.

Adding reCAPTCHA to Your Forms

After this quick, one-time configuration you can drag and drop the reCAPTCHA element onto the block containing your form. ONTRAPORT allows you to place it anywhere in the block, but it's best to put it right above the Submit button.

Larry Arone

Contents