Below is where I added that URL redirect code, shown in red, but it does not work, have I put it in the right place? only the page above with info, does not give a full example added to a form, am I supposed to remove some bits from the button code if using URL redirect?
Would you be able to post the code for the page in full? Omitting any sensitive information such as API keys, email addresses, web addresses etc?
Hi @Dov
Please see code below and thank you for responding, really appreciate it :-)
<div class="klaviyo_modal" id="k_id_modal" style="display:none;"> <div class="klaviyo_inner"> <a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a> <form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo-form-UEruBC"> <input type="hidden" name="g" value="LIST_ID_HERE"> <div class="klaviyo_fieldset"> <img style="display:block;margin:0 auto;margin-bottom:8px" src="image.png" alt=""> <p class="klaviyo_header">Step 1: Enter the email address you want your confirmation sending to</p> </div> <div class="klaviyo_fieldset"> <div class="klaviyo_field_group"> <label for="k_id_modal_$email">Email Address</label><i class="penci-faicon fa fa-envelope"></i> <input type="email" id="k_id_modal_$email" name="email" placeholder="Enter Your Email Address Here..."> </div> </div> <div class="klaviyo_fine_print"></div> <div class="klaviyo_form_actions"> <button type="submit" class="klaviyo_submit_button"> <span>CLICK HERE TO GET DISCOUNT </span> </button> </div> <div class="klaviyo_below_submit"></div> <p class="klaviyo_subheader">We will collect, use and protect your data in accordance with our Privacy Policy</p> </form> </div> </div> <script type="text/javascript"> KlaviyoSubscribe.attachToForms('#email_signup', { hide_form_on_success: true, success_url: "https://www.example.com/thank-you" }); </script> <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<button class="btn cta self-fontsize-adj" data-ori-fontsize="20px" style="font-weight:700;font-size:20px;color:#ffffff!important;background-color:#ff6900!important;" data-live-text-setting="section.template--15031298687163__16306973536031a4e3.block.16306973529281cceb-0.banner_cta" onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true, ignore_cookie: true, success_message: false});">CLICK HERE NOW TO CLAIM THIS OFFER!<br><class cta self-fontsize-adj data-ori-fontsize="18px" style="font-weight:400;font-size:18px;color:#ffffff!important">Save Over 40% OFF Today</class></button>
Hi @Webgatorz,
Thank you for your reply.
Can you try adding the email_signup id to the form element?
KlaviyoSubscribe.attachToForms('#email_signup'
You’ll notice in the help article the id used in attachToForms aligns with the id in the form element.
Hi, @Dov Sorry to sound stupid, would that be k_id_modal from this part of the formid="k_id_modal" so it would be KlaviyoSubscribe.attachToForms('k_id_modal'
I’m curious what you have in the form element, at the very top of the snippet.
if it is “k_id_modal” then that is what should be used. It’s that form id that needs to be present at the top of the snippet and the bottom of the snippet attached to KlaviyoSubscribe.attachToForms. That should work as long as it’s the same in both places in the script.
Alternatively, you can run a custom function to run on a successful AJAX post instead of providing the success URL. Then the function would load the URL you want to display. We have more information on that here.
Hi @Dov now I’m confused lol, I’m not a coder, and I used the form on this page as I wanted the form to be triggered once someone clicks a button.
Thank you for your help @Dov really appreciate it.
Hi @Webgatorz,
Thanks for your reply.
In the following snippet an id was added to the form which should fix this as long as the form is successfully submitting to the list. I think the confusion earlier was because you were referring to the pop-up legacy code and I was looking at the original documentation code linked to the embed legacy code which is slightly different. Also in this snippet, you’ll want to update the success URL. If you’re still having trouble after this, I’d recommend having a dev or one of our partners have a look at this code more closely but this will be a good start:
<div class="klaviyo_modal" id="k_id_modal" style="display:none;"> <div class="klaviyo_inner"> <a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a> <form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo-form-UEruBC"> <input type="hidden" name="g" value="LIST_ID_HERE"> <div class="klaviyo_fieldset"> <img style="display:block;margin:0 auto;margin-bottom:8px" src="image.png" alt=""> <p class="klaviyo_header">Step 1: Enter the email address you want your confirmation sending to</p> </div> <div class="klaviyo_fieldset"> <div class="klaviyo_field_group"> <label for="k_id_modal_$email">Email Address</label><i class="penci-faicon fa fa-envelope"></i> <input type="email" id="k_id_modal_$email" name="email" placeholder="Enter Your Email Address Here..."> </div> </div> <div class="klaviyo_fine_print"></div> <div class="klaviyo_form_actions"> <button type="submit" class="klaviyo_submit_button"> <span>CLICK HERE TO GET DISCOUNT </span> </button> </div> <div class="klaviyo_below_submit"></div> <p class="klaviyo_subheader">We will collect, use and protect your data in accordance with our Privacy Policy</p> </form> </div> </div> <script type="text/javascript"> KlaviyoSubscribe.attachToForms('#email_signup', { hide_form_on_success: true, success_url: "https://www.example.com/thank-you" }); </script> <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<button class="btn cta self-fontsize-adj" data-ori-fontsize="20px" style="font-weight:700;font-size:20px;color:#ffffff!important;background-color:#ff6900!important;" data-live-text-setting="section.template--15031298687163__16306973536031a4e3.block.16306973529281cceb-0.banner_cta" onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true, ignore_cookie: true, success_message: false});">CLICK HERE NOW TO CLAIM THIS OFFER!<br><class cta self-fontsize-adj data-ori-fontsize="18px" style="font-weight:400;font-size:18px;color:#ffffff!important">Save Over 40% OFF Today</class></button>
Thanks for being a member of our community.
Hi @Dov thank you for your help, that still does not work, going to look at a developer look into it for me, once again thank you for your input :-)