Subscribing to a Campaign Monitor list using AJAX

ajaxsubscribe.html

<!-- 1. Take your Campaign Monitor subscribe form as generated from within your account: -->

<form action="http://myaccount.createsend.com/t/r/s/aljhk/" method="post" id="subForm">
    <div>
        <label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br />
        <label for="aljhk-aljhk">Email:</label><br /><input type="text" name="cm-aljhk-aljhk" id="aljhk-aljhk" /><br />
        <input type="submit" value="Subscribe" />
    </div>
</form>

<!-- 2. Add some JavaScript -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript">
    $(function () {
        $('#subForm').submit(function (e) {
            e.preventDefault();
            $.getJSON(
            this.action + "?callback=?",
            $(this).serialize(),
            function (data) {
                if (data.Status === 400) {
                    alert("Error: " + data.Message);
                } else { // 200
                    alert("Success: " + data.Message);
                }
            });
        });
    });
</script>

<!-- 3. You have an AJAX subscribe form! -->

LICENSE

The MIT License (MIT)

Copyright (c) James Dennes

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Came searching for a way to ajaxify the new CM form and @dawidnawrot has truly saved the day. Thanks! The above code definitely works for the new forms.

@Macaroons glad to help :)

Followed all your instructions but cant seem to get my code to work. Any ideas? The code is as follows

Form:

<form id="Subform" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXXXXXXXXXXXXXXXXXXXX">
<label for="fieldEmail">Email</label><br />
<input id="fieldEmail" class="" name="cm-zjikdu-zjikdu" type="email" required /> 
<button class="btn btn-primary btn-block" type="submit">Subscribe</button> 
</form>

Javascript:

         <script type="text/javascript" src="js/jquery.min.js"></script> 
              <script type="text/javascript">
              var campaign = (function (c, d, $) {

               var body,
                   form,
                   form_id,
                   config,
                   successMessage;

               c.init = function () {

                   body = $('body');
                   form = body.find('#' + config.formSelector);
                   form_id = form.attr('data-id');
                   successMessage = $('#' + config.successSelector);
                   successMessage.hide();

                   // On form submit.
                   form.submit(function (evt) {

                       // Disable default form submit.
                       evt.preventDefault();

                       // Get e-mail value.
                       email = $('input[type=email]', form).val();

                       // Build request data for tokenRequest.
                       request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;

                       // Prepare tokenRequest.
                       tokenRequest = new XMLHttpRequest();
                       tokenRequest.open('POST', 'https://createsend.com//t/getsecuresubscribelink', true);
                       tokenRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                       tokenRequest.send(request_data);

                       // Ready state.
                       tokenRequest.onreadystatechange = function () {
                           if (this.readyState === 4) {
                               if (this.status === 200) {
                                   // Having token and new submit url we can create new request to subscribe a user.
                                   subscribeRequest = new XMLHttpRequest();
                                   subscribeRequest.open('POST', this.responseText, true);
                                   subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                   subscribeRequest.send(form.serialize());
                                   // On ready state call response function.
                                   subscribeRequest.onreadystatechange = function () {
                                       c.response(subscribeRequest);
                                   }
                               } else {
                                   c.response(tokenRequest);
                               }
                           }
                       }
                   });
               };

               // Handle ajax response.
               c.response = function (request) {
                   if (request.readyState === 4) {
                       if (request.status === 200) {
                           successMessage.show('slow');
                       } else {
                           form.prepend('<p class="error">' + config.errorMessage + '</p>');
                       }
                   }
               };

               // Private
               config = {
                   formSelector: 'Subform',
                   errorMessage: 'There was a problem submitting this form. Please try later.',
                   successSelector: 'success',
               };

               return c;

           }(campaign || {}, {}, jQuery));

           (function () {
               campaign.init();
           })(jQuery);

       </script>

Upon clicking the forms submit button it doesn't go anywhere. With the CM included javascript it jumps to a CM confirmation page.

For some reason the form was still being submitted the 'default' way and after subscribing I was taken to the campaign monitor confirmation page, instead of just staying on the page with the form.

Changing the following line:

