How to Embed Typeform in a HubSpot Popup CTA Before Redirecting

Developer Support CMS Development
1

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?

2

Hi @JKuells and welcome, it’s a pleasure to have you here! :hugs:
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! :heart:
Bérangère

3

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>
<!-- Replace YOUR_TYPEFORM_ID with your actual Typeform ID -->
<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>