Get expert tips, tricks, and scripts from Ontraport's Founder and CEO, Landon Ray. These insights help you easily add powerful functionality to your account and tackle specific use cases. In this article, you'll find videos previously posted on Facebook, along with steps and code examples when you need them.

Table of contents

Keep your data clean for high-touch B2B sales processes
Create a signature field in Ontraport Pages
Dynamic sidebar navigation demo
Create a dynamic multi-language site
Add Google Fonts to Ontraport Pages
Add animation to Ontraport Pages
Break out of the block-based grid with CSS
Break out of the block-based grid with gradient backgrounds
Send automated postcards and letters using Thanks.io
Send from name deliverability tip
Pass URL variables to personalize pages
Create internal pages for your team
Generate 1-10 star ratings
Automate slack reminders
Display list selection fields as checkboxes
Embed a booking calendar in an Ontraport Page
Create an SMS chatbot
Embed Ontraport Page forms into your WordPress site
Create a customer referral portal
Build a sliding FAQ’s section

Keep your data clean for high-touch B2B sales processes

This video teaches you how to keep your data clean for high-touch B2B sales processes using AI and Zapier. This 20-minute setup will save hours and hours of manual data cleanup.

Watch now!

Create a signature field in Ontraport Pages

Back to top

This video will show you how to create a signature field in Ontraport pages and what it looks like.

Watch now!

Create your form

The first step is to create a form on an Ontraport Page that contains an image field.

1. Create a form on an Ontraport Page and include an image field.
2. Click on the image field → Position and add “signature” to the custom element classes field.
3. Publish the page.

Copy your form’s ID

To customize the code in the final step, you must collect your form’s ID and the image field’s ID in the next step.

In Ontraport, forms typically have an ID that starts with an “o” followed by 12 characters such as “o895003f383db.” 

1. Visit your published page from the step above and right-click and click View page source.
2. Search for “form id” and copy your form’s ID for later. 

Find the image field ID

The last ID to copy before customizing your code is the image field’s ID, which you can copy from your page editor.

1. In the pages editor, click on your image field and locate the ID in the bottom left corner.
2. Copy that ID for later.

Add and customize your code

To complete this use case, you’ll add some custom code to the header and footer sections of your page’s custom code. The header code does not need to be edited, but when you add your footer code, you’ll add the IDs you’ve copied in the steps above.

1. From the page editor, click Settings → Custom code → Header.
2. Copy and paste this code into the header section.
3. Click Footer and copy and paste this code into the footer section.
4. Search the code for all instances of “REPLACE WITH FORM ID” with your form’s ID.
5. Search and replace all “REPLACE WITH FIELD ID” instances with your field’s ID.
6. Click Done.
7. Publish your page and test.
   • Visit the page and try drawing a signature, click Accept signature, then submit the form.
   • Verify that the signature is required, that the visitor can’t submit it until they accept the signature, and that the file field populates correctly in your contact’s record.

Dynamic sidebar navigation demo

Back to top

This video shows how to build dynamic side navigation that dynamically displays courses related to the visiting contact.

Watch now!

1. In Ontraport, open the page where you want to add a sidebar navigation.
2. Click on your navigation element to open its settings and click Settings.
3. Locate the Custom HTML section and click Below nav.
   • Copy and paste this code into that section.
   • Click Done.
4. In the top right corner, click Settings → Custom code → Header.
   • Copy and paste this code into that section to wrap course names.
5. Watch this video to set up automatic create many-to-many relationships. 

Create a dynamic multi-language site

Back to top

This video shows you how to use Ontraports DCMS and AI Assistant features to create a dynamic multi-language site in about 30 minutes.

Watch now! 

Here’s a demo of the build from the video.

Add Google Fonts to Ontraport Pages

Back to top

Learn how to use the custom classes feature to easily add hundreds of free fonts to your pages.

Watch now!

Add animation to Ontraport Pages

Back to top

This video shows you how to make fancy animations that pop on your page.

Watch now!

1. In Ontraport, go to a page where you want to add animation.
2. In the top left corner, go to Settings → Custom code → Header.
3. Copy and paste this code into the header section.
4. Click Footer and copy and paste this code into that section.
5. Open the settings of the element or column you want to animate, and select the class name you want from the list in this code, and paste it into the custom class for the element or column.
6. Save and publish your page.

Break out of the block-based grid with CSS

Back to top

Sometimes, block-based editors make pages feel a little boxy, and it’s nice to slide an element across two blocks to bring things together.

Watch now! 

1. Create or edit an Ontraport Page.
2. In the top left corner, click Settings → Custom code → Header.
   • Copy and paste this code in that section.
   • Click Done.
3. Open the settings of the element you’d like to slide past the bottom of your block and add “move-down-50” in the Custom classes field.
4. Save and publish your page.

Break out of the block-based grid with gradient backgrounds

Back to top

This video walks you through using the “Prevent color blend” setting for gradient block backgrounds to create a distinct horizontal line in the middle of your block, allowing you to create designs that appear to have design elements between blocks.

Watch now!

Send automated postcards and letters using Thanks.io

Back to top

This video will show you how to integrate Thanks.io and Ontraport so you can automatically send postcards and letters to your contacts.

Watch now!

Send from name deliverability tip

Back to top

Watch this video to learn how using only a first name for your email from name can send your messages straight to the spam folder.

Watch now!

Pass URL variables to personalize pages

Back to top

Watch this video to learn how to pass URL variables throughout your website for personalization. This personalization is more than just ad hoc merge fields. This option allows you to make the URL variables follow your site visitors as they navigate your pages to add personalization to all the content they see.

Watch now! 

