How To Create Two-Step Checkout Forms In Ontraport

How To Create Two-Step Checkout Forms In Ontraport

Hey Ontraconverts, did you know that:

“As much as 83.6% of people who make it to your checkout page STILL WON’T end up buying?”

According to some studies, a “long & confusing” checkout process is 1 of the top 5 reasons people don’t complete the process accounting for roughly 18% of the abandons.

Let me put that into context for you…
If you get 10,000 people to your checkout page every year, roughly 1500 of them will leave without giving you any moolah primarily because of the checkout process you have in place.

If you’re talking about a $100 product, that’s $150,000 you can kiss goodbye!

Thankfully, Ontraport allows us to use progressive forms to break up the steps and (theoretically) help to combat cart abandonment on our pages.

But what about those who fear things like load times or putting the checkout into popups will negate the conversion bump… or worse… lower it even more?

Well that’s where something like the ClickFix shortcode engine comes in…

Check out these two examples of multistep forms built completely in Ontraport.

The first is from a client that wanted to test if breaking up the form would lift conversions on his free plus shipping offer.

The “steps” are simply text elements with icons that were duplicated 3 times so I could change the colors to simulate progression from one to the other.

Then I put all of the fields and other elements where I wanted them to go and began using shortcodes to show/hide things based on which “step” someone was on using the [IfAnchor] shortcode to trigger visibility.

The second example is just one I whipped up for all of those (ex) ClickFunnels fans out there.

You should recognize the layout from Russel’s free + shipping funnels.

This page was done the same way, except that the step “tabs” at the top of the order form were created in Photoshop.

The principle is the same though.

The prospect fills out the fields for step 1, then clicks the button to proceed to step 2 where they can then provide their payment details.

The only disadvantage I can see to doing forms like this would be that the information from the steps before they click the submit button isn’t actually being captured.

But there you have it…

A quick and easy solution for any of you who want to split-test multistep forms on your checkout pages to see if it gets you a lift.

SPEND MORE TIME BUILDING YOUR
BUSINESS… NOT CAMPAIGNS
& WORKFLOWS

Supercharge Your Ontraport Projects Today For Just $1

Ontraport User Controlled Conditional Blocks

Ontraport User Controlled Conditional Blocks

It’s time for another ClickFix case study Ontrapreneurs…

QUICK POLL: Do you sell things internationally?

In today’s ultra-connected world, the chances are that you do have at least a few clients from other parts of the world deciding whether or not to give you some of their hard earned cash…

BUT

Did you know that studies show as much as 65% UK, 47% Australia, 43% Germany, 39% Canada will leave USD only website in order to calculate exchange rates before deciding to make the purchase?

If you’ve been around the web game for any length of time, you know that a good chunk of those people never make it back 🙁

So it’s no wonder that savvy Ontrapreneurs like Linda Rossiter are on the lookout to increase their competitive edge whenever possible…

Now, even if you only sell to one country and don’t need to worry about displaying prices in different currencies, you’ll definitely want to keep reading because the principles can be applied to any type of content you’d like to display based on certain conditions.

Ontraport’s v3 Page Builder introduced an awesome new feature called conditional blocks. With their built-in options you can choose to display content blocks based on:

  • The device (mobile vs desktop)
  • A time delay
  • Conditions pulled from the contact profile
  • A combination of the above

That means that right out of the box you could set it up so that based on tags or information like the country inside of the contact record could show the visitor the right content.

For our multi-currency pricing table example, that means that you could set up three different blocks with one pricing table per block. Then, you could set up conditions based on the country field to determine which block to show.

If you want to get a bit fancier, you could set up a campaign that tags people with a currency preference based on their location and reduce the block conditions to just looking for those tags (shout out to Landon for that piece).

But what if you want to give the visitor control over the currency (or content being displayed)?

Or maybe you’d like to be able to use information from the URL to determine which block gets shown like setting the UTM parameter to a country/currency as part of an ad campaign…

That’s where something like the ClickFix FREE shortcode engine comes in handy.

There are at least 4 or 5 ways I can think of how to set something like this up with shortcodes, but for this example I chose to make it work with:

  • A URL parameter
  • A text link
  • A drop-down selector

You can play with it at https://clickfix.ontraport.net/multicurrency

If you’re curious about deeper explanations of the shortcodes, you’ll get access to the docs when you sign up for a free account.

But let me run through the setup line by line…

Line 1 is the script that enables shortcodes to work.

Line 2 hides the shortcodes when the page is first loaded.

Line 3 turns the individual blocks that hold our pricing tables into tabs and hides them from view until the page receives some interaction.

