Company Blog Support
Frank Hagan
posted

Contents

    Back to Top

    ONTRAforms

    About ONTRAforms

    ONTRAforms are beautiful, responsive opt-in and order forms you can host on any web page. You can create them from scratch or choose from our impressive library of professionally designed templates. The easy to use interface features an innovative click-to-select editor in which you stack and customize pre-built Blocks of content. You can rename and reuse Blocks you have customized over and over again.

     

    A unique feature of ONTRAforms is automated prefill of the form from cookie data. If the person visiting the page has their email address, first name, last name, etc. in a cookie set by ONTRAPORT the form will automatically prefill those fields.

     

    When publishing your form, you can choose it to be a static form positioned on the web page, a lightbox pop up, or a click-to-pop-up link or image. The lightbox pop up can be triggered by time on the page, scrolling past a certain percentage of the page, or when "exit intent" is detected.

     

    Quick Start

    Want to jump right in and create an ONTRAform in your ONTRAPORT account with step-by-step instructions? Make sure you are logged in on another tab in this browser and click this link: Create an ONTRAform.

    This opens an ONTRAPORT Project within your account. ONTRAPORT Projects are step-by-step in-app instructions with a checklist to track your progress. You can stop and resume the Project at any time. 

    Getting Started with ONTRAforms

    1. In the Contacts collection click on Forms. Click the New Form button.

    2. Click the Create New button on the ONTRAform icon.  Show / Hide

      choose ONTRA or Smart Forms

    3. The Form Templates menu is shown in the Palette area (the left side column). Use it to filter the templates to make your selection. Show / Hide

      ONTRAforms templates

      1. You can display All Templates or templates created for specific functions such as By Type, By Industry, By Author and By Tags. Inside each of these sections are filters to focus your template search.

      2. The ONTRAPORT Marketplace allows you and other ONTRAPORT clients to share ONTRAform templates you have configured. The shared templates can be free, incur a one-time charge or subscription fee. Sharing options include making the template available to all ONTRAPORT clients, or to specific ONTRAPORT clients. My Shared Templates are templates you have shared, and Shared With Me templates are those templates shared with you. Purchased will contain all the templates you have purchased.

      3. All free templates are shown by clicking the Free filter item.

      4. No matter the view, all templates are clearly identified with either "Free" or the price.  Show / Hide

        templates marked free or paid

      5. You can create your own template by selecting the Start From Scratch template located in the top row.

    4. Templates and blocks reserved for ONTRAPORT Pro and higher accounts have an ONTRAPORT PRO banner. These include blocks for features not available in ONTRAPORT Basic accounts, such as Order Form blocks, Upsell Form blocks, etc.

     

    Selecting a Template and Using Blocks

    ONTRAforms are created using Blocks, horizontal slices of the form you arrange to create your design. Blocks are designed for different types of content. Each Block can have several different layouts to choose from, and within those layouts different colors, backgrounds and styles. Changes are made in the ONTRAform editor in true visual mode, showing you the new content immediately. The editor window is divided into the Palette on the left and the Canvas on the right where the blocks are displayed. Editing can be done either directly on the Canvas for some block elements, or on the Palette. Show / Hide


    Palette and Canvas

     

    After a Block is placed on the page you can edit it. Hover over the Block to reveal the editing choices. Next and Prev cycle through the available Block layouts. The Add Block buttons allow you to add a Block above or below, and the EDIT button allows you to edit the content on the Block. The pencil icon applies styles to the individual block, and the plus sign icon allows you to copy the block (usually after editing) to use it again on the page. Show / Hide


    Style or Copy Block Icons

     

    Thousands of combinations are possible and all remain fully mobile responsive when published.

     

     

    Adding and Using Blocks

    1. Templates are composed of Blocks, horizontal slices of the form you can rearrange or replace to perfect your design.

    2. Changes are made in the ONTRAforms editor in true visual mode, showing you the new content immediately. The editor window is divided into the Palette on the left where most editing is done, and the Canvas on the right where the Blocks are displayed.

      Palette and Canvas

    3. Each Block can have several different layouts to choose from. Hover over the Block and click the Prev or Next icons to display the different layouts.

       

    4. The three icons in the top right allow you to edit the style of the Block (pencil icon), create a copy of the Block on the same page (plus sign) or remove the Block from the page (trash can icon).

       

    5. Hover over the Block and click the + Add Block icon to add a new Block above or below the Block. The Palette will list the Block categories.

       

      Palette View of Block Categories

    6. Select a Block Category in the Palette to narrow the choices by type of Block. 
       

    Style: Colors, Fonts and Page (form) Width

    ONTRAforms use the colors, fonts and page styling of material design, tested and proven to increase engagement and present content in the most readable and search-engine friendly manner.

    The nomenclature in the editor is shared between ONTRAforms, ONTRApages and ONTRAmail. For ONTRAforms, "Page" refers to the entire form, as shown in this section. The overall page (form) design can be modified by selecting the element on the top styling bar on the Canvas (it is visible when the Palette is in the "Blocks on This From" view):

    top styling bar

    No customization is necessary to create pleasing layouts, and we encourage you to try the pre-formatted font packs and color palettes without extensive modification to maintain the material design standards. This will give you time to fine tune your content and focus on growing your business. But for those who need to modify fonts and colors, we have extensive customization options:

    Page Fonts

    A selection of 39 Page Font collections provide a set of fonts for 8 different text elements in your ONTRAform: Header 1, Header 2, Header 3, Label, Button, Large Body Text, Body Text, and Quote. You can edit each one for font family, font size, font face, line height and font weight, and can toggle it to italics as well. The changes you make to a font here cascade throughout the page.

    edit page font

    Click Font Suggestions at the bottom to display all 39 Page Font sets in the Palette. As you hover over the suggested font sets in the Palette the display in the Canvas shows the fonts. 

    Colors

    39 color palettes use five related color elements, Primary, Complementary, Dark, Light, and White. Click the color icon to display the selected colors. Click on the color element name to reveal the color editing functions. Type in the color hex value or choose a color from the color picker. The color picker has two modes, the default 256 web-safe color tile mode and, by clicking the artist's palette icon at the bottom, an infinite slider color picker.

    edit page colors

    Click the Color Suggestions link to see all 39 color palettes in the Palette on the left. As your mouse hovers over a color palette the Canvas previews the new colors.

    Changes you make to the page style apply only to the current form, and do not get saved with the color palette for use in other pages. To re-use your color and font choices use the Copy from form function when creating a new form or the Renaming and Saving Blocks function for individual Blocks. 
     

    Page Width

    Click Page Width to select the width of the form. The ONTRAform will be restricted to that total width, centered in the browser viewport.

    edit page width

     

    Page Background

    The Page Background dialog allows you to choose an image, a color, or a transparent background.

    edit page background

    Type in the hex color value, or select one of the 256 web-safe colors. Click on the artist's palette icon in the color picker to use the color slider to choose a color. 

    Display of the page background may be hidden by background colors or images in individual Blocks. Edit each Block's background to the same color or choose "transparent" to allow the form background to show through.

     Editing Content in Blocks

    The ONTRAforms editor is divided into two sections, the Palette on the left, and the larger Canvas on the right where the blocks are displayed. The Palette will change to provide access for editing when you click on an element. Here are some editing tips:

    • The Palette initially shows the Blocks on this Form view. Show / Hide

      Palette and Canvas
    • Click and drag the block names in the Palette to rearrange them.

    • The Visibility Toggle appears frequently when you hover over an element to allow you to hide or show that element.  Show / Hide

      toggle visibility of an item

    • To edit a Block, click the Block name in the Palette or hover over the Block on the Canvas and select the EDIT link.

    • The Palette will display the Block's individual elements for editing. Click on the element name in the Palette or on the element itself on the Canvas to edit it. Editing options after clicking are dependent on the type of content you are editing:

      1. Social Icons: Show / Hide

        A variety of icon styles are available to match any design you desire. 

        1. Create "Follow me on" social icons by entering you social media page URL. Your contacts can click the icon to visit your page.

        2. Create "Share this page" links by:

          1. Visit going to Share Link Generatorexternal link

          2. Add the URL of the page you want your readers to share (i.e, your Facebook page, your Twitter feed, etc.)

          3. Click Create the Link

          4. Copy the output and paste it into the icon URL field in ONTRAPORT


            Copy and paste the output

        3. The Skype icon allows your visitor to initiate a Skype call or chat with you. In the URL field use skype:john.locke?call where john.locke is your full Skype ID. Use skype:john.locke?chat to initiate a chat when they click the icon. 

      2. Images: Show / Hide

        Change an image by clicking the Change Image button. Upload a new image or select one from your image library. If needed, use the Photo Editor to crop and edit the image.

         
        1. To open the Photo Editor for the current image, hover over the image in the palette and click the paint brush icon.

        2. Use the Photo Editor's tools to fine tune your image, then click Save.

          photo editor

      3. Text: Show / Hide

        Edit most text directly in the Block (some text will require editing in the Palette). The edit bar appears at the top of the text with options for font type (Header 1, Header 2, Body, etc.) and alignment, color, bold, italic, underlined and hyperlinks. ONTRAPORT merge fields are available by clicking the Merge Fields button. See the article Formatting Merge Fields for more information on merge fields. 

      4. Slide Shows: Show / Hide

        The palette lists each slide and the overall Settings for the slide show. The Settings control automatic sliding, duration, transition effects, direction of the slide movement, image overlay effects, the arrow style for manual sliding and position of the text and/or buttons on the slide.

        slide show configuration

      5. Video:  Show / Hide

        In the palette, choose to use the embed code from YouTube, Vimeo or Wistia on the Embedded tab, or use the Hosted tab to select a video uploaded into ONTRAPORT's Video Manager.

        1. ONTRAPORT Hosted videos can be set to autoplay by first selecting them in the Hosted drop down box, waiting until the video loads in the canvas, and clicking the Embedded tab. Add the word "autoplay" after "controls" at the beginning of the code.

          add autoplay to an ONTRAPORT hosted video

        2. Vimeo videos can be configured to autoplay or loop by configuring the + Show options settings.

        3. For a Wistia video to autoplay, set the configuration options in the Timeline Actions.

      6. Forms: Show / Hide

        Editing forms in the palette is easy; click and drag to rearrange fields, hover and click the trashcan icon to delete the field, or click the Add button to select additional fields to add to the form.

        add fields

         

      7. Order Forms (ONTRAPORT Pro and Team accounts only): Show / Hide

        The palette displays the sections of the form. You can hide fields or sections not required by your payment gateway, hide or replace the credit cards graphic, add products, etc. All of the features found in stand-alone Order Forms are available. Note: you can only have one form on each ONTRApage.

        1. Edit the Contact, Billing or Shipping fields if desired. You can add, delete, or simply hide fields from appearing on your order form.

          edit fields animation

        2. If desired, hide the Credit Card Fields your payment gateway does not require by sliding the Visibility Toggle to the right position, turning it red. Note that hiding a field your gateway requires will cause all orders to be rejected. We recommend leaving them in the default configuration, with green Visibility Toggle icons next to them. The field names are "also known as":

          1. Payment Number: Credit Card Number or Debit Card Number

          2. Payment Code: CVV Code, CVS Code

          3. Payment Expire Month: Expiration Month, Exp. MM

          4. Payment Expire Year: Expiration Year, Exp. YYYY

        3. You can hide, change or edit the Credit Cards Graphic. Click the paint brush icon to use the Photo Editor.  Show / Hide


          edit graphics animation


        4. Click Product Grid to add products, shipping rates, payment methods, taxes and the invoice to send for this order. The palette will display these sections for easy editing.  Show / Hide

          product-grid.png
        5. The Add / Edit Products button allows you to add or create a product for your order form, and set options such as adding a free trial period, making the product a subscription, offering a set number of payments in a payment plan, allowing the customer to change the quantity purchased, adding the product to the shipping / packing slip (physical products only), and inserting or creating a coupon code for the product. Hover over the "Total" column to delay billing to a future date.

          product options in the product grid

        6. Click + Add Shipping Method to set rates for international or domestic shipping of your products and more.

          1. Enter a name and price of your shipping type.

          2. Add rules that declare when each shipping type is charged based on field values.

            add shipping costs

          3. Select whether or not you’d like to charge shipping each time on recurring orders.

             

            1. Shipping charges are not considered revenue and will not show in the "Next Charge" column in the Subscriptions and Payment Plans section on the Purchases tab of the Contact record. 

              Shipping charges are not revenue.

            2. Order Forms are unable to process a transaction with shipping charges when the products have different billing periods such as "per month" and "per quarter".

              Ship charges fail if billing periods are different

        7. Add a payment method

          1. Click + Add A Payment Method.

            add payment method

          2. Select a payment gatewayexternal link you’ve integrated with ONTRAPORT from the dropdown. You can select multiple options if they are compatible.

             

        8. Add Taxes (optional).  Click + Add A Tax Option.

           

          1. Enter a name and tax percentage for each tax option.

            1. You can specify different amounts for each type of tax.

            2. Add as many tax options as you like.

          2. Select whether or not to charge specified tax amount on shipping.

          3. Add rules that declare when each tax type is charged based on field values (the button is identical to that of shipping rules).

        9. Select an invoice to be sent to customers for these products You can select from the default invoice template or any pre-approved invoices you’ve submitted.

      8. Upsell Forms (ONTRAPORT Pro and Team accounts only): Please see our separate article Creating an Upsell Form

      9. Custom HTML: Show / Hide

        The Custom HTML Block is provided for advanced and developer use. Because of the complexity in custom code, no support is provided for an ONTRAform using the Custom HTML Block. More information on the Block's editing features and capabilities can be found in the ONTRApages Custom HTML Block article.

        The Custom HTML Block allows HTML, CSS and JavaScript code to be inserted in your ONTRAform.  The most common uses will be for functions like custom tracking scripts, JavaScript to modify fields on the form, etc. Search for "custom html block" on our ONTRAPORT / Answers site examples and use cases from our clients.

     

    Selecting Settings

    After completing your ONTRAform click the Settings link in the palette. You will configure how the ONTRAform will react with your customers with opt in settings, Rules, Tags and Sequences.  Show / Hide



    Form Settings in the sidebar

     

    Advanced configuration features include automatic notification when the ONTRAform is submitted, assigning the contact owner for a new contact, merging with cookie data instead of using the email address and passing "CGI variables" to the Landing or Thank You page. The Settings tab will only present the settings needed at that time; be sure to re-visit the Settings if you add other content to the ONTRAform.

      1. Opt In Settings. Show / Hide

        form settings

        1. Double Opt-In Required: Requires the contact to confirm they want to receive bulk email messages from you by clicking a link in an email ONTRAPORT sends to them. Choosing Double Opt In reveals the following options: .

          double opt in settings

          1. Confirmation Email Select the default confirmation email. You can also submit a custom confirmation email for approval by clicking your email address at the top right of ONTRAPORT, then selecting Administration > Double Opt-In/Invoice Manager and clicking the New Message button, then selecting Double Opt-In as the message type.

          2. On Submit, send visitors to the following page: Select the default confirmation page that advises the visitor to wait for the email with the confirmation link. You can send them to another Landing Page that has this information, or a "Custom URL" anywhere on the Internet. It is recommended that you advise the visitor that they must wait for the confirmation email and click the link to enable futher bulk email communications from you.

          3. Send contacts who are already opted-in to a different page. Check this checkbox to avoid sending already opted in Contacts to the confirmation page configured above. Instead, they are sent to the choice you make below.

          4. Send contacts here: New contacts are directed to this page after they click the link in the confirmation email, or if the person filling out the form is already a contact and the check box above is clicked, your existing contacts will be directed to this page. You can use the Default Thank You Page, a Landing Page you have created for this, or a Custom URL to send them to any page on the Internet. A good choice for this area is a page thanking them for signing up, and providing any additional information to them regarding frequency of emails, membership details, your other company offerings, etc.

        2. Double Opt-In Optional: This setting creates the Contact immediately and allows you to send them bulk email based on their single opt in status. The contact is encouraged to click the link in the confirmation email to upgrade their status to Double Opt-In. This is a good choice if you are providing content to the contact immediately and want to keep them engaged.

        3. Single: The contact is added to the database immediately and sent to a Thank You page. Choose the Default Thank You Page, a Landing Page you have created for this purpose, or a Custom URL for any page on the Internet.

      2. Manage Form Fills: Assign a Tag or Sequence when the form is submitted. Note that the Tags and Sequences are always added to the Contact, even if a purchase fails.

      3. Always-On Rules (opt in forms only): Show / Hide

        Added only when the form is a standard opt in form, and not when an Order Form is on the page. These Rules fire when the form is submitted, but you can set conditions to limit what the Rule does. Examples of Rules you might include are removing the contact from a marketing sequence now that they have filled out this form, changing a field in their contact record, adding them to a fulfillment list, etc. To add a Rule:
        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 fire).

        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.

      4. Conditional Rules (order forms only):  Show / Hide

        Added only when the form is an order form. Two sections are provided, one that is triggered by a successful payment and the other section only if the payment fails. Create the Rule in the appropriate section by following the steps below:

        conditional 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 fire).

        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.

      5. Notification and Routing (optional): Enter an email address to be notified with a standard notification email whenever the form is filled out, and select the Contact Owner for any new contacts opting in on this page.

      6. Form Connector: Show / Hide

        In addition to populating the Contact Record in ONTRAPORT you can also send the data on this form to another form. This allows you to submit to a separate system, such as a non-integrated membership site, a Gravity Forms page to collect data in your WordPress site, a sign up form for a webinar, etc.
          1. In the Form Connectors section click the Add New button.

          2. Provide the URL to the other form and click the Get Form button.

            Form Connector URL

          3. The Form Connector retrieves the external form, presenting the fields on the form on the right. If the retrieved form has additional fields, the Form Connector displays them and provides an ONTRAPORT field selector drop down on the left to enable you to match those fields to a Contact Record field. If you map fields in this way, make sure to add the fields to the form.

            Form Connector Field Mapping Step

          4. Click the Test Connection button. A success message will be displayed if form data can be submitted.

            Form Connector Success Message

          5. If data cannot be posted to the connected form it might be due to:

            • Captcha.

            • "Anti-bot" Javascript.

            • Data mismatch errors, such as a date field on the connected form being mapped to a text field in ONTRAPORT.

            • A multi-part or multi-step form.

        Note that some forms, such as AWeber opt in forms, have a hidden captcha for submissions by other forms. While the connection dialog will show "Success!" when the Form Connector is tested the data will not pass through to AWeber. Always check to see that the Form Connector data actually makes it into the connected program.

      7. Advanced (optional): Show / Hide

        1. Override email address merge with cookie data Select this check box if you want to disable the default action of adding the form infromation to existing contacts with the same email address. An example of when you might use this is if you have contacts who share the same email address, but use different computers. Selecting this option allows ONTRAPORT to read their cookie data and assign the form information to contact based on their Contact ID number instead of simply their email address. This is not a commonly used option.

        2. Pass CGI variables to Landing/Thank You page This is another advanced option that is not used very often. An example is when you have a custom script on the Landing/Thank You page that extracts the CGI variables to populate information into another application.

     

     

     

    Publishing Your ONTRAform

    Click the Publish button at the top right to see the options for publishing your completed ONTRAform.  Show / Hide

    set display type for your form
        1. Select Your Display Type (select one):

          • Automatic Lightbox: The ONTRAform will pop up based on the trigger set in step 2.

          • Embed in Page: The ONTRAform is placed in position on the page, and is always visible.

          • Click to Pop Lightbox: The lightbox will pop up only when the link is clicked. You can hyperlink the link into an image, logo, or text link.

        2. Select How You Want Your Lightbox To Appear (multiple choices allowed):

          • Choose one or more options to trigger the lightbox pop up, after the user scrolls a percentage of the page, after a number of seconds or on "exit intent" where the mouse cursor moves toward the top right or left corner. If you select more than one of these options the first one to occur will be the trigger, and the rest ignored.

          • Set the Repeat Display Settings. You can choose to not show the pop up again if the visitor has clicked to close it or filled it out. You can set the maximum number of times to show the pop up within a time period set in hours.

        3. Preview Your Form & Copy to Clipboard: Click the Preview Your Form button to see a preview of the form. Note that in preview mode the form's merge fields, if any, will not be populated. To copy the form code to your computer's clipboard, click the Copy to Clipboard button. You can then paste the code into your website.

          copy code to clipboard

        4. Publishing options also include selecting the ONTRAform in an integrated WordPress site by selecting it from the page / post editor ONTRAPORT Media button, or selecting it as a Thank You form pop up in an ONTRApage.  

     

    Use Case: Creating an ONTRAforms Upsell Form

    ONTRAforms can be used as pop-up upsell forms by adding the Upsell Form block to an ONTRAform and specifying it as the Thank You page for your original Order Form.

        1. Add the Upsell Form Block to your ONTRAform template.

          Upsell Form Block

        2. If you used the same Sales template as your original Order Form, make sure you delete the Order Form block from the page!

        3. Click on the Upsell Form Block or the Upsell Form title in the Blocks on This Form view in the palette to edit the block.

          Upsell Form Block in Palette

        4. Edit the block in the normal fashion, editing text, images, and hiding elements as desired.

        5. Click the Payment Settings button to configure the product and payment gateway for the upsell offer.

          • Select and configure the product in the Products section.

          • You must use the same payment gateway as the original Order Form. It is selected under Payment Tax and Invoice

          • Remember to click Save at the bottom of the configuration options in the palette to save your choices.

          Upsell Payment Settings

        6. The Form Settings button allows you to configure the Confirmation Pages, and set Rules.

        7. Choose a Landing Page for each of the Confirmation Pages.

          • The Yes page is the Thank You page used when the contact clicks Yes.

          • The No page is shown when the contact clicks the No button.

          • The Timeout / no credit card page is shown when the contact takes too long to click either Yes or No, or when another failure occurs other than a credit card refusal (see Conditional Rules below).

          Upsell OForm Confirmation Pages

        8. The Rules section runs Rules based on the actions and outcome of the credit card transaction.

          • Run These When Purchase is Successful is where you would add the contact to a product fulfillment sequence, fulfillment list, etc. as they have successfully purchased the upsell offer.

          • The Run These When Purchase is Declined is for those situations where the contact's credit card has reached it's limit with the original order, or their bank restricts purchases by time frame (this is very rare).

          • The Rules section for Run These When Contact Clicks No allows you to tag the contact for followup later, or act in any other way if desired. You are not required to have Rules in each section, and this Rule section is often left blank.

          Upsell Rules

        9. Name the Upsell Form and click the Publish button.

          • Select Automatic Lightbox to have the upsell form pop up over the original Order Form. In the When to Trigger Lightbox section select Display after 2 seconds. You can select this form in the Settings of the original Order Form.

          • Embed in Page can be used by inserting the code into an HTML Block on an ONTRApage, or in a Code Mode or Legacy Landing page. These pages would then be set as the Thank You page for the original Order Form as described in step 11.

          • Click to Pop Lightbox. This option provides Javascript code that could be inserted into an ONTRApage using the HTML Block. You could also use this option with a Code Mode or Legacy Landing Page. These pages would then be set as the Thank You page for the original Order Form as described in step 11. 

        10. Save the upsell landing page.

        11. When finished, edit the original Order Form:

          • For an ONTRApages Order Form, edit the Order Form block and select the Form Settings icon. Select this ONTRAform in the Pop ONTRAform Lightbox section.

            ONTRApages ONTRAform Pop Up Selection

          • If you have embedded either the Javascript code for either the Embed in Page or Click to Pop Lightbox code into an ONTRApage (using the HTML Block), Code Mode or Legacy Landing Page, select that page in the Use this Landing Page dropdown.

    Use Case: Creating Progressive ONTRAforms

    ONTRAforms allow you to create a series of forms that will add data to a single Contact Record. This is a great way to gather information about a contact, conduct a survey, etc. without having to subject them to a long, intimidating opt in form. Data entered is written to the Contact Record with each form.

     

    Collect the email address on the first form in the series. The Email address will create a new contact or, if the email already exists in your database, link the series to that existing contact. Set the Thank You page to pop up the second form. You can continue to add additional forms to the series, linking them by having the form's Thank You page setting pop up the next form. 

    For in-app step-by-step training on creating a progressive form, navigate to the ONTRAPORT Project "Create a Multi-Step Form to Gather Lead Information." Alternatively, follow the tutorial below to create your first progressive form series, using three forms to collect email, first name and last name. This example uses the three ONTRAforms and an ONTRApages page.

        • Create the first form by clicking Contacts > Forms > New Form. Select Create New in the ONTRAform selection box. We selected the Silent Partner template for this example.

        • Click Smart Form on the palette then Form to edit the form's fields. Hide all the fields except Email, then click Done. The Email field will create a new contact or, if the email already exists in your database, link the series to that existing contact. Name the form PF: 1-Email and click the Save button. Exit the form.  Show / Hide

          progressive form number 1
        • Create a second form, choosing the same template as above. Click Smart Form on the palette then Form to edit the form's fields. Hide all the fields except First Name, then click Done. Name the form PF: 2-First Name and Save the form. Exit the form.

        • Create the third form in the same manner as above, choosing Last Name as the only field shown. Name this form PF: 3-Last Name, save it and exit the form.

        • Open the first form, PF: 1-Email for editing. Click on Smart Form in the palette, then click on the gear icon next to Form Settings.

        • On the Form Settings pop up, select Single opt-in, and check the Pop ONTRAform Lightbox radio button. Select the second form you created above, PF: 2-First Name from the drop down selection box.  Show / Hide

          progressive form number 2
        • Save and exit the form.

        • Open the second form, PF: 2-First Name, for editing. Click on Smart Form in the palette, then click on the gear icon next to Form Settings.

        • On the Form Settings pop up, select Single opt-in, and check the Pop ONTRAform Lightbox radio button. Select the third form you created above, PF: 3-Last Name from the drop down selection box.

        • Save and exit the second form. Open the third form, PF: 3-Last Name, for editing. Because this is the last form in the series, we won't be repeating steps 8 through 10 above. Instead, click on Smart Form in the palette, then click on the gear icon next to Form Settings. Select Single opt-in, and set the Thank You page you want to use. Save and exit the form.

           

          If you had additional forms in the series after this one, you would select the next form in the Pop ONTRAform Lightbox drop down, repeating steps 8 through 10 for each one of those intermediate forms. 

        • Create an ONTRApages page to host the first form. Click on Sites > Landing Pages > New Landing Page and select a template with a call to action button. In this example we are using the Start from Scratch template and adding a single text block to it, and choose a design with a button to click. When satisfied with the layout, we click the button on the block to edit it, and click on the link icon in the Link URL field.

        • On the pop up, select ONTRAform Lightbox and choose the first form, PF: 1-Email from the drop down. Click Okay, then Save in the palette to save your choice.  Show / Hide

          progressive form number 4
        • Name the ONTRApage, click Save and then click the Publish button. Publish the page using one of our public domains.

        • Visit the ONTRApage URL in your browser, and click the button on it. The first form should pop up and request an email address. Fill in a test email, then click the submit button. The second form will appear, and you can enter your first name and click Submit, then the third form will pop up for the last name. Go through the series and then verify that your new contact is created with all three data elements, email, first name and last name.

     

    FAQs

    Q. Can I use multiple ONTRAforms? How many can I have on a single page?
         A. Yes! You can have up to five ONTRAforms on each web page.

    Q. Can I use an ONTRAform in an ONTRApage?

    A. Yes! You can specify an ONTRAform to pop up over an ONTRApage. This can be in addition to any form already on the ONTRApage. Select the ONTRApage Settings toggle, then select either the Timed or User Scroll Popup or Exit Intent Popup options to reveal the ONTRAform drop down selection box and settings.  Show / Hide

    Popping up an ONTRAform on an ONTRApage

    Q. I don't use Pilotpress to integrate my WordPress site with ONTRAPORT. Can I still use ONTRAforms on my site?

    A. Yes! Simply configure the form and copy the code to the clipboard as shown in Publishing Your ONTRAform steps 3 and 4. In WordPress, change the editor to Text mode and paste the code at the bottom of the page.

     

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

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

     

    using the confirm email field

     

    Q. My fonts in my Custom html block don't match the rest on the form. What's up?

    A. The Custom html block should inherit the Page Style settings for the following classes: h1, h2, h3, label, button,large-body-text, body-text and blockquote. If you have used a local style declaration for any of these classes it may override the Page Style settings. If you have inserted iframe code you will have to edit the source application to match the Page Style settings. 

    Q. I copied some code into the Custom html block and it works, but the comments in the code are showing through. What's up with that?

    A. Remember to use the appropriate comment tags for the section of the code you are inserting. It is common to find code examples on the Internet that do not have comments coded correctly. Use the appropriate comment tags forHTML, CSS and JavaScript in the Custom html block. 


    Q. I inserted code into the Custom HTML block and now my page isn't responsive. What gives? 

    A. ONTRAforms are mobile responsive. Adding an HTML block that isn't responsive can cause the entire form to become unresponsive. 

    Q. Can I use Custom HTML Blocks for Google's Conversion Tracking?

    A. Yes you can. Google's conversion code needs to be in the body of a page, not the footer. HTML blocks will show the code in the body which will help you optimize your ad words.

    Q. Why do my telephone numbers disappear on iPhones when there's a blue background?

    A. The iPhone thinks the telephone number is a link and renders it with the default blue link color. You can choose either a different background color or add the following code to the Settings > Custom Header Code section of the form: <meta name="format-detection" content="telephone=no" />

     

    Have more questions? Submit a request

    Comments

    • Avatar
      John Corey

      I followed the instructions above. They all made sense. It seemed pretty logical when you think about it.

      When I checked the contacts in the database after running the test, I found something strange. An entry with no real data. No first, last, or email address. Also a second entry that had the first and last yet no email address. I deleted the two entries and repeated the test. The same result.

      I did make a mistake with the set up initially, so the tests above was really the 2nd and 3rd time through. A search of the database shows no use of the email address I am using during the test. All a bit odd.

      What am I missing or is there a subtle bug?

    • Avatar
      Robbie Godsil

      Yes, like John this happened to me too!

    • Avatar
      Frank Hagan

      Please contact Support with these individual issues; they can help you sort it out. You can chat them by using the CHAT link at the top of this page, or the chat link in your account (found when you expand the "question mark" help menu at the top right).

    • Avatar
      Alicia Drew

      Ontramail is so easy to use, but I wish there was greater flexibility for formatting. Option to shift elements inside blocks as needed. Sometimes the writing or photo I want to put together in a block just needs more tweaking than I am currently allowed

    Powered by Zendesk