Form pop up after clicking an image

[RHeinze]

Hi, 

Hoping you could help me. I want a form to pop up when an image is clicked on a landing page. 

Any advice on how and if this is possible?

Thank you! 

[TomM2 · Accepted solution]

Hey @RHeinze  you'll need a bit of html for this, but it's quite easily possible through code snippets in HubSpot CTAs. 

You just need to create a html anchor element (IE a link) around your image and then use the HubSpot CTA trigger class in this: 

Then you HubSpot CTA should just be the pop-up form you want! 

[mdgibbons · Accepted solution]

Posting my solution in case someone else is looking for help. Here's how I did it.

1. Create the HS Popup and get the id as specified in @TomM2 image in earlier reply (Targetting/Code Snippet)

2. Go to your landing page and add regular HS Button with a CTA for the HS Popup you've created. You will eventually hide this element but need it so the CTA will get loaded on the page properly.

3. Add a Rich Text element and go into Advanced/Source code and create an image HTML that looks like this:

<img src="https://placehold.co/400x200" alt="image_name" style="width: 400px;" class="hs-cta-trigger-button hs-cta-trigger-button-[***your-cta-id-goes-here***]">

4.  Hide the button in the Visibility option 

Hope that helps

[TomM2 · Accepted solution]

Hey @RHeinze  you'll need a bit of html for this, but it's quite easily possible through code snippets in HubSpot CTAs. 

You just need to create a html anchor element (IE a link) around your image and then use the HubSpot CTA trigger class in this: 

Then you HubSpot CTA should just be the pop-up form you want! 

[RHeinze]

Thank you Tom, that makes sense to me. Where on the hubspot landing page do I put the code? Cheers 

[TomM2]

Hey @RHeinze you would need to create a custom module with this, or you can add it into a rich text editor under the "advanced" > "source code" option! 

[RHeinze]

 Thank you! I have gone ahead and done the code to link the image, however cant seem to work out how to code it so that the pop up appears? 

This is what I have so far, any tips?

<a href="hs-cta-trigger-button hs-cta-trigger-button-118248858310"> <img src="https://27247968.fs1.hubspotusercontent-eu1.net/hubfs/27247968/Screenshot%202024-10-21%20121823.png" alt="clickablevideo"> </a>

[RHeinze]

Thank you! I have gone ahead and done the code to link the image, however cant seem to work out how to code it so that the pop up appears?

This is what I have so far, any tips?

[TomM2]

Hey @RHeinze looks like you added your CTA trigger class as the link for the link item (in the href attribute). It should be added in as a class in your link. 

There's a bit more info on this within the Kb article here.