Why is the Ajax contact form on Shopify showing a "Too Many Requests" error?

Cat6
Tourist
10 0 4

Hi everyone, I hope somebody can help me with the issue in ajax contact form that I'm having.

I started implementing contct form with ajax several weeks ago and at first everything worked as expected. Here's the code I was using:

<script type="text/javascript">
$(function() {
  
  $('.popup-container > form').submit(function(event) {
    var $form = $(this);
    jQuery.ajax({
      type: 'POST',
      async: true,
      url: '/contact',
      data: $form.serialize(),
      beforeSend: function() {
        $form.addClass('sending');
      },
      error: function(t) {
          console.log(t);
          $form.addClass('sent');
        $form.find('.errorMsg').fadeIn();
      },
      success: function(response) {
          $form.addClass('sent');
          $form.find('.successMsg').fadeIn();
      }
    }); 
    event.preventDefault();
  });
  
});
</script>

At first everything was working as expected and the form was sending the data, but after a few days it suddenly stopped because there appeared new transitional page (looking like admin page) with captcha form. 
At that point I started parsing success response code to see if it was that admin-looking page and submitting form 'normally' in case it was.


In the next couple of days ajax form stopped working once again, and a reason for that was another change in captcha step: suddenly form moved from admin-looking page to separate page on site (/challenge#contact_form). 
After that I started parsing html that I was getting in success response and showing that captcha form on the page with my contact form and submitting captcha with ajax. Everything was working as expected for the next week or so, but today (without any previous changes in code) it stopped. This time instead of html with captcha in success response I started getting the following error response:
{readyState: 4, responseText: "", status: 429, statusText: "Too Many Requests"}

And now I'm really not sure what's wrong. I definitely didn't send too many requests, in fact I submitted this form successfully with ajax only once today, and after that this error appeared. What am I doing wrong?

Thanks!

Replies 15 (15)

Joey18
Shopify Partner
1 0 0

This is the exact issue, I'm facing. The form was working fine just 3 days ago.

Conor_Organ
Shopify Partner
2 0 0

Any solutions to this problem?

Noah4
Shopify Partner
1 0 0

I'm experiencing this issue as well.

xmify
Shopify Partner
1 0 0

i'm developing a custom theme and i'm facing this issue. I also test some other themes (relate to ajax and contact form), all of them get this issue.

Amber_Hazel
New Member
8 0 0

Also facing this issue. Is there a way we can disable captcha or load it on same page instead of redirecting to challenge#contact_form and back?

My problem is that I have contact form in popup. Popup opens when customer clicks on a button. When customer is redirected back after solving captcha, popup isn't opened anymore. Customer can't see if message is submitted or what is the error, until she clicks Contact us button again.

George5
Tourist
17 0 1
          if(response.status == 429) {
            var challengeUrl = window.location.origin +'/challenge#'+ formId
            window.location = challengeUrl
          }

I tried the following, which works unless you haven't been to the captcha page before which is so strange.

However it's better if you just preventDefault if the ajax request is a success. This way the default behaviour will load the challenge page, and a success will fire it with ajax. So with your code it would be:

 

<script type="text/javascript">
$(function() {
  
  $('.popup-container > form').submit(function(event) {
    var $form = $(this);
    jQuery.ajax({
      type: 'POST',
      async: true,
      url: '/contact',
      data: $form.serialize(),
      beforeSend: function() {
        $form.addClass('sending');
      },
      error: function(t) {
          console.log(t);
          $form.addClass('sent');
        $form.find('.errorMsg').fadeIn();
      },
      success: function(response) {
          event.preventDefault();
          $form.addClass('sent');
          $form.find('.successMsg').fadeIn();
      }
    }); 
    
  });
  
});
</script>

 

me@georgebutter.com

Hiral
Visitor
1 0 0

I'm facing same issue

Ajax contact form giving 429 too many requests error
Any solution??

wedowebapps
Visitor
1 0 0

Hello

 

I got the below status code if I submit the post method for contact form.

Status Code: 429
Have any idea about this error?
 
Thanks.
Yunieski_DG
Tourist
5 0 1

Hi, I had the same problem, this happens when Shopify detects the customer form is being sent too many times from the same ip address. So what you can do is to redirect the user to the page to complete the Captcha. As it happens when you send the form in the regular behavior without ajax.

 

var $form = $('#yourformid')
    
jQuery.ajax({
        type: 'POST',
        async: true,
        url: '/contact',
        data: $form.serialize(),
        beforeSend: function() {
          $form.addClass('sending'); 
        },
        error: function(responseerror) {
            console.log(responseerror.error.status);
            if(responseerror.status == 429) {
              var challengeUrl = window.location.origin +'/challenge#yourformid'
              window.location = challengeUrl           
            }
            $form.addClass('error');
        },
        success: function(response) {
       //your success message
        }
      }); 
pkavanaghjr
New Member
5 0 0

I tried implementing the AJAX handler from Yunieski_DG, but when I redirect to the URL "/challenge#form_id" I'm getting a 404 page. 

Any ideas? Thank you!

Yunieski_DG
Tourist
5 0 1

Hi @pkavanaghjr could you make sure you are passing the proper form id?

pkavanaghjr
New Member
5 0 0

Hey @Yunieski_DG 

I ended up making it work by allowing the window to redirect by default instead of forcing the JS `window.location` change.

Here's what my function looks like:

/**
 * AJAX Submit Shopify Contact Forms 
 *
 * @param {array} contact_forms - array of form elements to add submit event listeners too
 */
function ajaxForms_contact(contact_forms){
    // Allow the passing of forms array, default to all .contact-form elements
    contact_forms = typeof contact_forms !== 'undefined' ? contact_forms : $('.contact-form').toArray();

    // Loop forms and add event listener
    $.each(contact_forms, function(i, form) {
        var formData = {
            form: $(this),
            formId: $(this).attr('id'),
            action: $(this).attr('action'),
            successMsg: "<p class='note note--success'>Thanks for contacting us. We'll get back to you as soon as possible.</p>"
        };
        
        // Add submit event listener
        $(formData.form).on('submit', function (e) {
            // Init AJAX
            $.ajax({
                type: 'POST',
                async: true,
                url: formData.action,
                data: formData.form.serialize(),
                beforeSend: function() {
                    formData.form.addClass('sending'); 
                },
                error: function(data) {
                    console.log('error: ',data);
                    formData.form.addClass('error');
                    
                    // 429 error - too many requests
                    if(data.status == 429) {
                        // Allow for default redirect to challenge form, do not force
                        console.log('Allow default window redirection for challenge');
                    }else {
                        e.preventDefault(); // if fields are empty, paste errors 
                        $(formData.form).before("<div class='errors'>" + response.statusText + "</div>");
                    }
                },
                success: function (data) {
                    e.preventDefault(); // prevent default if successful and challenge is not needed
                    console.log('success: ',data);
                    formData.form.addClass('success');
                    formData.form.fadeOut(300, function(){
                        formData.form.closest('div').append(formData.successMsg);
                    });
                }
            }); // close ajax
        }); // close 'submit' event
    }); // close loop
}

// Init function
ajaxForms_contact();

 

skillmatic
Shopify Partner
52 0 7

I'm building a secondary registration form on a custom page. How do I redirect back to my custom page after the challenge? It's redirecting back to /account/register instead. I'd like it to redirect back to my custom page after challenge.

Jofii
Visitor
2 0 0

@pkavanaghjr 

Can you give me a complete one? It doesn't work if I use it

arsalankhan
Visitor
2 0 1

Disable Captcha and the too many request error will go away

r7