Add Users to Mailchimp Interest Groups Based on Contact Form 7 Selection

Home » Coding » Add Users to Mailchimp Interest Groups Based on Contact Form 7 Selection
August 25, 2019 Coding, Java Script, Mailchimp, WordPress
Add Users to Mailchimp Interest Groups Based on Contact Form 7 Selection

If your site lets users choose a department or area of interest on a contact form, you can automatically assign them to the corresponding Mailchimp interest group at the same time. The key is mapping the visible select option labels to the hidden Mailchimp interest IDs using jQuery, and then passing the result to the MC4WP: Mailchimp for WordPress plugin via its hidden field convention.

Problem: A Contact Form 7 form includes a topic or interest selector, and each selection should add the subscriber to a matching Mailchimp audience interest group — but CF7 has no native integration with Mailchimp interest categories.

Solution: Use the wpcf7_mail_sent hook to read the submitted field value, look up the corresponding Mailchimp interest ID via the API, and send a PATCH request to /lists/{list_id}/members/{hash} to update the contact's interests.

Before writing any code, you need two IDs from Mailchimp:

— Category ID (used as the name attribute of the select): found under Audience → Manage contacts → Groups → Settings for that group category.

— Interest IDs (the option values): each individual group inside the category has its own ID. The easiest way to retrieve both is through the Mailchimp API playground at https://usX.api.mailchimp.com/playground/: navigate to Lists → [your list] → interest-categories → [category] → interests.

Step 1. Add a hidden field and a CF7 select tag to your form. The hidden field will receive the selected interest ID via JavaScript:

<!-- CF7 select tag (visible to the user) -->
[select* contact-topic "Sales Enquiries" "Product Information" "Partnerships" "Career Opportunities" "Other"]

<!-- Hidden field that MC4WP reads — mc4wp-INTERESTS[CATEGORY_ID][] -->
<input name="mc4wp-INTERESTS[34cbb1e321][]" type="hidden" value="" />

<!-- List ID field required by MC4WP -->
<input name="_mc4wp_lists[]" type="hidden" value="db58q3b12e" />

Step 2. Use jQuery to watch the select and write the correct interest ID into the hidden field before the form is submitted:

( function ( $ ) {
    var INTEREST_MAP = {
        'Sales Enquiries':     '1b9c2203aa',
        'Product Information': '29cf33340b',
        'Partnerships':        '39de449d5c',
        'Career Opportunities':'423655ba6d',
        'Other':               '6ca777b4ef',
    };

    $( 'select[name="contact-topic"]' ).on( 'change', function () {
        var interestId = INTEREST_MAP[ this.value ] || INTEREST_MAP['Other'];
        $( 'input[name="mc4wp-INTERESTS[34cbb1e321][]"]' ).val( interestId );
    } );
} )( jQuery );

When the form is submitted, MC4WP reads the mc4wp-INTERESTS hidden field and adds the subscriber to the matching interest group automatically.

NOTE: Mailchimp interest group IDs are tied to a specific audience. If you duplicate your audience or recreate the groups, all IDs change. Keep the INTEREST_MAP up to date whenever you restructure your Mailchimp audience.

Related posts