April 29, 2024

What steps are required to design and deploy a pop-up form on my website using HubSpot?

Hubspot logo

Step 1: Access HubSpot’s Marketing Tools

  • Log in to your HubSpot account.
  • Navigate to the top menu and hover over “Marketing.”
  • From the dropdown list, select “Lead Capture” and then click on “Pop-up Forms.”

Step 2: Create a New Pop-up Form

  • Click on the “Create a pop-up form” button located on the top right corner of the screen.

Step 3: Choose the Pop-up Form Type

  • HubSpot offers various types of pop-ups, including:
  • Pop-up box
  • Dropdown banner
  • Slide-in box (left or right)
  • Full screen
  • Choose your desired pop-up form type and click “Next.”

Step 4: Design Your Pop-up Form

  • Add a form name for internal use.
  • Set up the “Call to Action.” This includes the form's headline, description, and any imagery.
  • Choose the fields you want on the form (e.g., name, email, etc.).
  • Customize the look and feel by adjusting colors, fonts, and other visual elements to match your brand.

Step 5: Set Up Form Options

  • Choose how the form should behave after submission. Options include:
  • Displaying a thank you message.
  • Redirecting the user to another page.
  • Configure email notifications if you wish to be informed every time someone fills out the form.

Step 6: Set Display Triggers

  • Determine when and where the pop-up form will appear on your website. You can choose triggers based on:
  • Time spent on a page.
  • Scroll depth on a page.
  • Exit intent.
  • Set the frequency of how often returning visitors will see the pop-up again.

Step 7: Target Specific Audiences

  • Segment your audience based on various criteria (e.g., country, referral source, device type, etc.) to display the form only to specific visitors.

Step 8: Connect to a Follow-Up Email (Optional)

  • If you want to send an automated email after someone fills out the form, you can set this up here.

Step 9: Preview Your Pop-up Form

  • Use the preview option to ensure the pop-up looks and functions as expected on different devices.

Step 10: Install or Update the HubSpot Tracking Code

  • Ensure the HubSpot tracking code is installed on your website. This code allows the pop-up form to display on your site.
  • If you haven't already added the HubSpot tracking code to your website, follow the provided instructions to do so.

Step 11: Publish Your Pop-up Form

  • Once satisfied with your pop-up form, click on the “Publish” button.
  • The pop-up form will now be live on your website based on the conditions you set.