Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Creating Pop-Up Forms on HubSpot Landing Pages

A step-by-step guide to enhance user engagement through image-triggered forms

Overview

This article guides you through the process of creating interactive pop-up forms on HubSpot landing pages, triggered by image clicks. By following these steps, you can enhance user engagement and improve lead capture.

Instructions

1. Prepare Your Image

Start by selecting the image you want to use as the trigger for your pop-up form. Ensure that it is ready for use, as it will be the focal point for user interaction.

2. Insert HTML Code

You’ll need to wrap your image in an HTML anchor element and apply the appropriate HubSpot Call-to-Action (CTA) trigger class. Here’s the code structure you'll use:

<a class="hs-cta-wrapper" href="javascript:void(0)">
   <img src="YOUR_IMAGE_URL" alt="Click here to open form" />
</a>

Remember to replace YOUR_IMAGE_URL with the actual URL of your selected image.

3. Add the Code to Your Landing Page

To implement the code:

  • Navigate to your HubSpot landing page.
  • Depending on the complexity of your layout, choose either a custom module or the rich text editor for editing.
  • If using the rich text editor, click on "Advanced" and select "Source Code" to enter your HTML directly.

4. Link Your Pop-Up Form

Next, you’ll need to ensure that the anchor link triggers the correct pop-up form. This involves linking your anchor tag to a CTA in HubSpot that corresponds with the form you have created.

5. Test Your Implementation

Once you’ve inserted the code and linked the CTA, preview your landing page. Click on the image to verify that it successfully triggers the pop-up form.

Conclusion

By following these steps, you can create engaging pop-up forms on your HubSpot landing pages that respond to image clicks. This strategy utilizes simple HTML and HubSpot's CTA functions to enhance user experience and increase lead capture potential.