Ask your WordPress questions! Pay money and get answers fast! (more info)

Mailchimp form and javascript not working great

  • SOLVED

Hi

On this page http://fluencymc.com/english-practice-2 there is a form that points to 2 lists in my Mailchimp account linked to some javascript code in a page somewhere in my theme (I can't find it) that my developer (who has gone missing and can't contact) has put.

It seems like a lot of people fill in the form, but not many people receive the opt-in confirmation email. I have tried on several email addresses and none work for me.

Please could you analyse what the problem is and give me a solution so that this form works each time and people receive the opt-in confirmation email.

Thanks

Joss

Answers (2)

2015-09-19

dimadin answers:

I have replicated this, for some email addresses I received confirmations, for some didn't.

Also, I have found source of your problem. It is not with your website, it is with MailChimp.

Problem is that when you submit form for subscribing on your page, data are sent via AJAX request to MailChimp (page http://linguaid.us5.list-manage.com/subscribe/post etc). Then, your page doesn't wait for response and immediately redirects to "Thank you" page.

What happens is that MailChimp sometimes respond with 200 status header which means that user subscribed, but sometimes, for no apparent reason, don't respond and user is still redirected.

To fix this, you probably need to change file located in '/wp-content/themes/spacious/js/spacious-custom.js' so that it doesn't redirect before you receive successful response from MailChimp, but you also need to see from MailChimp what are possible responses and why it doesn't subscribe some users, either in their documentation or from their support.


Joss Frimond comments:

Hi dimadin,

I'm very impressed! It seems like you've found the problem.

Can you fix the js page?

Joss


dimadin comments:

Well, I can try but I can't promise anything right now because I have limited space for customization in this case. I will respond here did I succeed and if I did, how.


Joss Frimond comments:

Thank you! The sooner the better.

Do you need the wp admin codes?


dimadin comments:

OK, I have made something. You need to edit file '/wp-content/themes/spacious/js/spacious-custom.js'. Don't forget to make a backup copy of that file before editing. Also note that this file might cached in your browser; use private mode for testing and you need to do more for invalidating cache for others.

New file should look like this:


jQuery(document).ready(function($){
$("#scroll-up").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#scroll-up').fadeIn();
} else {
$('#scroll-up').fadeOut();
}
});
$('a#scroll-up').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
$('#menu-item-38').addClass("already-registered-handle");

if($("#subForm").length) {
$("#secretToken").attr('name', 'b_4ec284818502748a0acda22b7_96ac1bc476'); //student
$('#subForm').attr('action', '//linguaid.us5.list-manage.com/subscribe/post?u=4ec284818502748a0acda22b7&id=96ac1bc476');

var loc = '/3-steps-learner-video/';

$('.forLearner').click(function() {
$('#learner').prop('checked', true);
$('#teacher').prop('checked', false);
$("#secretToken").attr('name', 'b_4ec284818502748a0acda22b7_96ac1bc476'); //student
$('#subForm').attr('action', '//linguaid.us5.list-manage.com/subscribe/post?u=4ec284818502748a0acda22b7&id=96ac1bc476');
loc = '/3-steps-learner-video/';
});

$('.forTeacher').click(function() {
$('#learner').prop('checked', false);
$('#teacher').prop('checked', true);
$("#secretToken").attr('name', 'b_4ec284818502748a0acda22b7_f4610bae09'); //teacher
$('#subForm').attr('action', '//linguaid.us5.list-manage.com/subscribe/post?u=4ec284818502748a0acda22b7&id=f4610bae09');
loc = '/teacher-video-2';
});

$('#subForm').submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize()
});

$('.register-input').hide();
$('.register-button').attr('type', '');
$('.register-button').attr('value', 'Thank you! Please look in your email!');

window.location = loc;

return false;
});

}


if($("#subForm-2").length) {
$("#secretToken").attr('name', 'b_4ec284818502748a0acda22b7_21c169dd2d'); //student
$('#subForm-2').attr('action', 'https://linguaid.us5.list-manage.com/subscribe/post-json?u=4ec284818502748a0acda22b7&id=21c169dd2d');

var loc = "/thank-you-starter-course";

$('.forLearner').click(function() {
$('#learner').prop('checked', true);
$('#teacher').prop('checked', false);
$("#secretToken").attr('name', 'b_4ec284818502748a0acda22b7_21c169dd2d'); //student
$('#subForm-2').attr('action', 'https://linguaid.us5.list-manage.com/subscribe/post-json?u=4ec284818502748a0acda22b7&id=21c169dd2d');
});

$('.forTeacher').click(function() {
$('#learner').prop('checked', false);
$('#teacher').prop('checked', true);
$("#secretToken").attr('name', 'b_4ec284818502748a0acda22b7_dbb48a707d'); //teacher
$('#subForm-2').attr('action', 'https://linguaid.us5.list-manage.com/subscribe/post-json?u=4ec284818502748a0acda22b7&id=dbb48a707d');
});

$('#subForm-2').submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
cache: false,
dataType: "jsonp",
jsonp: "c",
contentType: "application/json; charset=utf-8",
success: function(data, text, xhr){
$('.register-input').hide();
$('.register-button').attr('type', '');
$('.register-button').attr('value', 'Thank you! Please look in your email!');

window.location = loc;
},
error: function (xhr, text, error) {
console.log('error')
console.log(JSON.stringify(xhr.msg));
}
});

return false;
});
}

});


As you can see, I have only changed second part which is for form on page you shown; I have not changed first part which is for form that is not used on that page.

What I did? I have changed your MailChimp URLs to always use HTTPS and to use JSON.

Then, I have changed request to MailChimp to use JSON and moved redirection to use it only when your submission to MailChimp is successful.

I have tried this form and I have always received success and received emails asking for mailing list confirmation. It should be noted that browser already doesn't allow to submit empty fields or one that are not properly formatted. That doesn't mean that this is solved, maybe I was just lucky and you need to try with more email addresses.

If this works, I think that prize should be valued a little more, but I respect rules if this is only that is available.


Joss Frimond comments:

thank you dimadin,
I have just found your reply. I will check it out and get back to you!

Joss


Joss Frimond comments:

That worked brilliantly dimadin, and yes it does deserve and will get more. I will vote and confirm.

PS I have another problem about a plugin (see Live Beep question). Can you help me there please? It is urgent.


Joss Frimond comments:

sorry i didn't mean vote. It has been a long time on this platform. How do I assign you the prize? The link to the tutorial is broken. Thanks


dimadin comments:

Hey Joss

Glad it worked.

This tutorial works (you might look for point 8):
http://wpquestions.com/page/static/name/About

Also see this from archive:
https://web.archive.org/web/20120310194913/http://codewi.se/2011/04/22/voting-assign-prize-money

I will look at your other question and see what I can do.

2015-09-19

PHPSmashCode answers:

Hello,

I just tried it and received confirmation email. Don't think there is an issue.

Regards,
Hari


Joss Frimond comments:

Thanks Hari but like I said sometimes it doesn't work. Perhaps if you try different navigators and different email addresses?