Solved

Legacy form example with URL redirect after clicking form submit button

  • 5 September 2021
  • 8 replies
  • 203 views

Badge

Hi,

I see on theis page it shows you how to add a redirect URL to a Legacy form once the submit button is clicked.

https://help.klaviyo.com/hc/en-us/articles/115005249588-How-to-Add-and-Customize-a-Legacy-Embedded-Signup-Form#redirect-subscribers-to-a-new-page-after-submit4

 

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?

 

Thank you for any help, really appreciate it.

 

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 onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true, ignore_cookie: true, success_message: false});">Click me</button>

 

icon

Best answer by Dov 10 September 2021, 17:22

View original

8 replies

Userlevel 6
Badge +5

Hi @Webgatorz,

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?

Badge

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>

Userlevel 6
Badge +5

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.

 

Badge

Hi, @Dov  Sorry to sound stupid, would that be k_id_modal   from this part of the form id="k_id_modal" so it would be KlaviyoSubscribe.attachToForms('k_id_modal'

I tried it with the #k_id_modal but I always get this as the next page https://manage.kmail-lists.com/subscriptions/subscribe

Thank you for your help

Userlevel 6
Badge +5

Hi @Webgatorz,

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.

 

Badge

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.

https://help.klaviyo.com/hc/en-us/articles/115005077007-How-to-Trigger-a-Legacy-Popup-When-a-Button-is-Clicked

But the form I used is nothing like the one you showed above, and when I change #email_signup to k_id_modal in the below script, nothing, it just goes to https://manage.kmail-lists.com/subscriptions/subscribe

 

<script type="text/javascript"> KlaviyoSubscribe.attachToForms('#email_signup', {
   hide_form_on_success: true,
   success_url: "https://www.example.com/thank-you"
 });

 

Thank you for your help @Dov really appreciate it.

Userlevel 6
Badge +5

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.

Badge

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 :-)

All the best, take care

Reply