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?
Answer
Connecting a Klaviyo legacy form with existing button
+2Best answer by Mailbox Manny
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 example:
onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});"
let me know if you have issues with it!
+38Hi!
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 example:
onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});"
let me know if you have issues with it!
+2Hi!
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 example:
onclick="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?
+60Hello
In addition to the great call out from
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
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.