Ontraport Thank You Page Into Order Summary Playground

Hello Ontrabelievers!

So, the other day I dreamed that I was talking to a prospective client (yes I dream about Ontraport sometimes 😂) who was worried about whether or not Ontraport would really be able to replace ClickFunnels (first time you’ve heard that I’m sure LOL)…

So, I asked him exactly which pieces of CF he was most concerned about and he echoed the usual…

“I’m worried that Ontraport doesn’t have enough pretty templates”
“With ClickFunnels I can deploy a whole funnel in a couple of clicks”
“Building with CF is so easy & I’ve heard Ontraport is hard”
“I’ve heard Ontraport has a huge learning curve”

So I gave him the spiel…

“Templates don’t matter nearly as much as the Offer, the Copy & the Audience. Besides, Russell Brunson himself starts from ZERO on his live funnel builds so stop thinking the ‘right’ template is going to make or break your success. The Ontraport team has also taken an active interest in putting more templates in place. Plus, I’ll give you access to a library of templates to choose from along with all the ones we make in the future. If you really see one you’re dying to have, I’ll get the team to whip one up no problem…”

“Full funnels? Well, not really because you still have to write the emails and copy, right? But OK, I have 4 plug-&-play funnels ready to go and they even have the email templates + landing page copy 80% done for you. Check.”

“CF is easy to build pages with. But so is Ontraport. Especially if you’ve never touched either one. Plus both have live webcasts that show you how the founders approach building out the pages so I’d actually put the learning curve about on par. But is building the pages yourself really your highest & best use of time as the captain of your ship?”

But then he threw me a curveball…

“ClickFunnels has a dynamic order summary page.”

I was stumped, so I said let me get back to you and then I woke up…

But it wasn’t the first time I’d heard a similar request so I went digging through the group and sure enough, Danno Sullivan mentioned something similar way back when.

So, I started playing around with the ClickFix shortcodes to see if we could make something even cooler than the basic order summary page…

Since Ontraport conveniently let’s us pass CGI + eCommerce variables when we submit forms, it was actually much simpler than I thought it would be.

Let me show you how I did it.

First I grabbed the checkout page and went into the form settings to have it pass both the CGI & eCommerce variables by clicking the check boxes. Then I set the thank you page to the HTTPS version of my thank you page.

Then I saved all the changes and switched to my thank you page.

Over there, I dropped in the ClickFix shortcode activation snippet into the header section of the page.

Then, I set up my page using the [FromURL] shortcode to grab things from the URL query string like the item quantity, item name, item price and the first name to set up both the dynamic sentence as well as a simple dynamic summary table.

I was able to whip this up pretty quickly with 0 attention to design, but I’m sure you’ll come up with something that looks even better!

Doing this particular usecase project got me really excited about all of the other possibilities presented by the [FromURL] shortcode.

For example, I could also set it up to pull any URL parameters that get populated dynamically by Google Ads or Facebook Ads and put that into strategic parts of my landing page.

Let’s say you target men and women and a bunch of different age groups. You could theoretically set up a single page that would read those variables and put something in the page like

“If your a [FromURL gender] between the ages of [FromURL age], then you’ll want to pay close attention.”

As people click on your ads, they’ll get message variations that seem to speak directly to them:

“If your a man between the ages of 35-40, then you’ll want to pay close attention.”

We could even take this one step further and include other shortcodes like our group of conditionals to show and hide elements on the page like images so that the entire page experience changes based on the information being passed to the URL.

Think about that for a second!

That means that with a bit of creative thinking, you may be able to set up a single dynamic landing page that adapts to your visitors instead of having to make duplicates and ads that are pointing all over the place.

Do any other ideas come to mind?

I love talking about this stuff as some of you can confirm first hand so if you have any questions or feedback, don’t hesitate to make yourself heard.

Ontraport’s Magical Micro Commitment Landing Pages

Hey there OntraFans!

I’m back with another quick use case video for shortcodes and enhanced Ontraport Pages.

