Jump to content

Header Button to activate typeform pop-up

Recommended Posts

Hello, can someone help me with making a tweak on my website?

I am trying to have the header button activate a typeform pop-up window the same way the BUY PASS buttons do on the rest of the website, I'm guessing there would have to be a code injected/embedded on the button but since it is in the header I don't see how to do that. Anyone can help with this?

Link to comment
  • Replies 15
  • Views 3.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 months later...
  • 2 months later...

Hey @tuanphan

Having the same issue. Looking to embed the pop-up into the "Get Started" button at the bottom under "Stop Noodlin' and Start Doodlin'"


Here's the link -> www.madebyapricot.com
Here's the typeform button -> <div data-tf-live="01HPMVMRXWADYHC368ZN0ZCFR7"></div><script src="//embed.typeform.com/next/embed.js"></script>

Link to comment
On 2/17/2024 at 10:52 AM, madebyapricot said:

Hey @tuanphan

Having the same issue. Looking to embed the pop-up into the "Get Started" button at the bottom under "Stop Noodlin' and Start Doodlin'"


Here's the link -> www.madebyapricot.com
Here's the typeform button -> <div data-tf-live="01HPMVMRXWADYHC368ZN0ZCFR7"></div><script src="//embed.typeform.com/next/embed.js"></script>

I tried creating a demo, you can check

https://tuanphan.squarespace.com/typeform-popup?noredirect

password: abc

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

(1) First, add your Typeform Embed Code to the Code Injection – Footer

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

Click Header Button Open Typeform Popup 01 Min

(2) Next, use this code to Website Tools > Custom CSS
 

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

Click Header Button Open Typeform Popup 02 Min

(3) Use this code to Code Injection Footer, under Typeform 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>

Click Header Button Open Typeform Popup 03 Min

(4) Edit Header Button, you can use any name/url what you want, but make sure this option is disabled

image.thumb.png.2ec74287ddde490c9c288bb0faaeda64.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/27/2024 at 12:34 AM, madebyapricot said:

Thanks @tuanphan! This is great! If I wanted to add this to a different button on the website, would there be any adjustments to the code required?

a.btn is Header Button ID

image.thumb.png.f112654922b5fdccb345fceeb9999bd7.png

If you want to apply to specific button, you can use another ID

For example, if you want Button Block, use some ID like this

#button-block-id a

Use this tool to find ID: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

If you want to apply to a button in List Section, you can enter this URL to List Item button:

#typeform

then replace

a.btn

with

[href="#typeform"]

In case you still can't make it work, you can share link to page & let me know which button, I will give you exact ID/code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hey @tuanphan,

This is off topic here, so let me know if I should be directed elsewhere but we're also having trouble with custom fonts rolling over to mobile and also have it missing on various parts of our site (ie. sale text, product buttons, product categories, blog titles, etc.) I've attached files for reference.

Our site is www.madebyapricot.com.

Appreciate your help. Let me know if there's anything else you need

Screen Shot 2024-03-07 at 8.54.49 AM.png

Screen Shot 2024-03-07 at 8.54.40 AM.png

Screen Shot 2024-03-07 at 8.54.21 AM.png

Screen Shot 2024-03-07 at 8.54.07 AM.png

Link to comment
18 hours ago, madebyapricot said:

Hey @tuanphan,

This is off topic here, so let me know if I should be directed elsewhere but we're also having trouble with custom fonts rolling over to mobile and also have it missing on various parts of our site (ie. sale text, product buttons, product categories, blog titles, etc.) I've attached files for reference.

Our site is www.madebyapricot.com.

Appreciate your help. Let me know if there's anything else you need

Screen Shot 2024-03-07 at 8.54.49 AM.png

Screen Shot 2024-03-07 at 8.54.40 AM.png

Screen Shot 2024-03-07 at 8.54.21 AM.png

Screen Shot 2024-03-07 at 8.54.07 AM.png

What is problem with custom font? It doesn't work on mobile or you don't know how to add custom font to elements in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

All will use same font or different?

Sale text, use this

.product-mark.sale {
    font-family: 'CaustenRound-Black' !important;
}

Add to Cart, use this

.sqs-add-to-cart-button-inner {
    font-family: 'CaustenRound-Regular' !important;
}

Product Categories, use this

li.category-item a {
    font-family: 'CaustenRound-Black' !important;
}

Blog Titles, use this

h1.blog-title a, .blog-item-wrapper .blog-item-title h1 {
    font-family: 'CaustenRound-Regular' !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.