Click Header button – Open Typeform Popup

#1. First, add your Typeform Embed Code to the Code Injection – Footer

Each form will have a different embed code, here I use a random embed code.

<div data-tf-live="01HPMVMRXWADYHC368ZN0ZCFR7"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

#2. Use this code to Custom CSS box and click Save

[data-tf-live] {
     opacity: 0 !important;
   position: absolute;
   z-index: -100;
 }

#3. Use this code to Code Injection – Footer, under Typeform Embed code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', 'a.btn', function(event) { 
    event.preventDefault(); 
    $('button[data-tf-popup]').click(); 
});
</script>

#4. Edit Header button > Edit URL (and make sure Open link in New Tab is DISABLED)

#5. Done. When users click the Header Button, it will show Typeform in a popup

Ask me a question, free