Company Blog Support
Martin Cogburn
posted

Contents

    Back to Top

    Legacy Smart Form Builder Overview

    About

    This article covers our older legacy Smart Forms. For modern, mobile responsive ONTRAforms please see our articles on ONTRAforms and ONTRApages.

    For web forms, here's an article ONTRAforms. If you'd like step-by-step instructions right inside your app, check out our ONTRAPORT Project on creating an ONTRAform.

    If you want to build a web page, here's an article on ONTRApages. And here's an ONTRAPORT project on how to build an ONTRApage landing page.

     

    ONTRAPORT allows you to create very sophisticated web forms that you can quickly add to your website. What makes our forms ‘smart’ is that they can be set up to add items such as tags to the contact as soon as he or she clicks submit or even to drop them right into your pre-designed marketing sequences, fire rules based on field fill-outs, send them to a designated thank you page based on field fill-outs, show/hide fields based on field fill-outs, or route them to someone on your team of salespeople, automatically.

    Note: This Knowledge Base article covers our legacy Smart Form editor that retains some advanced features such as show / hide content based on form entries, content areas that accept raw HTML and conditional redirects. When creating a new legacy Smart Form if one of these advanced features is required you would select the Smart Form icon on the right.



    Forms are essential in capturing contact info from your web visitors that will allow you to keep in touch with them over time. The most common use for SmartForms is to give people a way to raise their hand and opt-in for more information from you, but there are many more uses.

     

    How to Create a Basic Smart Form

    1) Create

    1. Click on Smart Forms in the Contacts collection

    2. Click the Add Smart Form button in the upper right corner 

    3. Name your Form

    4. Add your fields
      1. What’s a Field? Fields are the basic unit of data entry in a contact record. It’s a space in your database for a particular item of information or data. For example, first name is a field that is used to retain a contact’s first name. ONTRAPORT offers a set of default fields such as first name, last name, and email. ONTRAPORT also offers the ability for you to add Custom Fields that are specific to your business. You can place your fields on a Smart Form to capture information automatically.

         

      2. Adding Fields

        1. Default fields on our Smart Forms are First Name, Last Name and Email

        2. If you want to add another existing field such as 'address,' click the Add Field action button

          add-field.png

    5. Customize Your Field Labels and Field Settings:

      1. Your Field Settings tab is where you designate if you’d like certain fields to be required before contacts can submit their information and where you can change the text of a particular field label.

      2. Field Labels

        1. Click on a field and make sure the Field Settings tab is selected

        2. Adjust your Field Settings for each field

          1. Required Checkbox: Checking this checkbox means that your contacts must fill out the selected field before submitting it. Tip: If you’re capturing leads, we recommend checking the required checkbox on the email address field and first name field.

          2. Field Label: This is the name of the field as it appears on the form. The field name will appear as it was created in your database, but the SmartForm will appear as listed in the Field Label section.  

    6. Order Your Fields

      1. Place your fields in the order you’d like them to appear by clicking and dragging them into your desired location. Tip: Snap two fields in one row. You can place two fields on the same row by clicking the small arrow next to a field.

        adding and moving fields


    2) Style your form

    1. Field Style Basics: After clicking on a field, the ‘Form Style’ tab is where you can style your form to your heart’s content. This is much like any word processing toolbar that allows you to adjust font type, size, color, etc. The information below includes the basics!

      1. Note: Adjusting the font type, size and color of one field applies it to all fields in the form.

      2. To adjust the basic look of your form fields, click on a field and select the Form Style tab.

      3. Adjust the Field Label Styles as desired

          1. Font Family: This adjusts the type of font used on your field labels. 

          2. Font Size: This adjusts the size of the font. 

          3. Font Color: This adjusts the field label color. Use the slidebar on the right to select a color range and the small circle to adjust exact color. You can also enter hex colors in the text box.

          4. Text Style: This adjusts the style of the field labels including bold, italic, and underline.

    2. Form Size, Background & Border

      1. Adjust Form Size: You can adjust the width of your form by using the left/right arrows to the right of your form. 

      2. Background Color: This section allows you to modify the background of your smart form

        1. Click the Background tab to modify the background of your form and select from the color palette in the background color section.

          1. Tip: If you’d like your smart form to take on the color of your website page background, you can select a transparent background by pressing the small x in the background color field. The background color field will then show the word ‘TRANSPARENT’. 

      3. Border Transparent or Color: This section allows you to add/remove a border around your smart form.

        1. Click the Background tab to modify the background of your form and select your desired look from the Border Style pulldown menu.

    3) Modify Your Settings

    1. This section handles all the backend operations and the ‘automagic’ of your smart form including your opt-in settings, thank you page, tags, sequences, rules, and form fill out notifications. To navigate to it, click the Settings Tab.

      settings tab

    2. Opt-In Settings

      1. Opt-In: We have three opt-in settings available – Double Opt-In Required, Double Opt-In Optional and Single. Select the radio button on the option you’d prefer.

        opt-in settings

      2. Thank You Page: This is the page that contacts will see after they fill out the form. You can use our default thank you page, a landing page you’ve built in our landing pages editor or your own custom URL that you’ve created on your website.

    3. Manage Form Fills: This section allows you to customize what tags, sequences, and rules get applied to a contact when they fill out your Smartform. Note that every form submission, even failed Order Form transactions will add these Tags and Sequences. See the section on Conditional Rules to add Tags or Sequences only on a successful payment.

      manage form fills

      1. Tags: Tagging your contacts as they come in through your forms is a simple, powerful way to keep your system organized and ensure you're easily able to manage and communicate with them with relevance in the future.

        1. If your tag is already created, click the tags dropdown menu and begin typing the name of your tag. Then select the tag you’d like to add each time a contact fills out the smart form. Learn all about tags here.

        2. Tip: Want to create a tag on the fly? Click Create New Tag in the tag selection dropdown menu to add a new tag.

      2. Sequences: Sequences allow each contact who fills out your form to go through a series of actions or steps including emails, tasks, rules and postcards. Of all the possible ways to subscribe your contacts to sequences, doing so right from your forms is among the smartest and most strategic.

        1. If your sequence is already created, click the sequences dropdown menu and begin typing the name of your sequence. Then select the sequence you’d like to add the contact to, each time they fill out the smart form. Learn all about sequences here.

        2. Tip: Want to create a sequence on the fly? Click Create New Sequence in the sequence selection dropdown menu add a new step or date sequence.

      3. Always On Rules: You can create rules that are triggered  when a contact fills out your smart form, enabling you to run sophisticated actions on contacts as they come in through your forms. Click the +Add Rule button, name the rule, add conditions and what should happen. Learn all about rules here.

         rules

      4. Conditional Rules: The Smart Form Always On Rules section becomes the Conditional Rules section if you add a product to sell to the form. This allows you to fine tune the response based on the result of the charge attempt. See Creating an Order Forme-link.png for more information.

    4. Notification: If you’d like to be notified by email every time a contact fills out your smart form, insert your email address in the text box under the Send notification to this email address when this form is filled out section.

      notification email

    5. Routing: Select who on your team should be the contact owner of any new contacts filling out this form. You may also choose to add new contacts to a lead router.

    4) Publish your form on a website or landing page

    1. Now that your form is created, styled, and set you’re ready to test and publish! The Publish form button gives you multiple options when it comes to placing your form online.

      publish form button

    2. Decide where you’re going to publish your form: Website or Landing Page?

      1. Website

        1. Wordpress Site

          1. PilotPress: This will insert the javascript form code into your WordPress site. This works with most WordPress sites.

            1. Make sure your Wordpress Site is integrated with ONTRAPORT and that PilotPress is installed on your Wordpress site. Learn how to do that here.

            2. Log into the admin area of your WordPress site 

            3. Select the page or post that you’d like to add the smart form to

            4. Click the Add ONTRAPORT media button 

            5. Select the form you’d like to place

            6. Publish the page or save it as a draft.

            7. Test the form by filling it out to ensure your tags, sequences, and rules fire appropriately.

              1. Tip: Use an email address that isn’t already in your ONTRAPORT account or make sure you delete the related tags and sequences that fire upon form fillout. Sequences won’t fire twice if you’re already subscribed to them!

          2. Copy/Paste

            1. You may also copy and paste form code into your WordPress page.

            2. The Publish form button gives you multiple options when it comes to placing your form online. Javascript Snippet is the easiest version to manage later, as all updates you make to the form in ONTRAPORT are automatically propagated to all versions of the form on line. The HTML Version is used when you want to have a developer modify the form code in some manner, but may require you to repeat these steps and copy / paste the code back into all your webpages if you make a change to it.



            3. Select the form code you desire. Copy the desired form code by pressing ctrl+c (command+c on a Mac) or right-clicking your mouse and highlighting the word copy. 

            4. Find and edit the page or post that you’d like to put the Smart Form on. Then click the Text tab at the top right of the editor window:



            5. Paste the copied form code onto your web page by pressing ctrl+v (command+v on mac) or right-clicking and selecting the paste command. Save the page.

          3. Widget

            1. WordPress sites have sidebars called widgets available for various content including forms.

            2. Log into the admin section of your WordPress site 

            3. In most themes, from your dashboard, click the Appearance menu, then Widgets

            4. Choose a text widget and drag it to your sidebar widget area. 

            5. Copy/Paste the JavascriptFancy Lightbox, or HTML Version Smart Form code into the Text widget. Then click the Save button. 

        2. Other Site (HTML/Joomla/ASP, etc)

          1. Cut/Paste

            1. The Publish form button gives you multiple options when it comes to placing your form online. Javascript Snippet is the easiest version to manage later, as all updates you make to the form in ONTRAPORT are automatically propagated to all versions of the form on line. The HTML Version is used when you want to have a developer modify the form code in some manner, but may require you to repeat these steps and copy / paste the code back into all your webpages if you make a change to it.



            2. Copy the desired form code by pressing ctrl+c (command+c on a Mac) or right-clicking your mouse and highlighting the word copy. 

            3. Find and edit the page that you’d like to put the SmartForm on.  

            4. Paste the copied form code onto your web page by pressing ctrl+v (command+v on mac) or right-clicking and selecting the paste command.

          2. About the different types of form code: Javascript Snippet and HTML are the most common.

            1. Javascript Snippet: Uses a language that is easy for you to place on your site. You can modify anything about the form in ONTRAPORT and it will automatically update on your website. 

            2. Light Box: places your SmartForm in a pop-up box which creates an overlay over the page while the main page content is darkened in the background. It is used to promote opt-ins when contacts visit your web page. This version disables tracking page visits and Partner promo links. If you are interested in full featured light box style forms, please use ONTRAforms or ONTRApages. 

            3. Iframe: This is a last resort that prevents the website from disrupting the look of the form. While this option will make the form appear exactly as you designed it in the form builder, like the Light Box version it will disable page tracking and Partner promo tool tracking. In addition, some browsers may "alert" the contact that the iframe exists due to malware that will sometimes use iframes. 

            4. HTML: This is the rawest form of coding that also allows a programmer to customize the form even further using HTML & CSS. While customizable, it does not automatically update all features on the form when you update it in ONTRAPORT. You will have to copy / paste the form code into your web page again. You can change the items on the Settings tab and they will propagate without reposting the HTML form code (these are Tags, Sequences, Rules, and Notifications).

        3. Landing Page

          1. Legacy Landing Page Form LayerAdding the form as a form layer is the simplest way of placing a form on a landing page.

            1. Click on Landing Pages in your navigation bar

            2. Click the New Landing page button in the upper right hand corner.

            3. Click the +New Item button and select Form 

            4. Select the form you’d like placed on the page from the <Select Form> drop down. 


            5. The form will appear on the page and you can move it anywhere on the page that you’d like.  Once this landing page is ready, you can host the page, test the form and go live!

     

    Field Settings

    What are field settings?

    The items here allow you to change the settings for a single field. Click a new field within your canvas area to reveal the field settings for that particular field.

    Required

    This is where you can designate a field as required.

    Field Label

    This is the name of the field as it appears on the form.

    It’s recommended to label your fields something different than what the field is called in your system. For instance you may have a field called “Interest” that you’d prefer to label as “What are you most interested in?” for greater clarity.

    Prefill

    This allows you to add text into the field itself for clarification or further explanation. Prefill will submit with the form if you don't change it, like a default entry.

    Don’t use this for required fields because your prefill value will count as the required entry, thus foiling your efforts to glean that bit of info.

    Placeholder

    Placeholder is similar to prefill but it disappears when users click on the field or submit the form.

     

     

     

    Background Tab

    Background

    This area contains the following settings if you’d like to add a background image, position it, have it repeat, or simply use a background of a particular color:

    • Background color
    • Background image
    • Background position
    • Background repeat

    Border

    This area contains the following settings to add and adjust a form border, style it, and size it:

    • Border style
    • Border color
    • Border size
    • Border radius

    Padding

    See spacing and padding key.

    Page Background (for hosted items)

    This area contains the same settings as the above background settings for forms that will be hosted on their own page with ONTRAPORT.

     

    Action Buttons

     

    Add Field

    Insert Contact Record fields into your form (or create new ones!)

    Add Content

    Add content (images, text, tables, code) to your form. 

    Add Separator

    Add a separation line between sections of your form.

    Get Paid

    Add an ONTRAPORT Partner link image to your form.

    Sell Products

    Turn your smartform into a customizable order form. Add your product(s) and tweak the shipping, payment method, payment options, tax, invoice, and design settings.

    Conditions

    Add conditions to your forms (see Form Conditions for more information).

    Captcha

    Add a Captcha to your form. A Captcha is the only way to prevent spam-bot submissions from creating Contact Records. 

    Opt-in Settingse-link.png

     

     

    Adding Contact Tags, Sequences, and Rules to Form

    Where do I do this?

    The Manage Form Fills and Always On Rules sections are where you customize what tags, sequences, and rules get applied to a contact when they come through your form.

     

     

     

     

    Tagging contacts who fill out your form

    Tagging your contacts as they come in through your forms is a simple, powerful way to keep your system organized and ensure you're easily able to manage and communicate with them with relevance in the future.

    Why?

    Sending an untagged lead into your database is like tossing your lucky quarter into a bag full of change. It’s in there but you’ll be lucky to ever find it again.This helps you segment your list automatically right as new contacts come into your database! When choosing how you'd like these incoming contacts to be tagged, consider..."what info will help me manage and communicate these people later on?".

    Some obvious tags may be: what form are they coming through. So, if the form you're creating is your newsletter signup form, you might create and use a tag called: Form: Newsletter Signup. You may also tag based on interest. Let's say for instance that you sell pet products for dogs and cats. If this form is for your cat products, you may want to tag 'em with your Interest: Cat Products" tag.

    How?

    You can choose from a list of the tags you've already created, or, in case you haven't already created the tag that will handle this bit of communication, you can create a brand new tag on the fly by clicking the Select Tag menu and selecting Create New Tag.

    Subscribing contacts to sequences upon form fillout

    Of all the possible ways to subscribe your contacts to sequences, doing so right from your forms is among the smartest and most strategic.

    Why?

    In most cases, when people fill out your form, whether it's a lead capture form, and order form, or an Affiliate signup form, you'll want to send them something in return. Since the sequence is what will deliver whatever information, resource, or other communication to respondents, it's smart to have people automatically subscribed to the appropriate sequence(s) right from the form.

    How?

    You can choose from a list of the sequences you've already created, or, in case you haven't already created the sequence that will handle this bit of communication, you can create a brand new, empty sequence on the fly by clicking the Select Sequence menu and selecting Create New Sequence. Be sure though, to open up the sequence later on, within the Sequences collection, and create the steps you'd like in there.

     

    Create rules to fire upon form fillout

    You can create rules that get run on contacts when they click submit on your form, enabling you to run sophisticated actions on contacts as they come in through your forms.

    Why?

    Of course, you've already got a separate place (just above) where you can have contacts tagged or subscribed to sequences, right? So why would you want to run other kinds of rules on contacts as they come in through your form? There are a number of reasons. Here are a few:

    • When contacts come in through your order forms, perhaps you’d like them to be removed from all of your marketing sequences. This would be a good place to set that up.
    • Maybe you'd just like them sent a one-off email or postcard, but not subscribed to a sequence.
    • Maybe you'd like to have a certain field in their contact record changed.

    You can have as many actions taken on contacts as you’d like.

    How?

    You set these rules up just as you do with other rules.

    1. Click + Add Rule
    2. Name the rule (name it something intuitive, like what it does).
    3. Set the condition under And This Is True: (what must also be true in order for this rule to affect someone).
    4. Set the response under Then Do This: (what will happen to the contact as a result of the rule acting upon them).
    5. Click Save

    Note that you don’t need to set the trigger, as with a global rule, because the trigger is already set for form rules. Of course, the trigger of a this type of rule is that the contact filled out the form!

    In Plain English

    So, said in plain English, these rules work like this: WHEN contact fills out form, AND this is true, then DO this action.

    Example 1

    Let’s say you want to add a rule that sends a postcard when they fill out the form, but only if they’re tagged as “hot prospects”.

    1. You'd name it something like “When they fill out form, if they’re tagged as ‘hot prospects’, then send "hot prospect" postcard.
    2. Set And This Is True: to be that they’re that they’re tagged with the tag “Hot Prospect”.
    3. Set the Then Do This: part to be that they get sent a postcard.
    4. Select which postcard.
    5. Click Save.

    Example 2 (advanced)

    Let's say you are hosting a conference in 3 different cities in 3 different months, each month a different city. Then let's say you'd like to have a form that allows someone to select one of those three cities in which you're hosting a conference in a dropdown menu which in turn assigns them a tag representing the proper month that then groups the contacts. Here's what you would do:

    1. Create a custom field and add options for 3 different cities (i.e. Melbourne, Chicago, Manchester)
    2. Create 3 different tags on the form. One for 3 separate months corresponding to each city the event is held in at that time (i.e. March, June, September)
    3. Create 3 rules on the form. Each of the 3 rules should have And This Is True: set to A field meets a given criteria and Then Do This: set to Add Contact to Tag. The field in the condition being the city field and the tag being a month you've assigned to the city. For example, if someone selects Manchester, they're then assigned the tag September by the form rule.
    4. Create 3 groups in the in the contacts collection. Each based on the conference month in which the criteria is 'Contact tag contains [Your tag here]'

     

     

    Form Conditionse-link.png

     

     

    Advanced Form Settings

    Override Email Address Merge with Cookie Data

    Whenever someone fills out one of your forms, opens up one of your emails, or visits one of your PURL pages, we automatically place a special tracking cookie onto their browser that identifies them so when they visit your site in the future (provided your site has our tracking scripts on it). This is precisely how we're able to provide all the great site-visit tracking information for you in the contact log area of your contacts' records.

    In most cases, when someone fills out one of your forms, our software looks at their email address to decide whether they're a new contact or if they already exist in your database. If the email address matches one of your existing contact records, then the new info is simply merged in with the existing record for this contact. If not, they're treated as a new contact and a brand new contact record gets created for them.

    However, when you check the 'Override Email Address Merge with Cookie Data' checkbox, it makes it so that if we already know who the contact is based on their cookie data, then regardless of what they put as their email address - or even if they don't input one at all - we still update the contact record for that contact..

    This feature is typically used when:

    1. You want to use a SmartForm in order to allow your current contacts to update their existing contact info on a form where you don't want to have (or require) email address.
    2. You want to use two or more forms strung together, one after the other to gather progressively more information, where only the first form in the series requires email address. In this case, you wouldn't check the 'override email merge' box on the first form but would on all subsequent forms. That way, the new record will be created (and the cookie will be set) on the first form, and all additional data gathered from subsequent forms will be added to that contact's record.

    Note: If you're already using forms in either of the above ways (and you've installed the javascript or hybrid versions of the form) then you should go into the form builder, open the forms in question, and check this box.  Again, you only need to do this if you're using the javascript or hybrid versions of the form code.

    Pass CGI variables to landing/thank-you page

    This is an advanced feature that takes the data input into form fields and puts it in the URL of the Thank You page so that it can be used by other scripts. If you don’t understand this, ignore it. It’s for geeks.

     

     

    Geolocation

    Smartforms use IP geolocation to determine city, state and zip code for new contacts who haven’t filled out location details. Note: this will only take affect if these fields were not manually entered by the contact on that smartform. If you would like this feature turned off, just contact our support team.

     

    Index ↑

    Posting your Form

    The Publish form button gives you multiple options when it comes to placing your form online:


    Three options are available via the links on the left, I will install my Form, Send to my webmaster and Host my Form.

    I will install my form

    Select from the following types of code/methods we supply to place a form on your website.

    • Javascript Snippet

      This is the easiest method. Only a small snippet of code is required to copy and paste onto your website, and all the form code is retrieved from the OTNRAPORT servers when the page is displayed. This allows you to copy and paste the form code once. Any changes to the form made within ONTRAPORT will automatically be reflected wherever the form code is posted

    • Light Box

      Provides a code snippet that generates a link. When the link is clicked, the form pops up in the center of the window. You can edit the text for the link, or substitute an HTML image tag to use an image as the link. Changes made in ONTRAPORT will automatically be reflected on your website without having to copy and paste the form again.

    • iFrame

      IFrame code is the most robust, and should be used if your website experiences jQuery conflicts with ONTRAPORT forms. Changes made in ONTRAPORT will automatically be reflected on your website without having to copy and paste the form again.

    • HTML Version

      If you want to change the HTML/CSS of the form use this version. Please be cautious when changing this code, and be mindful that we cannot support custom coded forms. If you change the form, you must copy and paste the form code on your website again.


    Send to my Webmaster

    This option allows you to send the HTML and Javascript form code to your webmaster

    Have ONTRAPORT host my form

    This option makes ONTRAPORT host the form on its own page. The link to the hosted page is given to you upon selecting this option. For order forms, remember to change the "http:" to "https:" to serve the page from our secure servers.

     

     

    FAQs

    Q. I want all my contacts to verify their email address on my forms. Can I do that?

    A. Yes, add the Confirm Email field to your form.  

     

     

     

     

     

    Have more questions? Submit a request

    Comments

    Powered by Zendesk