Tour Ontraforms so you can easily display your forms as pop-ups or build a form for your existing website and landing pages.
Home > Ontraport for marketing > Forms > Ontraforms
Ontraforms
Course Instructor
- Where to find prebuilt templates
- How to create an Ontraform from scratch
- How this editor differs from Forms on Ontraport Pages
- Options for having your form appear as a pop-up lightbox
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
With Ontraport, you have a ton of options when it comes to creating forms for your page. Ontraport Forms are handy, whether you want to display your forms as pop-ups or if you need a form for your existing website and landing pages. Either way, we make it easy for you to create forms that fit your brand and vision.
If you're wondering whether Ontraport Forms are the right tool, check out our video on when to use each form editor.
In this video, we’re going to show you several different ways you can set things up in our standalone Forms editor— so let’s dive in!
If you hover over the “Contacts” tab and click “Forms,” you’ll find the Forms collection.
Now select “+New Form” and click “Ontraform”.
You can create a form by selecting one of our pre-built templates or you can create one from scratch. When you click “Start from Scratch,” you’ll get a blank template for your form canvas.
When you click “+Block,” you’ll see several different block categories on your left. Block types are divided into several categories, such as “Banner,” “Footer,” “Header,” “Image,” “Order Form,” “Text” and so on.
For this example, let’s go ahead and select “Smart Form”. Remember that there are lots of form options that allow you to create some pretty elaborate content for your pop-up form. If you want to include images, slideshows, descriptions and even custom code, it’s all possible with this form builder.
Here's the thing you need to understand about building with Ontraforms. This is our v2 technology, so it's not quite the drag and drop experience that you get when building forms in Pages. With this editor, to create the design you're looking for, you'll find and select a block that has the basic elements and layout that you want. Then, you hide or delete elements to create your ideal design.
Note that when you click on your block in the palette editor on the left-hand side, it’ll show up in the canvas on the right.
As you keep adding blocks to your form, you can click on each one to see them in more detail.
For example, when you click on the “Smart Form” block, you can edit the “Header,” “Sub-header,” “Image” and more.
As you build out your form, you can also change the order of your blocks by dragging on the vertical arrow icon to the left of the block. Just drop in where you want it to appear.
You’ll also notice that each element displayed has a trash icon and a toggle switch. If you hover over each element, you can use the toggle switch to show or hide the element. Or, you can click the trash icon to delete an element entirely.
When you’re editing your elements, be sure to select the “Done” button on the palette when you’re finished making changes.
For some elements in your block, you can actually click on them to make changes one layer deeper. Again, make sure to click “Done” to save any changes you make to these elements.
Now let’s navigate to your form settings. Select the block that contains the form. The “Form Settings” should appear below the fields listed on the form. If you need more information about Form settings, be sure to watch our deep dive video, “Form Settings and Advanced Features.”
There are a few different ways to publish your forms but we’ll start with publishing on Ontraport Pages.
If you want to use this form as a pop-up on an Ontraport Page, you’ll do that in the page itself. There are two ways you can do this.
Let's say you want to set up a lead capture form that offers visitors a free resource in exchange for their email address. You might want the form to pop up automatically on your page.
Navigate to the page you want your pop-up form to appear on, then go to “Page Settings” on the left. Under “Ontraform Settings,” you’ll see three options at the bottom.
The first is “Pop A Lightbox On User Scroll”. This option allows you to make a form pop up when a visitor scrolls down a certain percentage of your page. Notice that when you toggle the “On” button, there are a bunch of settings here that let you customize things just how you want them. You can decide where you want the form to pop up, how often you want to show it to each visitor, and whether you want to dim the background when it appears.
You’ll also have an option to “Pop A Lightbox After Time On Page”. This is similar to the setting we just covered, but this one triggers after a certain amount of time, rather than when a user has scrolled.
Finally, we have that annoying option where we try to capture people’s attention just as they’re about to leave a page — “Pop a Lightbox On Exit Intent.” This is triggered when a visitor’s mouse moves outside the browser page, usually when they’re about to change the URL. It's annoying, but it can really work, too. So maybe it's worth a shot. Keep in mind that this particular setting won’t work on mobile devices.
The second way to publish your form on Ontraport Pages is to have it pop up when people click a button.
To set this up, start by setting up a link on your page. You can do that with a button or by highlighting text and clicking the link icon. When you go to set the link destination, scroll down and select “Ontraform Lightbox” and choose your form. Super simple!
Last but not least, if you want to publish this Ontraport Form on a page that’s not built in Ontraport, there are a few things you can do.
If your site uses WordPress and you want to embed the form on your page, the easiest way to do that is with our plugin. You can find that by searching for PilotPress in the wordpress extension search box. Once it’s installed and enabled on your site, you’ll see a button that allows you to insert a form right onto your page. We have a whole video on PilotPress, so check that out if you're going this route.
If your site is not a WordPress site, then you’ll find what you’re looking for by clicking the “Publish” button in the top right-hand corner. Here's where you'll get code that you can add to another site.
Ontraforms allows you to publish your form using one of three different methods:
With the “Automatic lightbox” option, your form will appear as a pop-up based on a set of triggers that are just like the ones we had in the Page editor.
Your second option is “Embedded in a page”. Your form will show up embedded in the page when it loads.
You can also “Click to Pop lightbox”. This option creates a button that will make your form pop up. The button can be text you enter, called the “Link text”, in the publish button pop-up. You can change the button to an image by finding the hosted URL of the image you want to use. Follow the directions on the pop-up to make sure you enter the hosted image URL correctly.
Once you have chosen your publishing method and configured your settings the way you want, copy the code that appears and paste it onto your web page.
That’s all there is to it — now you know all the different ways you can set up an Ontraport Form!
Next up, for those of you who love to code, or have professional web developers who can code for you, you can get into the nitty gritty with our Legacy Forms. If that's your thing, check it out in our “Legacy Forms” tour.
With Ontraport, you have a ton of options when it comes to creating forms for your page. Ontraport Forms are handy, whether you want to display your forms as pop-ups or if you need a form for your existing website and landing pages. Either way, we make it easy for you to create forms that fit your brand and vision.
In this video, we’re going to show you the different ways you can set up your forms in Ontraport — so let’s dive in!
If you hover over the “Contacts” tab and click “Forms,” you’ll find the Forms collection [show].
Now select “+New Form” and click “Ontraform” [show].
You can create a form by selecting one of our pre-built templates or you can create one from scratch. When you click “Start from Scratch,” you’ll be given a blank template for your form canvas [show].
When you click “+Block,” you’ll see several different block categories on your left. Block types are divided into several categories, such as “Banner,” “Footer,” “Header,” “Image,” “Order Form,” “Text” and so on [show these category options].
For this example, let’s go ahead and select “Smart Form” [show]. Remember that there are lots of form options that allow you to create some pretty elaborate content for your pop-up form. If you want to include images, slideshows, descriptions and even custom code, it’s all possible with this form builder.
To create the design you're looking for with your Smart Form, find and select a block that has the basic elements and layout that you want — you can always hide or delete elements to create your ideal design [show the selection of one of the designs].
Note that when you click on your block in the palette editor on the left-hand side, it’ll show up in the canvas on the right [show].
As you keep adding blocks to your form, you can click on each one to see them in more detail.
For example, when you click on the “Smart Form” block, you can edit the “Header,” “Sub-header,” “Image” and more [show].
As you build out your form, you can also change the vertical position of each block by hovering over each block on the palette [show]. Select the vertical arrow icon to the left of the block and click and drag the block to where you want it to appear [show the block being moved to a different vertical position]. If you’re not sure if you’re looking at the blocks, just look at the top of the palette; it will say “Blocks On This Form” [show].
You’ll also notice that each element displayed has a trash icon and a toggle switch. If you hover over each element, you can use the toggle switch to show or hide the element. Or, you can click the trash icon to delete an element entirely [show both these icons].
When you’re editing your elements, be sure to select the “Done” button on the palette when you’re finished making changes [show “Done” button].
For some elements in your block, you can actually click on them to make changes one layer deeper. Again, make sure to click “Done” to save any changes you make to these elements.
Now let’s navigate to your form settings. Select the block that contains the form [show]. The “Form Settings” should appear below the fields listed on the form. If you need more information about Form settings, be sure to watch our deep dive video, “Form Settings and Advanced Features.”
There are a few different ways to publish your forms but we’ll start with publishing on Ontraport Pages.
If you want to use this form as a pop-up on an Ontraport Page, you’ll do that in the page itself. There are two ways you can do this.
If you want to set up a lead capture form that offers visitors a free resource in exchange for their email address, you might want the form to pop up automatically on your page.
Navigate to the page you want your pop-up form to appear on, then go to “Page Settings” on the left [show]. Under “Ontraform Settings,” you’ll see three options at the bottom.
The first is “Pop A Lightbox On User Scroll” [show]. This option allows you to make a form pop up when a visitor scrolls down a certain percentage of your page that you get to determine. Notice that when you toggle the “On” button [show toggling of “Enable ONTRAform Lightbox” button], there are a bunch of settings here that let you customize things just how you want them, like where you want the form to pop up, how often you want to show this pop-up to visitors and whether or not you want to dim the rest of the page [show].
You’ll also have an option to “Pop A Lightbox After Time On Page” [show]. This is similar to the setting we just covered but this one triggers after a certain amount of time that you determine, rather than by how much of the page a user has scrolled [show toggling of Enable ONTRAform Lightbox button].
Finally, we have that annoying option where we try to capture people’s attention just as they’re about to leave a page — “Pop a Lightbox On Exit Intent” [show toggling of “Enable ONTRAform Lightbox” button]. This is triggered when a visitor’s mouse moves outside the browser page, usually when they’re about to change the URL. Keep in mind that this particular setting won’t work on mobile devices.
The second way to publish your form on Ontraport Pages is to have it pop up when people click a button.
To set this up, click on “Elements” and add your button to the page [show]. When you go to set the button link destination, simply scroll down and select “Ontraform Lightbox” and choose your form [show]. Super simple!
You can do the same thing with a text link by highlighting the text, selecting the link tool in the upper right-hand corner, and then clicking “Ontraform Lightbox” on the link-building screen [show].
Last but not least, if you want to publish this Ontraport Form on a page that’s not built in Ontraport, there are a few things you can do.
If your site uses WordPress and you want to embed the form on your page, the easiest way to do that is with our plugin. You can find that here [show]. Once it’s installed and enabled on your site, you’ll see a button that allows you to insert a form right onto your page.
If your site is not a WordPress site, then you’ll find what you’re looking for by clicking the “Publish” button in the top right-hand corner [show].
Ontraforms allows you to publish your form using one of three different methods:
With the “Automatic lightbox” option [show], your form will appear as a pop-up based on a set of triggers you specify, such as amount of seconds spent on page, how much of the page a visitor scrolls through or when a visitor’s cursor moves over to the URL bar above the page.
Your second option is “Embedded in a page” [show]. Your form will appear and remain on the page when it loads.
You can also “Click to Pop lightbox” [show]. This option creates a button that will make your form pop up. The button is based on a piece of text you enter called the “Link text” in the publish button pop-up. You can change the link button to an image by finding the hosted URL of the image you want to use. Follow the directions on the pop-up to make sure you enter the hosted image URL correctly.
Once you have selected your publishing method and configured your settings the way you want, copy and paste the code that appears onto your web page.
That’s all there is to it — now you know all the different ways you can set up an Ontraport Form!
For those of you who really love to code, or have professional web developers who can code for you, you can create forms using custom HTML, CSS or JavaScript with our Legacy Forms. Be sure to check it out in our “Legacy Forms” tour.
If you're wondering whether Ontraport Forms are the right tool, check out our video on when to use each form editor.
In this video, we’re going to show you several different ways you can set things up in our standalone Forms editor— so let’s dive in!
If you hover over the “Contacts” tab and click “Forms,” you’ll find the Forms collection.
Now select “+New Form” and click “Ontraform”.
You can create a form by selecting one of our pre-built templates or you can create one from scratch. When you click “Start from Scratch,” you’ll get a blank template for your form canvas.
When you click “+Block,” you’ll see several different block categories on your left. Block types are divided into several categories, such as “Banner,” “Footer,” “Header,” “Image,” “Order Form,” “Text” and so on.
For this example, let’s go ahead and select “Smart Form”. Remember that there are lots of form options that allow you to create some pretty elaborate content for your pop-up form. If you want to include images, slideshows, descriptions and even custom code, it’s all possible with this form builder.
Here's the thing you need to understand about building with Ontraforms. This is our v2 technology, so it's not quite the drag and drop experience that you get when building forms in Pages. With this editor, to create the design you're looking for, you'll find and select a block that has the basic elements and layout that you want. Then, you hide or delete elements to create your ideal design.
Note that when you click on your block in the palette editor on the left-hand side, it’ll show up in the canvas on the right.
As you keep adding blocks to your form, you can click on each one to see them in more detail.
For example, when you click on the “Smart Form” block, you can edit the “Header,” “Sub-header,” “Image” and more.
As you build out your form, you can also change the order of your blocks by dragging on the vertical arrow icon to the left of the block. Just drop in where you want it to appear.
You’ll also notice that each element displayed has a trash icon and a toggle switch. If you hover over each element, you can use the toggle switch to show or hide the element. Or, you can click the trash icon to delete an element entirely.
When you’re editing your elements, be sure to select the “Done” button on the palette when you’re finished making changes.
For some elements in your block, you can actually click on them to make changes one layer deeper. Again, make sure to click “Done” to save any changes you make to these elements.
Now let’s navigate to your form settings. Select the block that contains the form. The “Form Settings” should appear below the fields listed on the form. If you need more information about Form settings, be sure to watch our deep dive video, “Form Settings and Advanced Features.”
There are a few different ways to publish your forms but we’ll start with publishing on Ontraport Pages.
If you want to use this form as a pop-up on an Ontraport Page, you’ll do that in the page itself. There are two ways you can do this.
Let's say you want to set up a lead capture form that offers visitors a free resource in exchange for their email address. You might want the form to pop up automatically on your page.
Navigate to the page you want your pop-up form to appear on, then go to “Page Settings” on the left. Under “Ontraform Settings,” you’ll see three options at the bottom.
The first is “Pop A Lightbox On User Scroll”. This option allows you to make a form pop up when a visitor scrolls down a certain percentage of your page. Notice that when you toggle the “On” button, there are a bunch of settings here that let you customize things just how you want them. You can decide where you want the form to pop up, how often you want to show it to each visitor, and whether you want to dim the background when it appears.
You’ll also have an option to “Pop A Lightbox After Time On Page”. This is similar to the setting we just covered, but this one triggers after a certain amount of time, rather than when a user has scrolled.
Finally, we have that annoying option where we try to capture people’s attention just as they’re about to leave a page — “Pop a Lightbox On Exit Intent.” This is triggered when a visitor’s mouse moves outside the browser page, usually when they’re about to change the URL. It's annoying, but it can really work, too. So maybe it's worth a shot. Keep in mind that this particular setting won’t work on mobile devices.
The second way to publish your form on Ontraport Pages is to have it pop up when people click a button.
To set this up, start by setting up a link on your page. You can do that with a button or by highlighting text and clicking the link icon. When you go to set the link destination, scroll down and select “Ontraform Lightbox” and choose your form. Super simple!
Last but not least, if you want to publish this Ontraport Form on a page that’s not built in Ontraport, there are a few things you can do.
If your site uses WordPress and you want to embed the form on your page, the easiest way to do that is with our plugin. You can find that by searching for PilotPress in the wordpress extension search box. Once it’s installed and enabled on your site, you’ll see a button that allows you to insert a form right onto your page. We have a whole video on PilotPress, so check that out if you're going this route.
If your site is not a WordPress site, then you’ll find what you’re looking for by clicking the “Publish” button in the top right-hand corner. Here's where you'll get code that you can add to another site.
Ontraforms allows you to publish your form using one of three different methods:
With the “Automatic lightbox” option, your form will appear as a pop-up based on a set of triggers that are just like the ones we had in the Page editor.
Your second option is “Embedded in a page”. Your form will show up embedded in the page when it loads.
You can also “Click to Pop lightbox”. This option creates a button that will make your form pop up. The button can be text you enter, called the “Link text”, in the publish button pop-up. You can change the button to an image by finding the hosted URL of the image you want to use. Follow the directions on the pop-up to make sure you enter the hosted image URL correctly.
Once you have chosen your publishing method and configured your settings the way you want, copy the code that appears and paste it onto your web page.
That’s all there is to it — now you know all the different ways you can set up an Ontraport Form!
Next up, for those of you who love to code, or have professional web developers who can code for you, you can get into the nitty gritty with our Legacy Forms. If that's your thing, check it out in our “Legacy Forms” tour.
With Ontraport, you have a ton of options when it comes to creating forms for your page. Ontraport Forms are handy, whether you want to display your forms as pop-ups or if you need a form for your existing website and landing pages. Either way, we make it easy for you to create forms that fit your brand and vision.
In this video, we’re going to show you the different ways you can set up your forms in Ontraport — so let’s dive in!
If you hover over the “Contacts” tab and click “Forms,” you’ll find the Forms collection [show].
Now select “+New Form” and click “Ontraform” [show].
You can create a form by selecting one of our pre-built templates or you can create one from scratch. When you click “Start from Scratch,” you’ll be given a blank template for your form canvas [show].
When you click “+Block,” you’ll see several different block categories on your left. Block types are divided into several categories, such as “Banner,” “Footer,” “Header,” “Image,” “Order Form,” “Text” and so on [show these category options].
For this example, let’s go ahead and select “Smart Form” [show]. Remember that there are lots of form options that allow you to create some pretty elaborate content for your pop-up form. If you want to include images, slideshows, descriptions and even custom code, it’s all possible with this form builder.
To create the design you're looking for with your Smart Form, find and select a block that has the basic elements and layout that you want — you can always hide or delete elements to create your ideal design [show the selection of one of the designs].
Note that when you click on your block in the palette editor on the left-hand side, it’ll show up in the canvas on the right [show].
As you keep adding blocks to your form, you can click on each one to see them in more detail.
For example, when you click on the “Smart Form” block, you can edit the “Header,” “Sub-header,” “Image” and more [show].
As you build out your form, you can also change the vertical position of each block by hovering over each block on the palette [show]. Select the vertical arrow icon to the left of the block and click and drag the block to where you want it to appear [show the block being moved to a different vertical position]. If you’re not sure if you’re looking at the blocks, just look at the top of the palette; it will say “Blocks On This Form” [show].
You’ll also notice that each element displayed has a trash icon and a toggle switch. If you hover over each element, you can use the toggle switch to show or hide the element. Or, you can click the trash icon to delete an element entirely [show both these icons].
When you’re editing your elements, be sure to select the “Done” button on the palette when you’re finished making changes [show “Done” button].
For some elements in your block, you can actually click on them to make changes one layer deeper. Again, make sure to click “Done” to save any changes you make to these elements.
Now let’s navigate to your form settings. Select the block that contains the form [show]. The “Form Settings” should appear below the fields listed on the form. If you need more information about Form settings, be sure to watch our deep dive video, “Form Settings and Advanced Features.”
There are a few different ways to publish your forms but we’ll start with publishing on Ontraport Pages.
If you want to use this form as a pop-up on an Ontraport Page, you’ll do that in the page itself. There are two ways you can do this.
If you want to set up a lead capture form that offers visitors a free resource in exchange for their email address, you might want the form to pop up automatically on your page.
Navigate to the page you want your pop-up form to appear on, then go to “Page Settings” on the left [show]. Under “Ontraform Settings,” you’ll see three options at the bottom.
The first is “Pop A Lightbox On User Scroll” [show]. This option allows you to make a form pop up when a visitor scrolls down a certain percentage of your page that you get to determine. Notice that when you toggle the “On” button [show toggling of “Enable ONTRAform Lightbox” button], there are a bunch of settings here that let you customize things just how you want them, like where you want the form to pop up, how often you want to show this pop-up to visitors and whether or not you want to dim the rest of the page [show].
You’ll also have an option to “Pop A Lightbox After Time On Page” [show]. This is similar to the setting we just covered but this one triggers after a certain amount of time that you determine, rather than by how much of the page a user has scrolled [show toggling of Enable ONTRAform Lightbox button].
Finally, we have that annoying option where we try to capture people’s attention just as they’re about to leave a page — “Pop a Lightbox On Exit Intent” [show toggling of “Enable ONTRAform Lightbox” button]. This is triggered when a visitor’s mouse moves outside the browser page, usually when they’re about to change the URL. Keep in mind that this particular setting won’t work on mobile devices.
The second way to publish your form on Ontraport Pages is to have it pop up when people click a button.
To set this up, click on “Elements” and add your button to the page [show]. When you go to set the button link destination, simply scroll down and select “Ontraform Lightbox” and choose your form [show]. Super simple!
You can do the same thing with a text link by highlighting the text, selecting the link tool in the upper right-hand corner, and then clicking “Ontraform Lightbox” on the link-building screen [show].
Last but not least, if you want to publish this Ontraport Form on a page that’s not built in Ontraport, there are a few things you can do.
If your site uses WordPress and you want to embed the form on your page, the easiest way to do that is with our plugin. You can find that here [show]. Once it’s installed and enabled on your site, you’ll see a button that allows you to insert a form right onto your page.
If your site is not a WordPress site, then you’ll find what you’re looking for by clicking the “Publish” button in the top right-hand corner [show].
Ontraforms allows you to publish your form using one of three different methods:
With the “Automatic lightbox” option [show], your form will appear as a pop-up based on a set of triggers you specify, such as amount of seconds spent on page, how much of the page a visitor scrolls through or when a visitor’s cursor moves over to the URL bar above the page.
Your second option is “Embedded in a page” [show]. Your form will appear and remain on the page when it loads.
You can also “Click to Pop lightbox” [show]. This option creates a button that will make your form pop up. The button is based on a piece of text you enter called the “Link text” in the publish button pop-up. You can change the link button to an image by finding the hosted URL of the image you want to use. Follow the directions on the pop-up to make sure you enter the hosted image URL correctly.
Once you have selected your publishing method and configured your settings the way you want, copy and paste the code that appears onto your web page.
That’s all there is to it — now you know all the different ways you can set up an Ontraport Form!
For those of you who really love to code, or have professional web developers who can code for you, you can create forms using custom HTML, CSS or JavaScript with our Legacy Forms. Be sure to check it out in our “Legacy Forms” tour.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified