MailChimp Sign Up Form - Update Existing Subscribers

Question

I would like to be able to modify my sign up form code to update the groups when a user who is already subscribed fills out the form again.

I cannot get this code to update the subscriber details. Any insight would be great.

Link here: http://www.welcomeearth.tv/biet-simkin-the-art-of-being-meditation-course/#free-meditation

JS:

    <script type="text/javascript">
    jQuery(document).ready(function($){
        ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));
        // Turn the given MailChimp form into an ajax version of it.
        // If resultElement is given, the subscribe result is set as html to
        // that element.
        function ajaxMailChimpForm($form, $resultElement){
            // Hijack the submission. We'll submit the form manually.
            $form.submit(function(e) {
                e.preventDefault();
                if (!isValidEmail($form)) {
                    var error =  "A valid email address must be provided.";
                    $resultElement.html(error);
                    $resultElement.css("color", "red");
                } else {
                    $resultElement.css("color", "red");
                    $resultElement.html("<!--Subscribing...-->");
                    submitSubscribeForm($form, $resultElement);
                }
            });
        }
        // Validate the email address in the form
        function isValidEmail($form) {
            // If email is empty, show error message.
            // contains just one @
            var email = $form.find("input[type='email']").val();
            if (!email || !email.length) {
                return false;
            } else if (email.indexOf("@") == -1) {
                return false;
            }
            return true;
        }
        // Submit the form with an ajax/jsonp request.
        // Based on http://stackoverflow.com/a/15120409/215821
        function submitSubscribeForm($form, $resultElement) {
            $.ajax({
                type: "GET",
                url: $form.attr("action"),
                data: $form.serialize(),
                cache: false,
                dataType: "jsonp",
                jsonp: "c", // trigger MailChimp to return a JSONP response
                contentType: "application/json; charset=utf-8",
                error: function(error){
                    // According to jquery docs, this is never called for cross-domain JSONP requests
                },
                success: function(data){
                    var audioUrl = '/audio/hari-intro-free.mp3';
                    var audioPlayer = '<audio controls autoplay="autoplay"><source src="'+ audioUrl +'" type="audio/mpeg"></audio>';
                    if (data.result != "success") {
                        var message = data.msg || "Sorry. Unable to subscribe. Please try again later.";
                        $resultElement.css("color", "red");
                        if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
                            message = "You're already subscribed.</br>Thank you.";
                            message += audioPlayer;
                            $resultElement.css("color", "red");
                        }
                        $resultElement.html(message);
                    } else {
                        $resultElement.css("color", "red");
                        $resultElement.html("Thank You" + audioPlayer);
                    }
                }
            });
        }
    });
</script>

HTML:

    <form id="subscribe-form" action="http://welcomeearth.us11.list-manage.com/subscribe/post-json?u=66f9b7be393392b250e5c1a4d&amp;id=6bfccd1b51" method="put">

    <div id="form">
    <div><input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name"></div>
<div><input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address"></div>
<div class="mc-field-group input-group">
    <strong>Gumroad Signups </strong>
    <ul><li><input type="radio" value="131072" name="group[13893]" id="mce-group[13893]-13893-5" checked><label for="mce-group[13893]-13893-5">Biet Simikin Free Mp3 Sign Up</label></li>
</ul>
</div>
<div><input type="submit" value="FREE MEDITATION" name="subscribe"></div>
</div>
<div id="subscribe-result"></div>
</form>

score 1 · Answer 1 · answered Sep 13 '19 at 19:18

Mailchimp 'Embedded Forms' do not allow to 'update existing subscribers' unfortunately. Not even if you use AJAX to submit the form.

That means there's no way to simply modify sign-up form HTML code and it's accompanying JavaScript AJAX code to achieve what you want.

You would need to use MailChimp API for updating existing subscribers.

The idea is that your send your form data not to MailChimp directly but to your own endpoint that uses MailChimp API to subscribe or update automatically.

If API call had an error the response will contain information about what went wrong.

If API call was successful you'll get full data about the subscriber as a response.

Apart from Name and Email address you can also update subscribers 'Interests' using the API.

Here's the PHP wrapper for MailChimp API that makes making API calls easier: https://github.com/drewm/mailchimp-api/tree/api-v3/src

Here are some step-by-step instructions on how to do that: https://medium.com/@luclemo/using-jquery-and-the-mailchimp-api-to-get-around-the-already-subscribed-error-bab3f593a1ce

I've successfully used this method to create forms that allow to update existing subscribers.

MailChimp Sign Up Form - Update Existing Subscribers

1 Answers1