HubSpot Open Popup Form on CTA Button Click

[dar_261991]

I am trying to create a popup form that opens when a user clicks on a CTA button. However, as the CTA button requires a URL to create, the popup form is not opening as intended.

I would appreciate any assistance on how to resolve this issue.

[Indra · Accepted solution]

Hi @dar_261991,

I suggest using the dialog element that will be toggled by a button. It's also recommended to write your javascript without jQuery for better support if jQuery get's disabled inside your HubSpot portal.

Here a code example that you also can check on CodePen.

HTML

<button class="button">
  Open Modal
</button>
<dialog class="modal" aria-state="closed">
  <div class="modal__wrapper">
    <button class="modal__close">✕</button>
    <div class="modal__content">
      Add form. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit voluptate deleniti maxime ea nisi ipsum tenetur ipsam repudiandae itaque nobis.
    </div>
  </div>
</dialog>

CSS

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font: 18px / 1.5 sans-serif;
}
.button {
  border: 2px solid #333;
  background-color: #222;
  color: #fff;
  padding: 30px 50px;
  border-radius: 4px;
  font-size: 30px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.button:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.modal {
  border: 0;
  background-color: transparent;
  padding: 20px;
  transition: all 300ms ease-in-out;
}
.modal[aria-state="closed"] {
  opacity: 0;
}
.modal[aria-state="open"] {
  opacity: 1;
}
.modal[aria-state="closed"]::backdrop {
  background-color: rgba(0, 0, 0, 0);
}
.modal[aria-state="open"]::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}
.modal__wrapper {
  max-width: 500px;
  width: 100%;
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal__close {
  --size: 28px;
  position: absolute;
  top: calc(var(--size) / 2 * -1);
  right: calc(var(--size) / 2 * -1);
  border: 0;
  background: #000;
  color: #fff;
  font-weight: bold;
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

Javascript

const button = document.querySelector("button.button");
const modal = document.querySelector("dialog.modal");
const close = modal.querySelector(".modal__close");

function closeModal() {
  modal.setAttribute("aria-state", "closed");
  setTimeout(function () {
    modal.close();
  }, 300);
}

function openModal() {
  modal.showModal();

  setTimeout(function () {
    modal.setAttribute("aria-state", "open");
  }, 300);
}

button.addEventListener("click", function (e) {
  openModal();
});

close.addEventListener("click", function (e) {
  closeModal();
});

modal.addEventListener("click", function (e) {
  if (e.target.tagName == "DIALOG") {
    closeModal();
  }
});

[Jnix284 · Accepted solution]

@dar_261991  HubSpot has a new Pop-up CTA feature that let's you open a form on button click.

From Marketing > Lead Capture > CTAs:

When you click Create, you can choose from Templates (like the Download Email Template) or Start from scratch to build your own

The module where you are adding the Button/CTA does have to have the "Pop-up CTA" URL type enabled in the field setting to add the pop-up you've created to the page.

[SArnold13]

Hi Jennifer - I'm trying to use the new pop-up cta with form, but the form is opening in a new blank window. Do you know how to troubleshoot that? Here's the page. And it's the 2 toolkit buttons and 3 guide buttons that have the pop-up form. I'm also using smart content, so that if someone has a member of a list, they don't see the form. 

[Jnix284]

Hi @SArnold13 when I view the page, the pop-up form opens as expected, but there's a link for "Download the TLF today" that goes directly to the PDF in a new tab rather than the pop-up form - is that the one you're referring to?

For me, the pop-ups open like this:

[SArnold13]

Thank you for your response! I resolved the issue after posting.

[Jaycee_Lewis]

Hey, @SArnold13 👋 Thanks for letting us know! — Jaycee

[Indra · Accepted solution]

Hi @dar_261991,

I suggest using the dialog element that will be toggled by a button. It's also recommended to write your javascript without jQuery for better support if jQuery get's disabled inside your HubSpot portal.

Here a code example that you also can check on CodePen.

HTML

<button class="button">
  Open Modal
</button>
<dialog class="modal" aria-state="closed">
  <div class="modal__wrapper">
    <button class="modal__close">✕</button>
    <div class="modal__content">
      Add form. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit voluptate deleniti maxime ea nisi ipsum tenetur ipsam repudiandae itaque nobis.
    </div>
  </div>
</dialog>

CSS

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font: 18px / 1.5 sans-serif;
}
.button {
  border: 2px solid #333;
  background-color: #222;
  color: #fff;
  padding: 30px 50px;
  border-radius: 4px;
  font-size: 30px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.button:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.modal {
  border: 0;
  background-color: transparent;
  padding: 20px;
  transition: all 300ms ease-in-out;
}
.modal[aria-state="closed"] {
  opacity: 0;
}
.modal[aria-state="open"] {
  opacity: 1;
}
.modal[aria-state="closed"]::backdrop {
  background-color: rgba(0, 0, 0, 0);
}
.modal[aria-state="open"]::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}
.modal__wrapper {
  max-width: 500px;
  width: 100%;
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal__close {
  --size: 28px;
  position: absolute;
  top: calc(var(--size) / 2 * -1);
  right: calc(var(--size) / 2 * -1);
  border: 0;
  background: #000;
  color: #fff;
  font-weight: bold;
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

Javascript

const button = document.querySelector("button.button");
const modal = document.querySelector("dialog.modal");
const close = modal.querySelector(".modal__close");

function closeModal() {
  modal.setAttribute("aria-state", "closed");
  setTimeout(function () {
    modal.close();
  }, 300);
}

function openModal() {
  modal.showModal();

  setTimeout(function () {
    modal.setAttribute("aria-state", "open");
  }, 300);
}

button.addEventListener("click", function (e) {
  openModal();
});

close.addEventListener("click", function (e) {
  closeModal();
});

modal.addEventListener("click", function (e) {
  if (e.target.tagName == "DIALOG") {
    closeModal();
  }
});

[ankitparmar09]

Hello @dar_261991 

Can't be doing this. You can create custom button popup functionality. Below code, you can use it.

Try this

HTML code

<div class="Click-here">Click Here</div> 
<div class="custom-model-main">
<div class="custom-model-inner"> 
<div class="close-btn">×</div>
<div class="custom-model-wrap">
<div class="pop-up-content-wrap">
Content Here
</div>
</div> 
</div> 
<div class="bg-overlay"></div>
</div> 

CSS

.Click-here {
cursor: pointer;
background-image: linear-gradient(190deg, #f83600 0%, #fee140 100%);
color: #fff;
width: 180px;
text-align: center;
font-size:16px;
padding: 18px 0;
margin: 0 auto;
transition:background-image 3s ease-in-out;
}
.Click-here:hover{
transition:background-image 3s ease-in-out;
background-image: linear-gradient(90deg, #fee140 0%, #f83600 100%);
}
.custom-model-main {
text-align: center;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; /* z-index: 1050; */
-webkit-overflow-scrolling: touch;
outline: 0;
opacity: 0;
-webkit-transition: opacity 0.15s linear, z-index 0.15;
-o-transition: opacity 0.15s linear, z-index 0.15;
transition: opacity 0.15s linear, z-index 0.15;
z-index: -1;
overflow-x: hidden;
overflow-y: auto;
}

.model-open {
z-index: 99999;
opacity: 1;
overflow: hidden;
}
.custom-model-inner {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
display: inline-block;
vertical-align: middle;
width: 600px;
margin: 30px auto;
max-width: 97%;
}
.custom-model-wrap {
display: block;
width: 100%;
position: relative;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: 0;
text-align: left;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: calc(100vh - 70px);
overflow-y: auto;
}
.model-open .custom-model-inner {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
position: relative;
z-index: 999;
}
.model-open .bg-overlay {
background: rgba(0, 0, 0, 0.6);
z-index: 99;
}
.bg-overlay {
background: rgba(0, 0, 0, 0);
height: 100vh;
width: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-transition: background 0.15s linear;
-o-transition: background 0.15s linear;
transition: background 0.15s linear;
}
.close-btn {
position: absolute;
right: 0;
top: -30px;
cursor: pointer;
z-index: 99;
font-size: 30px;
color: #fff;
}

@media screen and (min-width:800px){
.custom-model-main:before {
content: "";
display: inline-block;
height: auto;
vertical-align: middle;
margin-right: -0px;
height: 100%;
}
}
@media screen and (max-width:799px){
.custom-model-inner{margin-top: 45px;}
}

JS

$(".Click-here").on('click', function() {
$(".custom-model-main").addClass('model-open');
}); 
$(".close-btn, .bg-overlay").click(function(){
$(".custom-model-main").removeClass('model-open');
});

I hope it can help you.

[piersg]

Basically you can't do this with Hubspot CTAs (and retain the tracking that comes with CTAs). You have to create your own button and JS to display and hide a popup form.