...

LeadsWithDemos Documentation

How to Create a Popup with a Form on LeadsWithDemos

Creating a popup with a form on LeadsWithDemos enables you to capture leads efficiently and effectively. This versatile tool engages users at critical moments, prompting them to share their information, which can significantly enhance your marketing strategies. This guide will walk you through the process step by step, enabling you to design and implement a customized popup that resonates with your audience and drives lead conversion.

Step-by-Step Instructions:

Step 1: Access the Sites Section

  • Login to your LeadsWithDemos account.
  • From the main Dashboard, select the site where you want to add a popup form.
  • Navigate to the Site section in the left-hand menu.
  • Then click on “Popups & Forms”.

Step 2: Create a New Popup

  • Click the “Create New Popup” button.
  • A popup window will appear. Enter a name for your popup (e.g. “My First Popup”).
  • Select the ‘Form Type’ from options such as Popup Box, Sticky Banner, Slide-In, and Embedded.
  • Click “Continue”.

Step 3: Configure Popup Settings

  • Depending on the type of popup or form you select, you will see different settings.
  • As an example, I will set the “Hide Duration” setting to 0. This setting determines how long, in days, the pop-up will remain hidden after a user closes it. Since it is set to “0,” it means that the pop-up will be hidden only until the user closes it, and it will reappear on the next page load.
  • Once done, please click on next.

Step 4: Configure Popup Display Settings

  • Depending on the type of popup or form you select, you will see different display settings.
  • For example, I will enable the trigger “Trigger after loading delay” and set it to “0” seconds. This means the popup will be shown immediately every time the page loads, allowing us to test whether the popup is functioning correctly.
  • Additionally, I will add a rule to ensure that the popup is displayed across the entire website by entering the main domain (this can be adjusted later).
  • And I will set the frequency to “0”, to make sure the popup appears each time when the page loads
  • Once you have configured the settings, please click on “Next.”
  • Next, you will see the section titled “Custom JavaScript.” If you do not have any custom JavaScript to add, simply click on “Finish,” and you will be redirected to the “Popup & Forms” tab.

Step 5: Design the Popup Using the Builder

  • Once the popup & form have been created, click ‘Design.
  • The popup & form builder interface will appear. Here, you can construct your popup using various modules.
  • To add an image:
    • Click on the image module to select it and drag it to the canvas.
    • Click “Upload Image” and select your desired image.
    • Adjust the image width as needed (e.g., 30%).
  • To add a lead-capturing form:
    • Select the “Form” module and drag it to the canvas.
    • By default, the form includes an email field.

Step 6: Customize the lead-capturing form

  • Click to edit the form module you added.
  • For additional fields, click “Add Field”. For example, to add a “First Name” field:
    • Enter the field name (e.g., “first_name”).
    • Enter the field label and decide whether you want to display the label.
    • Enter the placeholder text (e.g., “Please add your first name”).
    • Click “Add Field”.
    • Repeat the process to add other fields such as “Company”.
  • It is super important to ensure the “Lead Form” submit action is selected to mark this as a lead capture form.

Step 7: Finalize the popup & form

  • Once the form and other elements are in place, click “Save”.

Your Popup & form is now created and ready to capture high-quality leads!