Skip to main content
Solved

i am developer i use klaviyo form with lagecy mode now i want to show new custom html popup after form submit

  • January 22, 2021
  • 2 replies
  • 610 views

Forum|alt.badge.img+3

i integrate klaviyo on shopify theme with legacy mode.

form working now 

now i want show the custom html popup when form submits successfully  

Best answer by retention

@sanjay_ - The Legacy Form generates a Javascript success callback that you can execute Javascript to handle upon a successful form submit. 

Using the example from Klaviyo’s documentation, on the success callback, this example pushes the “identify” function to Klaviyo based on the email that was submitted.

<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#email_signup', {
 ...
 success: function ($form) {
 // `$form` is a jQuery wrapper around the form that was submitted. This makes it easy to get the email address or form fields.
   var email = $form.find('[name="email"]').val();
   _learnq.push(['identify', { $email: email }]);
   _learnq.push(['track', 'Signed Up for Newsletter']);
 }
 ...
 });
</script>

In the similar method, you can also create your own function that can Show/Unhide an HTML Popup on the success callback.


Some more details of Legacy Form options here:
How to Add and Customize a Legacy Embedded Signup Form

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 920 replies
  • Answer
  • January 25, 2021

@sanjay_ - The Legacy Form generates a Javascript success callback that you can execute Javascript to handle upon a successful form submit. 

Using the example from Klaviyo’s documentation, on the success callback, this example pushes the “identify” function to Klaviyo based on the email that was submitted.

<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#email_signup', {
 ...
 success: function ($form) {
 // `$form` is a jQuery wrapper around the form that was submitted. This makes it easy to get the email address or form fields.
   var email = $form.find('[name="email"]').val();
   _learnq.push(['identify', { $email: email }]);
   _learnq.push(['track', 'Signed Up for Newsletter']);
 }
 ...
 });
</script>

In the similar method, you can also create your own function that can Show/Unhide an HTML Popup on the success callback.


Some more details of Legacy Form options here:
How to Add and Customize a Legacy Embedded Signup Form


caroline
Forum|alt.badge.img+8
  • Klaviyo Alum
  • 215 replies
  • March 5, 2021

Hi @sanjay_,

Wanted to check in on this -- were you able to give @retention’s suggestion a try? Happy to answer any followup questions you might have!

Best,

Caroline