Skip to main content
Answered

Multiple CTAs that trigger embedded Typeform

  • Jul 1, 2022 6:02 AM UTC
  • 5 replies
  • 326 views

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
    Ex–Typefomer
    Forum|alt.badge.img+5
    • Liz
    • Tech Community Advocate
    • Jul 1, 2022 10:58 PM UTC

    @mathio might be able to help with this!

    Life is a series of awkward moments separated by snacks.
    • maartin9
    • Author
    • Explorer
    • Jul 5, 2022 8:37 AM UTC

    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
      • mathio-tf
      • Typeform
      • Answer
      • Jul 5, 2022 8:59 AM UTC

      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)

       

        • maartin9
        • Author
        • Explorer
        • Jul 5, 2022 9:08 AM UTC

        That works beautifully! Thank you!

          Liz
          Ex–Typefomer
          Forum|alt.badge.img+5
          • Liz
          • Tech Community Advocate
          • Jul 5, 2022 2:56 PM UTC

          Yay! Glad to hear that worked, @maartin9 !

          Life is a series of awkward moments separated by snacks.

            Still need help?

            Don't be shy and ask the community.

            Ask your question here!
            Community T&Cs Accessibility statement