Shopify themes, liquid, logos, and UX
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!
This is the exact issue, I'm facing. The form was working fine just 3 days ago.
Any solutions to this problem?
I'm experiencing this issue as well.
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.
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.
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>
I'm facing same issue
Ajax contact form giving 429 too many requests error
Any solution??
Hello
I got the below status code if I submit the post method for contact form.
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 } });
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!
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();
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.
Disable Captcha and the too many request error will go away
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024