2a- Identify Visitors | Forms & Popups

After adding the Tracking Code, you will see every visitor inside your website, yourself included, but they are still anonymous. Now everything you need to do is to create something to get their emails and identify them. Here we will cover Forms and Popups.

To create a new form

  1. Click on Opt-in Forms on the left sidebar
  2. Click on the + icon on the right side of the last box

Then you must select the form type

 

 

  • Floating Bar
  • Lightbox Popup
  • Slide-In
  • Fullscreen Takeover
  • After Post (Embedded)
  • HTML Form (Existing Website Form)

 

 

 

If you have selected HTML Forms, it will appear a popup to choose the form name inside LeadBI and the id of the pre-existing form on your website (optional). If you don’t enter an id, the code will track every form. You can then just copy the code and paste it into your website to begin tracking third-party forms.

If you chose one of the others form types, you will be redirected to the Form Builder page, here you will be able to create and customize the form appearance and behavior.

There are 4 Steps that will lead you to create and embed the form/popup:

  1. Build: Create and customize the form
  2. Autoresponder: Set-up an autoresponder email that will be sent after the submit
  3. Settings: Configure form settings
  4. Review & Embed: Copy the code to add the form into the website

1-Build

In this first step, you will be able to create and totally customize the form, from the form type to the text and background color of every single input.

This page has two different sections:

  • Preview, on the left side: this section allows you to preview the form, “Drop” form elements and choose which element to edit.
  • Settings, on the right side: this section allows you to choose form elements settings and to”Drag” elements.

Form Display Settings

Whenever you open the builder or when you click on the form preview without selecting a particular element, the Settings area will show general form settings:

  • Widget
    • Name: The form’s name inside LeadBI, it can be changed anytime.
    • Widget Steps: Here you can add or remove steps from the form. Every step is a different form, so you will never lose the data sent even if the visitor doesn’t complete all steps. You can combine all types of step: when the visitor submits a step, the following step appears.
      By default, all forms have two steps: Form and thank you page using the same type of the form.
      Available Steps:

      • Floating Bar Opt-in: Top bar form (email address only)
      • Floating Bar Link: Top Bar link, the submit is counted when clicking on the link.
      • Floating Bar Thank You
      • Lightbox Popup Form: Popup appearing at the center of the window
      • Lightbox Popup Form Thank You
      • Slide-In: Popup appearing at the bottom-right corner of the window
      • Slide-In Thank You
      • After Post: Embeddedable Form, it appears where the code is pasted.
      • After Post Thank You
      • Full Screen Takeover: Popup that covers completely the window.
      • Full Screen Takeover Thank You
  • Elements: Choose which elements to add in the form (This option is disabled for all Floating Bar type forms)
    • Common Form Elements: Ready to use elements
      • Text Header
      • Full Name
      • Email Address
      • Phone Number
      • First Name
      • Last Name
      • Website
      • Line Break
      • Paragraph
      • Image
      • Rating
      • Button
      • Terms and Conditions
      • Security Note
      • Privacy Policy
      • Google Maps
      • Youtube Video
    • Generic Form Elements: Add generic inputs
      • Text Area
      • Text Input
      • HTML Code
      • IFrame
  • Style: Change the form’s style: form width, colors, animations etc… Some style settings are not available for certain form types.

Elements

To add an element:

  1. Click on the form preview without selecting an already existing element to display the form settings
  2. Open the Elements tab
  3. Choose an element and drag it to the desired position inside a Drop Element here box

To customize an element:

  1. Click on the element inside the preview to select it and open that specific element’s settings
  2. Edit the element settings and style from the Settings area
  3. Edit the element text directly from the preview

2-Autoresponder

In the second step you will be able to configure an autoresponder: whenever a visitor submits a form, the email written in this step will be sent to the email address entered in the form by the visitor.

  • First, enable the autoresponder by clicking the switch on the right: a text editor will appear.
  • The first text input is the email subject, the text area below it is the body of the email.

You can edit or disable the autoresponder email whenever you want.

3-Settings

In this step, you can edit the form configurations

Display Settings

Choose when and how the form will appear

  • Start Date: The form will appear only from the chosen date (default is: Unlimited | The form will begin to display immediately)
  • End Date: The form will appear until the chosen date (default is: Unlimited | The form has no expiry date)
  • When should the widget appear?: Choose how the form appears
    • On page load: The form will load as a normal page element
      • Show delay (in seconds): Delay of chosen seconds the appearance of the form
    • On user inactivity: The form will appear after the user stops interacting with the website
      • Show widget after x seconds of inactivity: Choose after how many inactivity seconds the form should appear
    • On page scroll: The form appears only after the visitor scroll a certain % of the page
      • Show when the user scrolled % of page: Choose how much the visitor must scroll before seeing the form
    • On exit intent: The form will appear when the visitor tries to close the page
      • Exit intent type
        • All: Every exit intent
        • Cursor leaves page: Only when the cursor leaves the page area
        • Click external link: Only when clicking on a link that goes to another website
    • On link click: The form will appear only by clicking an anchor link
      • Html id of the anchor element: The anchor URL of the link

Frequency Capping

Choose between how many days to show the form.

  • Show widget every x days after the first view: Show the form again only after x day after the first view
  • Show widget every x days after close: Show the form again only after x days after the form is closed intentionally by the visitor
  • Show widget every x days after opt-in: Show the form again only after x days after the visitor submitted the form

(These timings refer to the single visitor. If the form is enabled, it will always display on the first visit of every visitor.)

Special numbers

0 = One time per session

-1 = Always

Email Notification (optional)

Send an email notification whenever a visitor submits the form

  • Email Addresses: The email of who will receive the notification
  • Email Subject: The subject of the notification

Redirect (optional)

Redirect the visitor to another page after submitting the form

  • Redirect URL: Page URL where to redirect the visitor

Remarketing Audience Tracking (optional)

Add remarketing script (ex. Facebook) to the form

  • Execute on Load: Load and execute the script on form load
  • Execute on Opt In: Load and execute the script only after the form submit

4-Review & Embed

In the last step you can copy the code to embed the form on your website and go back to previuos steps to check for errors. Don’t forget to save by clicking on the Save button on the top right of the page or the form will not display as intended on your website.

You can select HTML for emebed javascript into your website or by select WordPress you can use Short Code.

Rate This Article

(0 out of 0 people found this article helpful)

Leave A Comment?