For complete control over the style and code of your form using custom HTML, CSS, or JavaScript, take a tour of Legacy Forms.
Solutions keyboard_arrow_down keyboard_arrow_up
Our Solutions
Ontraport's solutions work together to give you everything you need to run your business in one centralized, easy-to-use platform.
Sales +
CRMarrow_forward
Segment + Organizearrow_forward
Smart Pipelinesarrow_forward
Unified Contact Historyarrow_forward
Task Automationarrow_forward
Lead Scoring + Routingarrow_forward
Mobile Apparrow_forward
Trends arrow_forward
Ontraport Calendar arrow_forward
No-code Web Appsarrow_forward
Custom Objectsarrow_forward
Dynamic CMSarrow_forward
Conditional Contentarrow_forward
Membership Sitesarrow_forward
Paymentsarrow_forward
Order Formsarrow_forward
Offline Transactionsarrow_forward
Complex Offersarrow_forward
Upsells + Order bumpsarrow_forward
Decline Recoveryarrow_forward
Customer Centerarrow_forward
Referral Trackingarrow_forward
Pages + Formsarrow_forward
Drag and Drop Editorarrow_forward
Form Buildersarrow_forward
WordPress Integrationsarrow_forward
Marketing
Automationarrow_forward
Campaign Automationarrow_forward
Email + SMS Messagingarrow_forward
Email Deliverabilityarrow_forward
Tracking + Attributionarrow_forward
Facebook Custom Audiencesarrow_forward
Platformarrow_forward
API arrow_forward
Integrations arrow_forward
Security and Scalabilityarrow_forward
Industries we serve
Select your industry to see how our CRM and marketing software can support your growth
Learn more Resources keyboard_arrow_down keyboard_arrow_up
Pricing Chat Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog Research and Education
Bootcamp
Coursearrow_forward
Attend a hands-on training course designed to give users a solid foundation of software skills and marketing strategy.
Expert Certification
Coursearrow_forward
A course for business owners and marketing professionals wanting to support our mutual clients. Learn advanced marketing strategies and get exclusive perks.
Ontraport
Blogarrow_forward
Browse a collection of articles on marketing automation, email marketing, CRM, membership sites and more.
Step-by-Step
Templatesarrow_forward
Implement proven marketing processes with our easy-to-follow worksheets and checklists.
In-Depth
Guidesarrow_forward
Download our best-practice guides, complete with data-driven insights and tactics to help you optimize your marketing.
Podcastarrow_forward
Listen in as Ontraport CEO Landon Ray talks with with a star-studded cast of entrepreneurs, marketers and thought leaders.
Marketing
Blueprintsarrow_forward
Learn everything you need to know to develop fundamental marketing strategies with our digital handbooks.
Using Ontraport in Your Business
Software
Comparisonsarrow_forward
See if Ontraport is the right fit for you — compare the top marketing automation and CRM software on the market.
Setup Wizards
Libraryarrow_forward
Our Setup Wizards walk you through the steps to customize and launch a marketing campaign for your business in minutes.
Get the
Factsarrow_forward
View the most frequently asked questions about Ontraport so you can get clarity and feel confident in your buying decision.
Feature Use
Casesarrow_forward
See exactly what you can do with Ontraport, and learn how you can personalize it to perform your specific needs.
Calculate Your
ROIarrow_forward
Get an honest estimate of the return you can expect from an investment in Ontraport's software.
Exploring
Ontraportarrow_forward
Take a guided tour through the five phases of the customer lifecycle in a simulated business powered by Ontraport.
Try our free interactive customer portal demo!
Want to offer the convenient, self-service experiences your customers are looking for? Check out this free demo to see what you can create in Ontraport without code or developers.
Want to offer the convenient, self-service experiences your customers want?
Check out this free customer portal demo to see what you can build in Ontraport without code or developers.
Home > Ontraport for marketing > Forms > Legacy Forms
Legacy Forms
You'll learn:
- 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
Sam Flegal
Legacy Forms
For complete control over the style and code of your form using custom HTML, CSS, or JavaScript, take a tour of Legacy Forms.
- 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
Course Instructor
Sam Flegal
Related resources
[Block//Author//First Name] [Block//Author//Last Name] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
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 [Page//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 [Page//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 [Page//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 [Page//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.
settings
Turn your business on with Ontraport.