Line 4 shows the block with the USD pricing table by default.

Line 5 hides the submit button. By default, Ontraport only allows you to use form fields on the page if you include a submit button. In our case we want to use a drop-down field to change which pricing table is displayed, but there’s nothing to submit so we just hide the submit button.

Line 6 tells the system to look at the URL to see if there is a parameter called currency defined. If so, it changes the value of the drop-down field to match.

Lines 7-9 tell the system to change which block is shown based on the value of the drop-down field.

Line 10 closes the command to hide the shortcodes when the page is first loaded.

Now when we go to the page you can see how it works.

USD is loaded by default, but we can change the displayed pricing table either with the text links or the drop-down controls. Obviously you’d probably only use 1 or the other, but I wanted to illustrate different options.

I could have just as easily used images or buttons as well.

The last little trick makes use of a URL parameter called currency.

So when someone visits a link with the currency pre-defined like https://clickfix.ontraport.net/multicurrency?currency=EUR%20(€) the shortcodes shift to display the proper pricing table.

Again, this is just one possible set up for this.

More importantly, hopefully you can see how mixing and matching simple shortcodes can really open up all kinds of new functionality for your Ontraport pages.

Now it’s your turn!

What kinds of shortcodes would you love to see or what kinds of ideas are you dying to try out?

SPEND MORE TIME BUILDING YOUR
BUSINESS… NOT CAMPAIGNS
& WORKFLOWS

Supercharge Your Ontraport Projects Today For Just $1

How To Use The Ontraport Page Inspector Chrome Extension

How To Use The Ontraport Page Inspector Chrome Extension

QUICK QUESTION: How creative have you gotten with your new Ontraport pages since they dropped v3?

Have you taken your design game to the next level yet?

No?

Well, let me show you a quick CSS trick that should give you some food for thought.

Between completed Ontraport page templates & the ones currently with the design team we’re fast approaching 50 plug-&-play options…

But until recently we shied away from dealing with designs that featured any overlapping elements because without a simple way to add custom CSS IDs or classes it was a major pain.

We would have to open the page inspector, look for the info and really play around with things to get it right.

That was until we got fed up with having to deal with the inspector every time we wanted to get our ClickFix shortcodes to work or add some custom CSS to really make things pop.

So the devs got to work in the lab and came up with a Chrome Ontrapage Inspector Extension that shortened the process to a couple of clicks.

In fact, it made our lives so much simpler we decided to give it away for free.

Just search for “ClickFix” on the Chrome Web Store and you can install it if you want.

In a nutshell, it highlights the identifiers used for field names, bump offers, blocks, columns, & elements so you can reference them with our shortcodes, custom objects, CSS and more.

But, how did this help me create an overlapping element?

Well, once I had my page set up in the page builder remember I needed to figure out what to reference for my style.

So I published the page and told the ClickFix Chrome extension to give me the column ID I wanted to target so that the entire thing would overlap.

Once it identified the column in question as “10” all I needed to do was drop the CSS into the header area, click done, save & voila!

div [opt-id=”10″] {margin-bottom: -45px;}

Now, I just showed you one possible application for what you can do with an easy way to identify the pieces of your Ontraport pages.

Are there any other uses for these identifiers that will make your life any easier?

Drop us a line if you have any awesome ideas you’d like to try.

SPEND MORE TIME BUILDING YOUR
BUSINESS… NOT CAMPAIGNS
& WORKFLOWS

Supercharge Your Ontraport Projects Today For Just $1

Ontraport Locked Links

Ontraport Locked Links

In today’s ClickFix, you’ll learn how our exclusive Locked Links™️ work to give you more control over how people interact with the links you share.

In basic terms, Locked Links™️ give you the opportunity to create links that you can expire or lock after:

A) A certain amount of time passes
B) A contact clicks on them a certain number of times

In a separate video, we’ll go over some potential uses cases to help get your creative juices flowing. So, let’s jump into the ClickFix dashboard and take a look at how to get started.

Once you’re on the Locked Links™️ page, the first thing you’ll want to do is to give your locked link a descriptive name. This name is strictly for your internal use, so you’ll want to name it something that’ll help you keep them organized.

For our purposes, we’ll just call this one Locked Link Demo.

Next, we’ll select the Ontraport application key that we want to use. If you haven’t set up your Ontraport Key yet, navigate to Settings > Ontraport API Keys & set one up right now because all of the ClickFix apps will ask for your key before allowing you to use them. If you need help setting up your key, please refer to the video tutorial linked on that page.

