Signup Form that adds customer to MailChimp, redirects to checkout, and fills in form data

Question

Signup Form that adds customer to MailChimp, redirects to checkout, and fills in form data

Neal Jones

2020年12月16日 01:00

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
    labelFirst Name/label
    input type=text name=FNAME placeholder=First Name
    required=
/p
p
    labelLast Name/label
    input type=text name=LNAME placeholder=Last Name
    required=
/p
p
    labelPhone Number/label
    input type=tel name=PHONE placeholder=Phone required=
/p
p
    labelEmail 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?

Topic woocommerce-offtopic plugin-mailchimp forms Wordpress

Category Web

Neal Jones · Accepted Answer · 2020年12月16日 00:59

I got help with this, the fix involved two functions in functions.php and one plugin.

The functions:

// Add to Cart for optin Form

add_action( 'template_redirect', 'website_add_to_cart_on_custom_page');
 
function website_add_to_cart_on_custom_page(){
 
    if( is_page( 'homepagee' ) ) { // is a page slug
 
        WC()->cart->add_to_cart( 18074 ); // add to cart product with ID
 
    }
 
}


// Autofill checkout fields from URL
 
add_filter( 'woocommerce_checkout_fields' , 'website_prefill_checkout_fields');
  
function website_prefill_checkout_fields ( $checkout_fields ) {
  
    /**
     * Query string fields to populate in checkout,
     *
     * Ex.
     * 'fname' => is query parameter name,
     * 'billing_first_name' => matching field of checkout 
     *
     * You can add other fields in the same way
     */
    $query_fields = array(
         
        'fname' => 'billing_first_name',
        'lname' => 'billing_last_name',
        'email' => 'billing_email',
        'phone' => 'billing_phone',
    );
 
    // We will loop the above array to check if the field exists in URL or not.
    // If it exists we will add it to the checkout field's default value
 
    foreach ( $query_fields as $field_slug => $match_field ) {
         
        // Check if it is in URL or not, An not empty.
        if ( isset( $_GET[ $field_slug ] ) && ! empty( $_GET[ $field_slug ] ) ) {
 
            // Sanitize the value and store it in a variable.
            $field_value = sanitize_text_field( $_GET[ $field_slug ] );
 
            // Check if match field exists in checkout form or not.
            if( isset( $checkout_fields['billing'][ $match_field ] ) ){
 
                // Assign the pre-fill value to checkout field
                $checkout_fields['billing'][ $match_field ]['default'] = $field_value;
            }
        }       
    }
 
 
    // Return the fields
    return $checkout_fields;
}

add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );

The plugin we used was https://wordpress.org/plugins/mailchimp-for-wp/ and under the Form > Form Behaviour in this section we selected 'Yes' for the "Hide form after a successful sign-up?" and then added a url in the "Redirect to URL after successful sign-ups" field.

In that field, we followed the following format:

https://domain.com/checkout/?fname={data key="FNAME"}&lname={data key="LNAME"}&email={data key="EMAIL"}&phone={data key="PHONE"}

Hopefully this helps someone down the road.

Signup Form that adds customer to MailChimp, redirects to checkout, and fills in form data

About