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

1. Send form data to MailChimp
2. Redirect to checkout
3. 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?