The other day I had someone reach out to me asking whether or not it would be possible to create a mini-survey for their landing page like the one that Russell Brunson currently has on the ClickFunnels home page.

I said, “Of Course! But there’s only one catch, we have to use a drop-down instead of radio buttons since we’re still waiting on radio buttons as a field type in Ontraport.”

Now, I’ve already shown you guys how a full on survey funnel would work (I’ll link to that in the comments), but let me give you a quick glimpse of a different approach commonly referred to as the “micro-commitment” opt-in.

Just like its cousin the “2-Step” which shows a pop-up when someone clicks the button, our “micro-commitment” approach leverages the psychology of someone already having said “yes” to the “small” or “micro” step of clicking or otherwise interacting with the page so they’re more likely to continue down the path as long as they don’t meet any major resistance along the way.

“Objects in motion” and all of that…

So, rather than clicking a button, what we’re asking people is to answer an innocent question about how they found us.

You can ask anything here and obviously if you plan to use the info for tagging and/or automations you’ll want to make the question relevant or even add additional steps to this flow.
Once they make their selection, the interface changes and they’re prompted for their email.

Let me show you how this was done.

First we laid out all of the elements in the editor.

Then we added the ClickFix shortcode snippet (which is free by the way) to the header section to enable shortcodes on the page.

After that, it was a simple matter of hiding the elements we didn’t want shown at the beginning and then telling ClickFix that when someone makes a selection we want to flip what’s shown & what’s hidden with the conditional [IfField] shortcode.

The last bit of custom work was with the progress bar which is just some basic HTML & CSS which I duplicated it twice. Once for the step 1 and the other to represent step 2.

It was so quick & painless, that it’s literally taken me longer to shoot the explainer video 😂

If you’re interested, I’d love to share this template with you.

Unfortunately, I can’t just paste the share link in the post because of the custom code so I’d have to figure out what the easiest way to get this into your hands would be.

So, if you’re interested please let me know and we can brainstorm the simplest way to get you testing this in your own business.

Even if you don’t need this particular template, I hope you’re starting to see just how much more you can get out of Ontraport thanks to their commitment to make probably the most customizable marketing platform on the market and a little custom love 😉

Ontraport Multi Step Checkout Forms

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.

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?

Chrome Ontrapage Inspector 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.

Ontraport Progressive Forms On The Same Page

What’s up OntraPeeps?!

Today I wanted to drop a quick video to get a conversation started around what you’ve found to be more effective.

Standard multi-page forms or progressive forms that live on the same page but break up the process by showing & hiding elements as the prospect moves through the questions?

This subject seems to pop up a lot (most recently from Sarah Noked in the User Community).

So, I wanted to get some feedback on what you’ve seen work the best in your business.

For some of my clients, we use a single page progressive form to filter people out during the application process so that their sales people don’t get on the phone with people who can’t really afford their service for example.

It looks a little something like this…

  1. The prospect lands on the application page (after opting in on a previous page).
  2. They watch a primer video that gets them pumped up and excited about filling out the form.
  3. The form to the right of the video is the application that leads them through the important questions we want to know in order to qualify them.
  4. If they’re “accepted” then the submit application button is shown along with a Call To Action (CTA) that congratulates them and tells them to schedule their time on the next step. We’ve already got their email at this point, but this could easily be the point where they give you their contact details.
  5. If they’re “not ready” they get a message that refers them to a different funnel that’s more inline with where they’re at currently.

I see a few advantages with each model in respect to the other:

Built-In Multiform/Multipage Profiling Advantages
You capture their contact info on step 1

Allows you to capture their progress at different spots in the process. So, you could theoretically track where the friction point is for optimization.

Works out of the box with both smartforms and Ontrapages forms

Single Custom Progressive Form Advantages
Zero wait between each step

You can use conditional paths

Can be used to hide/show additional blocks/elements on the Ontraport page

I can see use cases for both, but I’m curious about whether anyone has had more success with one over the other.

Let me know, I’d love to hear some feedback from the trenches.