Solved

Connecting a Klaviyo legacy form with existing button

  • 19 October 2021
  • 3 replies
  • 41 views

Badge

I’m trying to connect a legacy form to be triggered to an existing add to cart button on my Shopify store. i’ve already gone through the link: 
https://help.klaviyo.com/hc/en-us/articles/115005077007-How-to-Trigger-a-Legacy-Popup-When-a-Button-is-Clicked

However, it seems its a bit unclear at the end as to how to have this form triggered by an existing button instead of creating a new one. Can I have any help on this please?

icon

Best answer by Manny Singh 19 October 2021, 18:56

View original

3 replies

Userlevel 6
Badge +5

Hi! 

It’s mentioned in the things to note at the bottom of the page:

Things to note here:

  • Your form will have an ID associated with it that can be found in the first line. In the above example, our form ID is k_id_modal. You will notice that in the second snippet, this same ID is referenced as follows: #k_id_modal. This is important to ensure the "on click" functionality added is connected to the right form on your site.
  • In this example, the button isn't styled and the button text set is "Click me!" -- when you use this on your site, you will probably want to use an existing button. To do this, copy the full "onclick" function used in the exampleonclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});"

 

let me know if you have issues with it!

Badge

Hi! 

It’s mentioned in the things to note at the bottom of the page:

Things to note here:

  • Your form will have an ID associated with it that can be found in the first line. In the above example, our form ID is k_id_modal. You will notice that in the second snippet, this same ID is referenced as follows: #k_id_modal. This is important to ensure the "on click" functionality added is connected to the right form on your site.
  • In this example, the button isn't styled and the button text set is "Click me!" -- when you use this on your site, you will probably want to use an existing button. To do this, copy the full "onclick" function used in the exampleonclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});"

 

let me know if you have issues with it!

Hey Manny,

Thank you for your answer. I’m still a bit confused regarding copying the function.  It’s asking me to copy the function already used in the example? And what to do of it once I go ahead and copy it? 

Userlevel 6
Badge +5

Hello @naveed932,

In addition to the great call out from @Mailbox Manny, that portion of the How to Trigger a Legacy Popup When a Button is Clicked Help Center article indicates that you should be copy and pasting that “onclick” function to be incorporated onto your existing button’s code. Keep in mind you’ll also want to update that snippet to align with the ID associated with the button you wish to have the legacy form appear when the button is clicked. 

Overall once that existing “onclick” snippet has been updated and incorporated as part of your existing button’s code, the legacy form should appear once the button is clicked by your site visitor. 

Because legacy forms use custom HTML and CSS, I would suggest working with a developer or finding a Klaviyo partner who can further assist you in implementing this solution!

I hope this helps!

David

Reply