Skip to main content
Answer

Multiple CTAs that trigger embedded Typeform

  • July 1, 2022
  • 5 replies
  • 253 views
M

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)

 

Gabi Amaral

5 replies

Liz
Ex–Typefomer
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • July 1, 2022

@mathio might be able to help with this!

Life is a series of awkward moments separated by snacks.
M
  • maartin9
  • Author
  • Explorer
  • 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.

Gabi Amaral
mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 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)

 

Liz
john.desborough
M
M
  • maartin9
  • Author
  • Explorer
  • July 5, 2022

That works beautifully! Thank you!

john.desborough
mathio-tf
Gabi Amaral
Liz
Ex–Typefomer
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • July 5, 2022

Yay! Glad to hear that worked, @maartin9 !

Life is a series of awkward moments separated by snacks.
john.desborough

Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs Accessibility statement