After selecting your Ontraport key, you’ll need to select the field that you’ll be using to store your locked link information inside the contact record. I’ll explain exactly what you can do with this field in a minute, but first let’s head over to Ontraport to get that set up.

Your navigation may vary depending on your Ontraport subscription, but you’ll want to look for the “Field Editor” which for us is under Contacts > Settings.

It’s up to you where you want your fields to live, but it’s probably a good idea to organize these in their own section since you’ll need to create separate fields for every locked link that you want to keep active.

I’ve gone ahead and made a “Locked Links” section and created a text field called “Locked Link Demo” but you can call yours anything you want.

While you’re there, you should also make a numeric field, which I called “Demo Counter,” but you can call it anything you want. I’ll explain what each field is used for in a moment.

Don’t forget to save the field editor and then head back over to ClickFix.

You’ll probably want to deselect and then reselect your Ontraport Application Key at this point so it refreshes the field selectors with the latest additions.

Now when we begin typing the name of the field we just created, we’ll be able to select it from the results. Do the same with counter field.

Next we need to select the destination URL that we want people to see when they click on an active link. In other words, if the link isn’t locked or restricted where should we send them.

In this case, I’ll just use the main ClickFix.io website.

After that, you’ll want to select whether this is a website or a file. The main difference is that if it is a file, then you’ll get an extra layer of protection by keeping the file extension secret.

Then, we’ll put in the URL that people should be taken to when the link is locked by the time or click options we’ll select in the next step.

In our case we’re going to send them to a MEME.

Now we’ll need to decide how we want to lock our link. At the moment we have three options.

First, we can lock the link after a certain number of days or hours. We’ll explore this deeper in the use case video, but for now just imagine using this during a flash sale where your prospects only have X days to take advantage of a discount.

Second, we can lock the link according to the number of clicks on the link. Please keep in mind that this click count is on a per contact basis. In other words, this is not what you’d use if you were trying to limit the number of global clicks to a link. Instead, this is more for ensuring that your content isn’t being shared or to limit the number of times someone accesses a piece of content.

Last, you can use a combination of both time and clicks to lock your link. Whichever condition is met first will trigger the lock and send the person to the expired link URL chosen above.

OK, so after saving you’ll get the webhook that you’ll need to activate your locked link. Go ahead and copy that, then head back over to Ontraport.

Navigate to Campaigns and then start a new campaign or choose an existing one if you prefer. I just started one from scratch. Because I’m going to add a contact here manually, all I did was add a Send a Webhook element under the default trigger.

Then I simply paste in the webhook generated by ClickFix into the first box and click Done. Now publish the campaign and you’re all set.

The last thing that’s left before you can use your locked link is to put the contacts you want to use the locked links into the campaign you just created. In most cases, that’ll probably be everyone on your list so you can just add everyone to the campaign.

However, I’ll just show you what it looks like with my test profile so you know what to expect.

As you can see, a link has now been pushed into the contact record. When we paste it into our browser, it takes us to ClickFix.io just like it’s supposed to.

But now let’s lock the link manually so you can see what happens.
To do so, all I need to do is delete the URL currently there and save the change.

Now when I visit that link, you can see that it takes me to my Locked Links™️ URL instead.

That means that now you have an easy way to keep your content from being shared without authorization, to help increase conversions by including real scarcity or any number of creative ways to use this feature to help grow your business.

SPEND MORE TIME BUILDING YOUR
BUSINESS… NOT CAMPAIGNS
& WORKFLOWS

Supercharge Your Ontraport Projects Today For Just $1

Use Magic Hooks To Change Billing Schedules

Use Magic Hooks To Change Billing Schedules

In today’s ClickFix, you’ll learn how our exclusive Magic Hooks™️ work to give you more control over how people interact with the links you share.

In basic terms, Magic Hooks™️ let you do a couple of things at the moment.

  • Change when someone’s subscription or payment plan payments are charged
  • Toggle whether or not you want someone to receive a recurring invoice with every charge

I’ll get deeper into specific use cases in a separate video, but for now imagine that you want to gain better control over your cash flow so you decide that from now on, everyone is going to be charged on the first of every month. With Magic Hooks™️ you can do that and much more…

So, without further ado, let’s jump into the ClickFix App to see exactly how we create our Magic Hooks™️ and what types of options you’re currently working with.

We’ll start with changing the next charge date of an open order.

Once you’re on the Magic Hooks™️ page, you’ll notice that the first thing you have to do is select the Ontraport Application Key that you want to work with.