form.submit(function (evt) {

to

$(document).on('click', '.js-cm-submit-button', function(evt){

worked for me (.js-cm-submit-button is the class of the submit button in the form).

Probably a better way to do this but I'm pressed for time :)

@dawidnawrot how we call this javascript function on form submit ajax...
var campaign = (function (c, d, $) {

           var body,
               form,
               form_id,
               config,
               successMessage;

           c.init = function () {

               body = $('body');
               form = body.find('#' + config.formSelector);
               form_id = form.attr('data-id');
               successMessage = $('#' + config.successSelector);
               successMessage.hide();

               // On form submit.
               form.submit(function (evt) {

                   // Disable default form submit.
                   evt.preventDefault();

                   // Get e-mail value.
                   email = $('input[type=email]', form).val();

                   // Build request data for tokenRequest.
                   request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;

                   // Prepare tokenRequest.
                   tokenRequest = new XMLHttpRequest();
                   tokenRequest.open('POST', 'https://createsend.com//t/getsecuresubscribelink', true);
                   tokenRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                   tokenRequest.send(request_data);

                   // Ready state.
                   tokenRequest.onreadystatechange = function () {
                       if (this.readyState === 4) {
                           if (this.status === 200) {
                               // Having token and new submit url we can create new request to subscribe a user.
                               subscribeRequest = new XMLHttpRequest();
                               subscribeRequest.open('POST', this.responseText, true);
                               subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                               subscribeRequest.send(form.serialize());
                               // On ready state call response function.
                               subscribeRequest.onreadystatechange = function () {
                                   c.response(subscribeRequest);
                               }
                           } else {
                               c.response(tokenRequest);
                           }
                       }
                   }
               });
           };

           // Handle ajax response.
           c.response = function (request) {
               if (request.readyState === 4) {
                   if (request.status === 200) {
                       successMessage.show('slow');
                   } else {
                       form.prepend('<p class="error">' + config.errorMessage + '</p>');
                   }
               }
           };

           // Private
           config = {
               formSelector: 'Subform',
               errorMessage: 'There was a problem submitting this form. Please try later.',
               successSelector: 'success',
           };

           return c;

       }(campaign || {}, {}, jQuery));

       (function () {
           campaign.init();
       })(jQuery);

<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

download the code from this url "https://js.createsend1.com/javascript/copypastesubscribeformlogic.js" and create your own js file and paste it.
Then, do these changes in the c.onreadystatechange then it will works like a charm.....
c.onreadystatechange=function(){
if (this.readyState === 4) {
if (this.status === 200) {
// Having token and new submit url we can create new request to subscribe a user.
subscribeRequest = new XMLHttpRequest();
subscribeRequest.open('POST', this.responseText, true);
subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
subscribeRequest.send($("#subForm").serialize());
// On ready state call response function.
subscribeRequest.onreadystatechange = function() {
alert("success");
}
} else {
alert("error");
}
}
}

I had to fix some bugs and changed it to be able to handle multiple instances on the same page, and switched it up to just toggle classes rather than hiding/showing stuff (I've omitted the CSS for hiding the error/success messages by default)

<form id="subForm" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="<from_CM>">
    <p class="message maillist-success">Thank you for subscribing. Please check your inbox for a confirmation email.</p>
    <p class="message maillist-error">An error has occurred; Please check your email and try again.</p>
    <input class="input-email" type="email" name="<from_CM>" id="fieldEmail" placeholder="email" />
    <input class="input-submit" type="submit" value="Submit" id="submit" />
  </form>

var campaign = (function (c, d, $) {

  var body,
      form,
      form_id,
      config,
      email,
      request_data,
      tokenRequest,
      subscribeRequest;

  c.init = function () {

    body = $('body');
    form = body.find(config.formSelector);
    form_id = form.attr('data-id');

    // The name of the email input from the form provided by CM, i realize while posting this should've just been grabbing it directly from the input :P
    email_name="<from cm>"

    // On form submit.
    form.submit(function (evt) {
      var currentForm = this;
      $(currentForm).addClass('form-loading');

      // Disable default form submit.
      evt.preventDefault();

      // Get e-mail value.
      email = $(this).find('input[type=email]').val();

      // Build request data for tokenRequest.
      request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;

      // Prepare tokenRequest.
      tokenRequest = new XMLHttpRequest();
      tokenRequest.open('POST', 'https://createsend.com//t/getsecuresubscribelink', true);
      tokenRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      tokenRequest.send(request_data);

      // Ready state.
      tokenRequest.onreadystatechange = function() {
        if (this.readyState === 4) {
          if (this.status === 200) {
            // Having token and new submit url we can create new request to subscribe a user.
            subscribeRequest = new XMLHttpRequest();
            subscribeRequest.open('POST', this.responseText, true);
            subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            subscribeRequest.send(email_name+"="+email);
            // On ready state call response function.
            subscribeRequest.onreadystatechange = function() {
              c.response(subscribeRequest, currentForm);
            }
          } else {
            c.response(tokenRequest, currentForm);
          }
        }
      }
    });
  };

  // Handle ajax response.
  c.response = function(request, currentForm) {
    if (request.readyState === 4) {
      if (request.status === 200) {
        $(currentForm).attr('class', 'form-success');
      } else {
        $(currentForm).attr('class', 'form-error');
      }
    }
  };

  // Private
  config = {
    formSelector: '.newsletter form',
  };

  return c;

}(campaign || {}, {}, jQuery));

Then call campaign.init() whenever jquery is ready.

As an aside, why do CM and mailchimp and the like make it so hard to submit a signup form with javascript? They have great APIs for everything else, do they just not want people messing around with this? So hacky.

Another version of this for anyone using AngularJS
https://gist.github.com/jamesmusgrave/895e62b84308df91a38fa023cbf02a2a

I'm still struggling to get this all to work. Is there a chance that someone could pull all the code together in one place, with some helpful comments throughout?

This looks promising! Am i right in thinking this is only for submitting one field and email address? And if you had 10 custom fields would you need this

// Build request data for tokenRequest.
request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;

for every field?

thanks in advance. D

trying to get event he most basic form working seems tricky. All seems to work OK but email not being added to list.

i've added some console logs

      // Ready state.
      tokenRequest.onreadystatechange = function() {
        console.log(this.readyState);
        console.log(this.status);

which spits out

forms-signup-cm-captcha.js:48 2
forms-signup-cm-captcha.js:49 200
forms-signup-cm-captcha.js:48 3
forms-signup-cm-captcha.js:49 200
forms-signup-cm-captcha.js:48 4
forms-signup-cm-captcha.js:49 200

And the form class form-success is added to my form so something is going on and it thinks its working

Screenshots of network data.

Preview of securedsubscribe?token...

Any help much appreciated!

@v3nt I'm having the same issue. I've submitted a support request to Campaign Monitor to see if there's a way to skirt round the reCaptcha however I think it shows it only when it thinks a spambot is submitting to the form. Hopefully they will respond to me soon and I can let you know the outcome.

Have they changed something here? I get the above when testing my forms now also. Most every sign up test needs the recaptcha. How are they deciding what does and doesn't? And how should we display this captcha if so?

@jamesmusgrave Thanks, used yours for an Angular 5/6 version
https://gist.github.com/arrenv/fd99e1b0a8ea323152746d915f11d1f4

Hi, do we have any update here?

I implemented a JS signup form using the /getsecuresubscribelink approach yesterday and sure enough it worked initially, but subsequent requests all returned a web page with a reCAPTCHA step. For anyone reading this and considering whether it’s worth at least trying this approach first, don’t bother, save yourself the time.

Having emailed CM it appears that captchas are likely to show up whenever multiple signups are received from the same IP (so as devs in testing we’re most likely to trigger it) and there is no way to switch this off at the account level. Since there is no clean way of incorporating these captchas into a JS signup workflow and you can never guarantee that captchas won’t be enabled for a given request you can’t use this workflow and expect it to be reliable.

The only clean solution is to build your own server-side component using the CM API, then to have your frontend app POST to that, rather than directly to CM.

WARNING WARNING! I just got bitten by the getsecuresubscribelink ajax hack.

Yes as reported by @domstubbs above, the form submission will ask the user to complete a recaptcha. This does not work in ajax request mode. You have to direct the user to that page in a normal form submit. Use their included library otherwise you will find people cannot subscribe (even though it looks like the ajax request is working).

Updated version using Vue
https://gist.github.com/jamesmusgrave/4b860422c4cb34cf9d38c12f89d8401c

As mentioned this doesn't work if the recaptcha is triggered

@Macaroons glad to help :)

Hi @dawidnawrot , it tried you script and it did work initially ~~~~~!! But also like what some of the comments above say, campaign monitor started to ask for non-robot confirmation after a several times. So I was wondering if you have the same issue but also a solution to that. Would be highly appreciated!