topic How to Embed Typeform in a HubSpot Popup CTA Before Redirecting in CMS Development

How to Embed Typeform in a HubSpot Popup CTA Before Redirecting

JKuells — Wed, 18 Jun 2025 18:13:32 GMT

I’m updating a HubSpot landing page. Currently, the CTA links directly to a booking page. I’d like the CTA to instead trigger a popup with a Typeform (already built) to qualify users before they book.

I tried:

Embedding the Typeform in a popup CTA using a rich text module via the source code — but the code doesn't save.
Using a custom HTML CTA — but the embed code gets stripped or shortened.
I was advised to try the Custom CSS section, but it seems that would require more advanced implementation.

What’s the best way to embed a Typeform in a HubSpot popup CTA so it displays in a modal before redirecting to a booking page? The standard embed methods aren’t saving properly—should I use a workaround?

Re: How to Embed Typeform in a HubSpot Popup CTA Before Redirecting

BérangèreL — Thu, 19 Jun 2025 09:12:56 GMT

Hi @JKuells and welcome, it's a pleasure to have you here! 🤗

Great question, thanks for asking the HubSpot Community!

To start with, here are some resources on the topic:

- Use non-HubSpot forms
- Create calls-to-action (CTAs)
- Pop-up forms and non-HubSpot forms | Frequently Asked Questions
- Edit and manage pop-up forms (legacy)
- Convert non-HubSpot forms into HubSpot forms

I'd love to consult with our Top Experts: Hi @himanshurauthan, @johnkarlo, @EdCupaioli, @KyleCombs, @danmoyle and @ChristinaKay do you have suggestions to help @JKuells, please?

Have a lovely day and thanks so much in advance for your help! ❤️
Bérangère

Re: How to Embed Typeform in a HubSpot Popup CTA Before Redirecting

SanjayKumar — Fri, 20 Jun 2025 05:30:31 GMT

Hi  @JKuells
If you want to display a Typeform in a popup automatically on your HubSpot page, here’s a simple method using HTML, CSS, and JavaScript.
This version triggers the popup 5 seconds after page load, includes a close button, and is mobile-friendly.HTML + Typeform Embed Code
html

<div class="popup-form-module">
<div id="typeform-popup" class="popup hidden">
   <div class="popup-overlay" id="popup-overlay"></div>
   <div class="popup-content">
     <button class="close-btn" id="close-popup-btn">×</button>
     
     <div data-tf-live="YOUR_TYPEFORM_ID"></div>
   </div>
</div>
</div><script src="//embed.typeform.com/next/embed.js"></script>CSS Styling
css

.popup.hidden {
display: none;
}.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}.popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}.popup-content {
position: relative;
margin: 5% auto;
width: 90%;
max-width: 800px;
background: #fff;
padding: 2rem;
border-radius: 10px;
z-index: 10000;
}.close-btn {
position: absolute;
top: 10px;
right: 15px;
background: #000000

;
border: none;
font-size: 1rem;
cursor: pointer;
}

JavaScript to Trigger Popup
html

<script>
document.addEventListener("DOMContentLoaded", function () {
   const popup = document.getElementById("typeform-popup");
   const closeBtn = document.getElementById("close-popup-btn");
   const overlay = document.getElementById("popup-overlay");   // Show popup after 5 seconds
   setTimeout(function () {
     popup.classList.remove("hidden");
   }, 5000);   // Close popup on button or overlay click
   closeBtn.addEventListener("click", function () {
     popup.classList.add("hidden");
   });   overlay.addEventListener("click", function () {
     popup.classList.add("hidden");
   });
});
</script>