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.
Get a demo
Resources keyboard_arrow_down keyboard_arrow_up
Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog
Pricing Chat
HomeOntraport for marketingForms > Legacy Forms
Home > Forms  >  Legacy Forms
error
Attention: this video showcases a feature that has since been updated. Please check out the support article.
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.
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
Instructor
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.
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
Course Instructor
Sam Flegal
Related resources
Comments
settings
settings
settings
settings
[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 [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.
About Ontraport
Partners & Integrations
Resources
Getting Started

Turn your business on with Ontraport.

[bot_catcher]