Company Blog Support
Frank Hagan
Updated

Contents

    Back to Top

    Publishing ONTRAforms

     

    About

    You can publish ONTRAforms on websites and landing pages. ONTRAforms can be embedded full size in a web page, as a link or button to click and pop up, or as an automatic lightbox pop up form that appears after a certain time, when the page is scrolled, or when the "exit intent" is detected. You can also use the ONTRAform as an automatic lightbox "Thank You" pop up for an ONTRApages Smart Form or Order Form, allowing the Contact to remain on the same page.

    Start by clicking the Publish button at the top right. The following sections explain these options.

    Click the publish button to see the ONTRAform publishing options

    Publishing as an Automatic Lightbox

    ONTRAforms can be published in several ways by filling in this dialog box

    The default selection is to publish the ONTRAform as an Automatic Lightbox or pop-up form. The following options are available.

    Select Popup Position

    • The default middle position is usually the right choice.
    • Depending on other settings, you may want to choose another position:
      • If you set the popup to display when the page has been scrolled to the bottom (100%), set the pop up to bottom left, bottom middle or bottom right.
      • If you have the popup set to display upon exit intent, when the user has moved his mouse cursor to the top right or left of the viewport, select one of the top positions for the popup.

    When to Trigger Lightbox

    You can select more than one of these options and the form will display when the first option is triggered (and not display again for the other triggers).

    Display after user scrolls to XX% of the page: This option allows you to have the form appear after the user has scrolled the page. Use a low number like 10% for it to appear as soon as the user starts scrolling, 50% for half the page scrolled, and a high number like 90% if you want them to scroll through the entire page before displaying it.

    Display after X seconds: The timer starts when they first load the page. We recommend at least 2 seconds to allow the user to see your headline content. This option can be used for "teaser" content with an ONTRApage that prompts the user to sign up or purchase to see the rest of the content, or for displaying the sign up form after the user has sufficient time to consider the offer (such as 15 seconds after reaching an options pricing page).

    Display popup on exit intent: This function attempts to determine the exit intent by the cursor movement when a mouse is used. Movement toward the top right or left will trigger it. The idea of this option is to encourage the user right before they leave your page. It can be an alternate offer, a free incentive to gather their email address as a lead, etc. Because this relies on mouse movement, it is not as effective on mobile devices. You can combine it with either of the two options above.

    You can add multiple ONTRAforms to your page. The settings for when to trigger this lightbox  apply only to this particular form, but you can add separate ONTRAforms to cover more than one scenario.

    Repeat Display Settings

    These options reduce user irritation at repeated popups while maintaining your ability to show the offer to the user again later.

    If popup has been closed or filled out, don't show to this visitor again: Select this checkbox to remember this user and not show the form to them if they have either completed it or closed it without completing it.

    Display this popup once during a XX hour time frame and a maximum of XX times per page refresh: Limit the number of times the trigger can work during a session on the page. For example, if you have the lightbox appearing after the user has scrolled 45% of the page, and you don't have the "If popup has been closed or filled out, don't show this visitor again" checkbox selected, you can set this to display the lightbox only one time per hour. This allows a user to spend more time on a page to consider pricing options, membership benefits, etc. without appearing to pester them. The maximum number of times per page refresh limits this setting further, so that if a user is on the page for three hours with the hour time frame set to 1 hour, you can limit the total times displayed to "2"

    If you had more than one setting in "When to Trigger Lightbox" only the first one triggered displays the lightbox. That first trigger is also the one used by the Repeat Display Settings.

    Preview Your Form and Copy Your Code

    After you have selected the ways the lightbox can be triggered, the form code appears in this section. At the top right are two buttons, Preview and Copy to Clipboard.

    The Preview and Copy Form Code section includes the buttons to preview and copy the code to the clipboard

    Preview opens a new tab showing a blank page.

    • To display the lightbox you must trigger the form.
      • If you set scrolling to be a trigger, scroll down the page.
      • If you have the trigger set for 2 seconds, wait 2 seconds.
      • If you have exit intent as a trigger, move your mouse to the upper right or left of the browser window.
    • Only the first trigger event is honored for the form if you have set more than one trigger.  For example, if you have two triggers for your form, when the contact has scrolled 45% of the page or after two seconds, you can:
      • Click the Preview button and simply wait for the form to appear after two seconds.
      • Close the preview tab.
      • Click the Preview button again and scroll down the page.
    • Remember, the Repeat Display Settings apply only to the first trigger that activated the lightbox form.

    Copy to Clipboard will copy the code to the computer's clipboard for pasting in a web page or text file.

    Installing This Code

    When pasting the code into a web page keep in mind:

    • Put the code at the bottom of the HTML, just above the closing </body> tag, to allow the page to fully display before the form code is processed.
    • In WordPress themes, you can often insert the code into the footer section of the site to include it on every post and page.
    • If the theme has blocks, use an HTML or Code block to hold the code.
    • Generally, using a short code to insert the code is problematic; WordPress often blocks short codes from running JavaScript like the ONTRAform code.
    Publishing the ONTRAform as Embedded in Page

    Embedded in Page allows you to position the complete form on your web page by pasting the form code into your HTML.

    Embedding the form in the page

    Follow these steps:

    1. Select the Embedded in page icon under Select Your Display Type.
    2. The Preview button will open a new tab to show you the form on a blank page.
    3. Click the Copy to Clipboard button to copy the JavaScript code to your clipboard.
    4. Paste the code into your web page where you want the form to appear.

    Here are some considerations when publishing the form:

    • WordPress may not allow you to put the Javascript code in a text widget if you are using version 4.8 or lower. Upgrade to the most current version of WordPress and use the Custom HTML Widget for your form code.
    • If your theme uses "blocks" or other components in a visual editor, use the HTML or Code block to hold the JavaScript code.
    • Generally, you cannot use a short code in your theme to display the form in WordPress. Short codes are generally prohibited from running JavaScript for security reasons.
    • Other content management systems or web page services may restrict the use of JavaScript. The FAQ includes some tips for other web site creators.
    • Generally, standard HTML tags can be used to position the form on a page.
    • Generally, inline CSS tags, even if they identify the specific form elements, will not reliably override the form's style as designed in ONTRAPORT. If you don't know what this means, good. Stay pure.
    Publishing as a Click to Pop Lightbox

    Publishing the form as a Click to Pop Lightbox allows you to use a link or image for the form. When the contact clicks the link or image the form pops up in a lightbox for completion.

    click to pop lightbox provides a link to click to show the form

    1. Select the Click to Pop Lightbox icon.
    2. Edit the link text that says "Register Now!" to whatever text you would like.
    3. Test the link text and form by clicking the Preview button. A new tab will open to a blank page with the link text centered on it. Click it to pop up the lightbox.
    4. Click the Copy to Clipboard button to copy the code to the clipboard.
    5. Paste the code where you would like the link to appear on your web page.

    Here are some considerations when publishing the form:

    • WordPress may not allow you to put the Javascript code in a text widget for the header, footer or sidebar if you are using version 4.8 or lower. Upgrade to the most current version of WordPress and use the Custom HTML Widget for your form code.
    • If your theme uses "blocks" or other components in a visual editor, use the HTML or Code block to hold the JavaScript code.
    • Generally, you cannot use a short code in your theme to display the link in WordPress. Short codes are generally prohibited from running JavaScript for security reasons.
    • Other content management systems or web page services may restrict the use of JavaScript. The FAQ includes some tips for other web site creators.
    • Generally, standard HTML tags can be used to position the link on a page.
    • Generally, inline CSS tags, even if they identify the specific form elements, will not reliably override the form's style as designed in ONTRAPORT. If you don't know what this means, good. Stay pure.

    To substitute an image for the link text:

    1. Upload your image into the ONTRAPORT File Manager, or another hosting service such as Amazon S3.
    2. Obtain the URL that will display the image on the web. Test the URL by pasting it into a new tab's address / URL bar.
    3. In another tab, copy the form code in ONTRAPORT by clicking the Copy to Clipboard button.
    4. Paste the form code into a text editor such as Notepad (PC) or TextEdit (Mac) for editing.
    5. Locate the link text in the text editor; it is "Register Now!" by default, but you may have changed it in step 2 above.
    6. Replace it with: <img src="Image Link Here" alt="Click here to open form" />

      Find and replace the link text with the image tag

    7. Copy the URL from the tab that shows the image in the browser to the clipboard
    8. Locate the text Image Link Here and select it.
    9. Paste the image URL to replace the letters Image Link Here only (leave the quote marks in place so they surround the image link).

      Find and replace the text in quotes with the image url

    10. Save the text file.
    11. Copy and paste the edited code into your web site where you want the image to appear.
    ONTRAform Publishing FAQs

    Q. Can I use an ONTRAform on my Wix / SquareSpace / GeoCities website?

    A. ONTRAforms use JavaScript, and if the platform has an option to insert a JavaScript form onto a page it may work. Our experience has been that it is very hard to use these proprietary page builders that host your site on their servers and get reliable results. Most of the time they strip out our JavaScript. We recommend using a stand-alone website rather than a proprietary page builder site.

    Q. My WordPress theme has a shortcode for a button. Can I make this work?

    A. We don't think so. In mid-2015 WordPress changed the way shortcodes can call functions as a security measure, so all attempts we've seen have failed at embedding the JavaScript code into a shortcode.

    Q. My theme won't accept the ONTRAform code in a page text block.

    A. Use a "Code" or "HTML" block to insert the form code.

    Q. My form is too wide for the space on my website. What can I do?

    A. If you can't use a narrower form, consider using the Click to Pop Lightbox method to use a text link or even reduced size image of the form to trigger the pop up lightbox.

     

     

    Articles in this section

    Created - Updated
    Have more questions? Submit a request

    Comments

    Powered by Zendesk