Need to create a popup on click of an image

shrutirathi — Mon, 19 Jun 2023 08:18:56 GMT

Hello,

I have created a sample header and footer for our revised blog design. I have a requirement for the same. It is to open a popup box on click of a button. It seemed to work from creating a sample page in hubspot. I had created a page added a button and added the popup form using new popup CTA feature. But it failed to work when I tried to open it from the template. I have a header and it has a contact CTA button. I want to open the popup form on clicking the CTA button.

Can anyone please guide how this can be achieved in hubspot.

Thank you

Re: Need to create a popup on click of an image

MiaSrebrnjak — Tue, 20 Jun 2023 10:13:16 GMT

Hi @shrutirathi,

Thank you for reaching out to the Community!

Just to confirm, has your revised blog already been published? Or are you still testing in draft mode?

If it has already been published, I'd recommend checking if the HubSpot tracking code is firing correctly as the tracking code is what triggers the pop up CTA.

You could also check this Community article (Pop-up CTAs trigger not working correctly) where @Whathcock shared some helpful troubleshooting tips in her reply.

@Whathcock & @AnCabanSeq, do you maybe have any other advice for @shrutirathi?

Cheers
Mia, Community Team

Re: Need to create a popup on click of an image

shrutirathi — Tue, 20 Jun 2023 10:30:57 GMT

Hi Mia,
Thank you for your response. My blog 's revised template is not published
yet. It is still in the testing stage.
I have a revised header and footer in my new template and I want to add a
popup on that header. (Want a form to appear in the popup on click of
contact button).
I am not finding any way to add a popup form in the template. The link
which you have shared has no insight for it.

Thank you,
Shrut Rathi

Re: Need to create a popup on click of an image

Anton — Wed, 21 Jun 2023 18:48:53 GMT

Hi @shrutirathi,

if you have a developer by your side or are not afraid of using the design-manager/design-tools you could create a custom module for pop-ups. It's a little bit tricky but also not the hardest thing you can create. Here's a step-by-step guide how to create a custom pop-up module

Open the design-tools(Marketing->Files&Templates->Design-Tools).
Open the theme you're using/developing
Right-click on the modules folder and select "Create new file"
Select "Module" in the first drop-down
click next
Select the page types you'd like to use this module. If it's going to be only in header/footer it doesn't matter. Also: You can change this at any time
Select if it should be a local or global module. Local modules can be used several times on a single page with different content; a global module can be used several times on a single page but has always the same content side-wide. Important: This can't be changed without local environment so decide wisely(or jsut create two modules; one global, one local)
Give it a name. I recommend to use underscores('_') or dashes('-') instead of spaces(' ') but it's not that important
Click create
🎉 You have created your custom module

Now for the fun part - the code

There are A LOT possibilities how to create pop-up modules. Some are just plain HTML+CSS but most of them take advantage of some sort of JavaScript (libraries).

Personally I use bootstrap since I implement it in all of my themes and why re-invent the wheel?

If you're already using some sort of framework - take a look at the documentation, maybe there are already pop-ups build in.

For this example I'll go with the bootstrap approach

1. Adding bootstrap framework to the module

Go to the HTML+Hubl area of the module and write the code like this

{% require_head %} <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> {% end_require_head %}

This will load the whole bootstrap javascript into the page you're using the module in.

Tipp:If you're already using bootstrap you can skip this since it can have an impact on page performance

2. Add the basic modal function to the module

Add this default bootstrap modal code to the HTML+Hubl area

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button>  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

3. Change the modal code

Since it's gonna be a form which will be pop up you don't really need a lot of the code so modify the code above to this version

4. Add HubSpot functionality to the pop-up/modal

Now it's all about providing HubSpot functionality so it's gonna be a useful module. Add at least those options in the right sidebar

form (form function)
Button title (text function; not rich-text)

5. Placing the HubSpot functionality to the code

Let's put those options to the code

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#popUp-{{ name|md5 }}"> {{ module.button_title }} </button>  <div class="modal fade" id="popUp-{{ name|md5 }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> {% form form_to_use="{{ module.form.form_id }}" response_response_type="{{ module.form.response_type }}" response_message="{{ module.form.message }}" response_redirect_id="{{ module.form.redirect_id }}" response_redirect_url="{{module.form.redirect_url}}" gotowebinar_webinar_key="{{ module.form.gotowebinar_webinar_key }}" %} </div> </div> </div> </div>

6. Adding styling to the pop-up/modal so it looks and works

Now it's all about the look & feel and you have several options. You can either create a new CSS file somewhere in your theme, paste the code into an existing file or paste it into the module.

In case you want it to "just work" you can place the following code into the module.css area of the module

.modal { position: fixed; top: 0; left: 0; z-index: 1060; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; } .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.show .modal-dialog { transform: none; } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.5; } .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }

7. Save the module, test it, if it works successfully, place the module into your header/footer

8. Done

hope this helps

best,

Anton

Re: Need to create a popup on click of an image

shrutirathi — Fri, 23 Jun 2023 06:15:24 GMT

Thank you so much Anton, This is working like a charm! Your to the point explanation is making it quick to implement! Thank you

Re: Need to create a popup on click of an image

MiaSrebrnjak — Fri, 23 Jun 2023 09:50:22 GMT

@Anton, you rock! 🙂 Thank you for your help!

Re: Need to create a popup on click of an image

shrutirathi — Fri, 23 Jun 2023 11:16:26 GMT

Hi Anton,

This is showing form in a apopup, but not displaying the form which I need. I have selected the form which I need from the right sidebar, but it is not reflecting in the popup. Some other form is reflecting there.

Can you please suggest what should be the reason.

Re: Need to create a popup on click of an image

shrutirathi — Tue, 04 Jul 2023 11:10:47 GMT

Hello Anton,

Thank you so much for your response. This solution is working great. But unfortunately the form is not working. I have tried to add different forms in the module, the form are visible but they are not functioning. Submit button just does not work. Can you please suggest something for the same.

topic Re: Need to create a popup on click of an image in Blog, Website & Page Publishing

Need to create a popup on click of an image

Re: Need to create a popup on click of an image

Re: Need to create a popup on click of an image

Re: Need to create a popup on click of an image

Re: Need to create a popup on click of an image

Re: Need to create a popup on click of an image

Re: Need to create a popup on click of an image

Re: Need to create a popup on click of an image