How to Embed Typeform in a HubSpot Popup CTA Before Redirecting

[JKuells]

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?

[Markestac · Accepted solution]

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">&times;</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>

[BérangèreL]

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