For complete control over the style and code of your form using custom HTML, CSS, or JavaScript, take a tour of Legacy Forms.
Home > Ontraport for marketing > Forms > Legacy Forms
Legacy Forms
Course Instructor
- Where to add fields and content to your form
- How to edit the style and appearance of your form
- How to set if-then conditions for your forms
- The four code options for publishing the form yourself
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
To style forms using custom HTML, CSS or JavaScript, you’ll need to use Legacy Forms that give you access to raw code. In this video, we’ll give you a tour of where you can go to build, customize and publish Legacy Forms in Ontraport.
Before we dive in, let’s go over a few quick details about Legacy Forms:
Just like Ontraport Forms, these are intended for pop-ups and for pages that aren’t built in Ontraport. They also allow you to show and hide form fields based on a contact’s activity, which lets you visually shrink a form in real-time and deliver tailored experiences based on what your leads and customers are saying.
One thing to note before we start: We only suggest utilizing Legacy Forms if you’re a web developer and need access to raw code. Otherwise, we recommend sticking with Ontraport forms — they make things a lot easier.
Ready? Let’s take a look around.
Just like Ontraport forms, you’ll find Legacy forms under the “Automations” tab [show]. Click on “Forms,” then select “Add New Form.” But this time, select “Smart Form.”
Right away, you’ll see a simple form with fields for First Name, Last Name and Email address. From there, you can add additional elements using this menu right above your form.
Let’s go over these different elements you can add to your Legacy Forms:
Click here to add fields to your form. This helps you gather specific information from leads and customers, like their contact info, occupations, birthdays and more.
Click here to add content to your form. While this element is designed for additional text, you can also add images, tables and even raw code here. Just use the menu on the left to customize.
Click “Add Separator” to insert a simple divider and create more space on your forms.
Want to use your form to get paid? Click here to add an Ontraport logo with an affiliate link. Any time somebody clicks it, you’ll receive commissions for referring new users.
If you have an ecommerce business, you might be planning to use your forms to sell products and collect payments. To add credit card fields and a product grid to your form, just click here.
You can also set “if-then” conditions for your forms by clicking here. These are great for creating a personalized experience for each individual. There are two ways to go about it:
First, you can choose to show or hide individual fields based on a person’s responses in the form, here.
For example, let’s say a fitness instructor has a pop-up form on her blog to collect visitors’ names, email addresses and fitness goals. When someone lists their fitness goal as “Losing Weight,” the form can automatically add a checkbox to receive her monthly accountability newsletter.
You can also use conditional redirects to drop each contact into a landing page or URL of your choice that aligns with their experience.
Let’s apply that to our “fitness instructor” example: If someone’s fitness goal is “Gaining Muscle,” the form can automatically redirect them to a page promoting a popular workout routine for bulking up.
If you want to add a reCAPTCHA element to your form, click here. We recommend using this to prevent spam submissions, since every contact is required to click the “I’m not a robot” checkbox before submitting.
Finally, if you need to edit the style and appearance of your form, you’ll want to use these three tabs to the left:
Tweak your fields with the Field Settings tab. This lets you adjust each field’s label, add optional placeholder text or include prefilled answers.
Use the Form Style tab to customize all the details of your form — label style, spacing, how each field looks before it’s selected, even the input style. You have lots of options here.
Finally, use the Background tab to change the background color, add images and even make border adjustments to the form as a whole.
To access other settings for your form’s opt-ins, campaigns, fill-out notifications and more, just click here.
You’re doing great! Now that you know how to create your Legacy Form, we only have one step left: Publishing it.
Start by clicking “Publish” in the top right corner [show]. You’ll notice that you have a few methods to choose from here:
First, you can publish the form yourself using one of four code options: a JavaScript Snippet, Light Box, Iframe or HTML.
If you want a quick and easy way to add your form to a page, the JavaScript Snippet is your best bet — just copy and paste the code wherever you want it to appear on your web page and the form will be there.
Or maybe you want to use a Light Box form that appears as a pop-up based on the triggers you configure. That’s where this code comes in handy.
You can also use the Iframe option to protect other content on your website from the form code. However, note that this method typically isn’t necessary — in most cases, you’ll be just fine using one of the first two options we discussed.
The last way to publish a Legacy Form yourself is to use the HTML version — this lets you access the raw-form code and add your own as necessary. Keep in mind, however, that it’s generally not a good idea to use the HTML code unless you’re a professional web developer. Without a strong background in coding, your forms will probably be more vulnerable to spam submissions and other kinds of hacking.
If you are familiar and comfortable with HTML, you can turn on access to this feature in the Administration menu. Just go to “Security,” click here, and toggle the switch “off.”
If you don’t want to install your form on your own, that’s OK, too. You have two more options to publish your new Legacy Form:
If you’re working with a webmaster, you can send the code directly to them by clicking here and simply filling in their email and any instructions that might be relevant.
Or, you can always keep things simple and click “Host my Form”. This automatically generates a URL for your Form to use internally.
Can you believe it? We’ve covered every type of form Ontraport has to offer. From pages to custom code, you can make forms anywhere and for almost anything. Speaking of “anything,” let’s take a look at some specific use cases. First up, we’ll go through updating existing records.
Before we dive in, let’s go over a few quick details about Legacy Forms:
Just like Ontraport Forms, these are intended for pop-ups and for pages that aren’t built in Ontraport. They also allow you to show and hide form fields based on a contact’s activity, which lets you visually shrink a form in real-time and deliver tailored experiences based on what your leads and customers are saying.
One thing to note before we start: We only suggest utilizing Legacy Forms if you’re a web developer and need access to raw code. Otherwise, we recommend sticking with Ontraport forms — they make things a lot easier.
Ready? Let’s take a look around.
Just like Ontraport forms, you’ll find Legacy forms under the “Automations” tab [show]. Click on “Forms,” then select “Add New Form.” But this time, select “Smart Form.”
Right away, you’ll see a simple form with fields for First Name, Last Name and Email address. From there, you can add additional elements using this menu right above your form.
Let’s go over these different elements you can add to your Legacy Forms:
Click here to add fields to your form. This helps you gather specific information from leads and customers, like their contact info, occupations, birthdays and more.
Click here to add content to your form. While this element is designed for additional text, you can also add images, tables and even raw code here. Just use the menu on the left to customize.
Click “Add Separator” to insert a simple divider and create more space on your forms.
Want to use your form to get paid? Click here to add an Ontraport logo with an affiliate link. Any time somebody clicks it, you’ll receive commissions for referring new users.
If you have an ecommerce business, you might be planning to use your forms to sell products and collect payments. To add credit card fields and a product grid to your form, just click here.
You can also set “if-then” conditions for your forms by clicking here. These are great for creating a personalized experience for each individual. There are two ways to go about it:
First, you can choose to show or hide individual fields based on a person’s responses in the form, here.
For example, let’s say a fitness instructor has a pop-up form on her blog to collect visitors’ names, email addresses and fitness goals. When someone lists their fitness goal as “Losing Weight,” the form can automatically add a checkbox to receive her monthly accountability newsletter.
You can also use conditional redirects to drop each contact into a landing page or URL of your choice that aligns with their experience.
Let’s apply that to our “fitness instructor” example: If someone’s fitness goal is “Gaining Muscle,” the form can automatically redirect them to a page promoting a popular workout routine for bulking up.
If you want to add a reCAPTCHA element to your form, click here. We recommend using this to prevent spam submissions, since every contact is required to click the “I’m not a robot” checkbox before submitting.
Finally, if you need to edit the style and appearance of your form, you’ll want to use these three tabs to the left:
Tweak your fields with the Field Settings tab. This lets you adjust each field’s label, add optional placeholder text or include prefilled answers.
Use the Form Style tab to customize all the details of your form — label style, spacing, how each field looks before it’s selected, even the input style. You have lots of options here.
Finally, use the Background tab to change the background color, add images and even make border adjustments to the form as a whole.
To access other settings for your form’s opt-ins, campaigns, fill-out notifications and more, just click here.
You’re doing great! Now that you know how to create your Legacy Form, we only have one step left: Publishing it.
Start by clicking “Publish” in the top right corner [show]. You’ll notice that you have a few methods to choose from here:
First, you can publish the form yourself using one of four code options: a JavaScript Snippet, Light Box, Iframe or HTML.
If you want a quick and easy way to add your form to a page, the JavaScript Snippet is your best bet — just copy and paste the code wherever you want it to appear on your web page and the form will be there.
Or maybe you want to use a Light Box form that appears as a pop-up based on the triggers you configure. That’s where this code comes in handy.
You can also use the Iframe option to protect other content on your website from the form code. However, note that this method typically isn’t necessary — in most cases, you’ll be just fine using one of the first two options we discussed.
The last way to publish a Legacy Form yourself is to use the HTML version — this lets you access the raw-form code and add your own as necessary. Keep in mind, however, that it’s generally not a good idea to use the HTML code unless you’re a professional web developer. Without a strong background in coding, your forms will probably be more vulnerable to spam submissions and other kinds of hacking.
If you are familiar and comfortable with HTML, you can turn on access to this feature in the Administration menu. Just go to “Security,” click here, and toggle the switch “off.”
If you don’t want to install your form on your own, that’s OK, too. You have two more options to publish your new Legacy Form:
If you’re working with a webmaster, you can send the code directly to them by clicking here and simply filling in their email and any instructions that might be relevant.
Or, you can always keep things simple and click “Host my Form”. This automatically generates a URL for your Form to use internally.
Can you believe it? We’ve covered every type of form Ontraport has to offer. From pages to custom code, you can make forms anywhere and for almost anything. Speaking of “anything,” let’s take a look at some specific use cases. First up, we’ll go through updating existing records.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified