Multiple CTAs that trigger embedded Typeform | Community
Skip to main content
Answered

Multiple CTAs that trigger embedded Typeform


Hi there,

I’m trying to embed the Typeform, that should pop up when pressed by any of the CTA buttons across multiple pages (multiple on the same page too).

For some reason, it only works for one button (using the ID option). Here’s the code.

<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script>
  const { open, close, toggle, refresh } = window.tf.createPopup('<form-id>')
  document.querySelector('#lead-form').onclick = toggle
</script>

I tried it with querySelectorAll, but that doesn’t work either. 

Would love getting some guidance on how to solve this. Thanks!

Best answer by mathio-tf

Hello @maartin9 can you share your code using querySelectorAll

Don’t forget method querySelectorAll returns NodeList and you need to add the toggle handler in a loop for each element:

document
  .querySelectorAll(".my-cta")
  .forEach(btn => btn.onclick = toggle)

 

View original

5 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14893 replies
  • July 1, 2022

@mathio might be able to help with this!


  • Author
  • Explorer
  • 2 replies
  • July 5, 2022

Hi again,
Tha@Liz , hopefully @mathio can answer :) 

For now, what I’m using is just:

<!-- <script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script>
  const { open, close, toggle, refresh } = window.tf.createPopup('form-id')
  document.querySelector('#button-leadform1').onclick = toggle
  document.querySelector('#button-leadform2').onclick = toggle
</script>

So basically just creating additional querySelectors for all buttons, but this is far from ideal because there will be 20+ buttons across the website.


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • July 5, 2022

Hello @maartin9 can you share your code using querySelectorAll

Don’t forget method querySelectorAll returns NodeList and you need to add the toggle handler in a loop for each element:

document
  .querySelectorAll(".my-cta")
  .forEach(btn => btn.onclick = toggle)

 


  • Author
  • Explorer
  • 2 replies
  • July 5, 2022

That works beautifully! Thank you!


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14893 replies
  • July 5, 2022

Yay! Glad to hear that worked, @maartin9 !