1. Open the page visitors land on when they click on a link containing URL variables.
2. In the top left corner, go to Settings → Custom code → Footer.
3. Copy and paste this code into that section.
4. Click Done.
5. Save and publish your page.
6. Repeat steps 1-5 on any pages where you want to retain URL variables for personalization.

Create internal pages for your team

Back to top

Learn how the prefill and “do not track” form settings work together to allow you to create sophisticated internal forms for the team members you don’t want to log in to your Ontraport account.

Watch now!

Generate 1-10 star ratings

Back to top

Want to let contacts rate you — or anything else — on a scale of 1-10 stars? This video shows you how to customize numeric fields to display a list of 10 stars for user ratings.

Watch now! 

1. Create a form on an Ontraport Page that contains a numeric field.
2. Click on the numeric field to open its settings and remove the field label.
   • Add a text element above the field to act as a field label.
   • Click Position and add the custom class “make-stars”.
   • Click Done.
3. In the top left corner, click Settings → Custom code → Header.
   • Copy and paste this code into the header section.
4. Click Footer and copy and paste this code into that section.
   • Click Done.
5. Save and publish your page.

Automate slack reminders

Back to top

Check out this automation Landon built to send notifications to sales reps to update information about their completed calls.

Watch now!

Display list selection fields as checkboxes

Back to top

This video shows you how to display list selection fields as checkboxes on your pages.

Watch now!

1. Create a form with a list selection field on an Ontraport Page.
2. In the top left corner, click Settings → Custom code → Footer.
   • Copy and paste this code into that section.
   • Click Done.
3. Click on your list selection field to open its settings.
   • Click Position.
   • Copy and paste “listselectcheckboxes” into the custom element classes field.
   • Click Done.
4. Save and publish your page.

Embed a booking calendar in an Ontraport Page

Back to top

This video shows you how to embed a calendar into your Ontraport Page and have the thank you page appear as a new window instead of inside an iframe.

You’ll need to add three snippets of code to make this work. Two go on the page where you want to embed your booking page, and the third goes on the thank you page that users see after filling out your booking page. Of course, you’ll need to create your booking page first to get that URL, which you’ll need to add to the code below.

Watch now!

Edit the embed page

The instructions for this section are for the page that you want to embed your booking calendar on.

1. In the top left corner, click Settings → Custom code → Footer.
2. Copy and paste this code into that section.
3. Replace the “DOMAIN OF YOUR PAGE” text with the domain of the embed page. For example, if your page is “https://mypage.com/book-me-now”, then use “https://mypage.com” in the code above.
4. Click Done.

The next thing you need to do is add a custom HTML element to your page in the location where you’d like your booking calendar to appear.

1. Add a custom HTML element to your page.
2. Click on the element to edit it and copy and paste this code into it.
   • Replace “YOUR BOOKING PAGE URL GOES HERE” with your booking page URL.
   • Click Done.
3. Save and publish your page.

Edit your thank you page

The final step in the process is to add a code snippet to the thank you page connected to your booking calendar to escape the iframe and appear normal for your guests when they book with you.

1. In the top left corner, click Settings → Custom code → Header.
2. Copy and paste this code into that section.
   • Replace “URL OF YOUR THANK YOU PAGE” with the full furl of your thank you page such as https://mypage.com/thanks.
   • Replace “DOMAIN OF YOUR THANK YOU PAGE” with the root URL, such as https://mypage.com.
   • Click Done.
3. Save and publish your page.

Create an SMS chatbot

Back to top

This video shows you how you can get AI to categorize inbound messages and respond appropriately.

Watch now! 

Embed Ontraport Page forms into your WordPress site

Back to top

WordPress users might think they can’t use the updated form features, such as file and image uploads, hidden fields, conditional redirects, and more. This video shows you how to embed Ontraport Pages in WordPress and make them pop up when visitors click a button.

Watch now! 

Embed an Ontraport Page

1. Create an Ontraport Page made from a single block that contains your form.
2. In the top right corner click Settings → Custom code → Footer and paste this code into that section.
3. Publish the page.

Next go to the WordPress page where you want your form to appear.

1. Add this HTML to the copy of your page.
   • Replace all instances of “URL OF ONTRAPORT PAGE” with the URL of the page you published in the steps above.
2. In the footer section of that page, add this code.

Pop an Ontraport Page when visitors click a button 

1. Create an Ontraport Page made from a single block that contains your form.
2. In the top right corner click Settings → Custom code → Footer and paste this code into that section.
3. Publish the page.

Next, go to the WordPress page where you want your button to appear.

1. Add this code to the header of the page.
2. Add this code to the footer of that page.
   • Replace “URL OF ONTRAPORT PAGE” with the URL of the page you created above.
   • If you only want to include one button, delete the optional code at the bottom of the example.
   • If you want to add multiple buttons, replace “URL OF ANOTHER ONTRAPORT PAGE” with the URL of the other Ontraport Page you want to pop up.
     • Repeat for as many buttons as you want to add.
3. Add this code to an HTML element/area where you want to place your button.
   • Replace “BUTTON TEXT” with the text you want to display.
4. Publish your updates.

Create a customer referral portal

Back to top

This video shows you how to create a system that tracks who’s making referrals and creates a monthly leaderboard to show the results.

Watch now! 

Build a sliding FAQ’s section

Back to top

Use the code below to create your own FAQ’s section.

1. From inside your page editor, add a Custom HTML element where you’d like your FAQ’s to appear.
   • Click on the element and copy and paste this code into it.
2. In the top left corner go to Settings → Custom code → Header.
   • Copy and paste this code into that section.
3. Click Footer and copy and post this code into that section.
4. Click Done.
5. Save and publish your page.