If you haven’t set up your Ontraport Key yet, navigate to Settings > Ontraport API Keys & set one up right now because all of the ClickFix apps will ask for your key before allowing you to use them. If you need help setting up your key, please refer to the video tutorial linked on that page.

After selecting your Ontraport key, you’ll see that the base URL changes to show your unique token.

From here, you just need to add the URL parameters that’ll tell Ontraport which open order to update & when you want the next charge (and subsequent charges) to take place. Let’s go over them one by one.

First up is the &id= parameter. This one will always be &id=[Contact ID] so that Ontraport knows which contact record to modify. Every Magic Hook™️ you create needs this parameter to work, so be sure to include it every time.

Next, you have the optional &from= parameter which allows you to choose between ‘today’ and ‘order’. This parameter tells Ontraport whether you want the offset you choose in a later step to be counted from today or from the current date of the open order.

Let me try to explain that with an example. Adding &from=today means that whatever offset type you choose later will be calculated from today. So, if you chose a 3 day offset, your Magic Hook™️ would change the next charge date to 3 days from today (ie. If today is November 21st, the next charge would be on November 24th). If you were to choose &from=order, then it would calculate 3 days from the date of the next order (ie. if today is November 21st & the next charge is set for December 21st, this would change the next charge to December 24th).

Moving on, we see that we can also choose the time zone that we want to use for the webhook’s calculations. This looks like &timezone= followed by the desired time zone in a Continent/City format like &timezone=Europe/London. Google “tz database time zones” if you need a list of compatible time zones. This is an optional parameter, but if it’s not specified, please keep in mind that it’ll default to GMT (essentially UK time for the uninitiated).

After that, we have the option to specify which product this is for using the &product= parameter. You can find your product ID list in your Ontraport dashboard under Sales > Products and then either adding the “Product ID” column or if you’re in Chrome you can just hover over the product name and look in the lower left corner of the browser window. Adding the &product= parameter tells your Magic Hook™️ to only modify the charging schedule of a specific product. If you don’t include this in your webhook, you may end up modifying every open order (both subscriptions and payment plans) currently active for that contact. So, make sure you include the specific product ID if you have multiple subscriptions and/or payment plans available on your website.

From there we get to the &type= followed by the &offset= parameters.

As the table shows, you have several options that you need to consider for the &type= variable which will determine what number you should include for the &offset= value.

type
offset
nextday
Numeric 1 to 7 (Monday to Sunday)
nextmonth
Numeric from 1 to 31 (if no 31 in that month, set to last day of the month)
days
A number of days in the future
weeks
A number of weeks in the future
months
A number of months in the future

So, if you wanted to change the next charge date to next Tuesday, you would add &type=nextday&offset=2.

Or maybe you want it to be on the first of next month. In that case you’d add &type=nextmonth&offset=1.

Want to move it by a set number of days, weeks or months? Just add &type=days/weeks/months&offset=insert_a_number.

At the bottom of your ClickFix interface, you’ll see a couple examples of ready to use webhooks to give you a headstart on building yours.

The last thing to note is that you also have the option to combine Magic Hooks™️ for even more granular control.

For example, setting up 1 webhook element with https://klikfx.com/a/h/change-charge-date?token=Pick an Ontraport Key above to reveal your token]&id=[Contact ID]&type=nextmonth&offset=1

Followed by another like this https://klikfx.com/a/h/change-charge-date?token=[Pick an Ontraport Key above to reveal your token]&id=[Contact ID]&type=nextday&offset=1&from=order

Would push the next charge date to the 1st monday of next month.

Let’s jump over to Ontraport to see how to deploy your new Magic Hook™️ in a campaign.

Once you’ve logged into Ontraport, navigate over to campaigns and start a new campaign from scratch.

Now you’ll need to decide on the type of trigger you want to use. If you’re planning on just updating your entire database to use a specific billing schedule like the first of the month, you’ll probably just place the webhook element directly under the default trigger and add your whole list.

But for this example, let’s assume that you want new subscribers to your membership site to be charged on the first of every month.

For that, we’ll make a trigger based on a specific product being purchased. Once we have our product selected, we add a webhook element to the canvas. Now, you’ll just copy & paste your Magic Hook™️ URL into the form field. Before you click done, double check that your product ID is correct so you don’t run into any issues.

That’s it!

Now every time someone purchases your subscription, they’ll automagically be charged on the first of every month like clockwork giving you a predictable way to manage your cashflow.

SPEND MORE TIME BUILDING YOUR
BUSINESS… NOT CAMPAIGNS
& WORKFLOWS

Supercharge Your Ontraport Projects Today For Just $1