Signup Form that adds customer to MailChimp, redirects to checkout, and fills in form data
You can see what I am trying to do on this test page – the top button labelled "MAILCHIMP + CHECKOUT" is what I’m working on.
I am trying to accomplish 3 things (at the moment 2 & 3 are working on my test page):
- Send form data to MailChimp
- Redirect to checkout
- Auto-populate the checkout fields with the form data
I can use a plugin and make a form that sends data to MailChimp that works fine, but when I add code to do 2 & 3 the MailChimp plugin fails. The plugin I’m using is MailChimp for WordPress and the form I made with it is structured like this:
<p>
<label>First Name</label>
<input type="text" name="FNAME" placeholder="First Name"
required="">
</p>
<p>
<label>Last Name</label>
<input type="text" name="LNAME" placeholder="Last Name"
required="">
</p>
<p>
<label>Phone Number</label>
<input type="tel" name="PHONE" placeholder="Phone" required="">
</p>
<p>
<label>Email address:
<input type="email" name="EMAIL" placeholder="Email" required />
</label>
</p>
<p>
<input type="submit" value="Give me 2 Weeks FREE" onclick=""/>
</p>
The code I’m using to accomplish 2 & 3 is here:
<script>
var regForm1 = jQuery('#mc4wp-form-1'),
regBtn1 = jQuery('#mc4wp-form-1 input[type=submit]');
regBtn1.on('click touch', function(e1) {
e1.preventDefault();
billing_first_name = regForm1.find('.mc4wp-form-fields > p:nth-child(1) > input:nth-child(2)').val()
billing_last_name = regForm1.find('.mc4wp-form-fields > p:nth-child(2) > input:nth-child(2)').val()
billing_phone = regForm1.find('.mc4wp-form-fields > p:nth-child(3) > input:nth-child(2)').val()
billing_email = regForm1.find('.mc4wp-form-fields > p:nth-child(4) > label:nth-child(1) > input:nth-child(1)').val()
// Add Cookies
if (billing_first_name && billing_last_name && billing_phone && billing_email) {
alert(billing_first_name + " - " + billing_last_name + " - " + billing_phone + " - " + billing_email);
Cookies.set("billing_first_name", billing_first_name, {
path: '/',
expiration: 30
})
Cookies.set("billing_last_name", billing_last_name, {
path: '/',
expiration: 30
})
Cookies.set("billing_phone", billing_phone, {
path: '/',
expiration: 30
})
Cookies.set("billing_email", billing_email, {
path: '/',
expiration: 30
})
var url = `?add-to-cart=18074`;
alert(url);
window.location = url;
} else {
alert("Please fill in all fields");
}
});
// Fill in the cookies and immediately remove
(function($) {
$(document).ready(function() {
const billing_first_name = Cookies.get("billing_first_name");
const billing_last_name = Cookies.get("billing_last_name");
const billing_email = Cookies.get("billing_email");
const billing_phone = Cookies.get("billing_phone");
if (billing_first_name) {
$("#billing_first_name").val(billing_first_name)
Cookies.remove("billing_first_name")
}
if (billing_last_name) {
$("#billing_last_name").val(billing_last_name)
Cookies.remove("billing_last_name")
}
if (billing_phone) {
$("#billing_phone").val(billing_phone)
Cookies.remove("billing_phone")
}
if (billing_email) {
$("#billing_email").val(billing_email)
Cookies.remove("billing_email")
}
})
})(jQuery)
</script>
Any ideas on how I could make this work? Do I need to make something wait for something or do I need an entirely new approach?
Leave an answer
You must login or register to add a new answer .