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.

Hi,
need help pls, how to check if the email submitted is already on the campaign monitor list and get back a respond?
I am using the form to generate a coupon code ones the user provide the email BUT coupon must be generate ONLY if that email is unique on the campaign monitor list. Right now I am getting back all the time 200 even when the email is already on the list.
Thanks

Hi
Can any one please tel how to check email is already their in list , Currently form allows me to add same email id n number of times, it should say "Email is already exist use differnt one"

Thanks
Vinayak

A lot of cries to add the response 'Email address already exist' to the 400 status. I also think this should be a default instead of resorting to the API for this.

Yo,

In case someone wanted a vanilla javascript example....

<form id="subForm" action="https://myaccount.createsend.com/t/d/s/mkriuy/" method="post">
	<label for="fieldEmail">Email</label><br />
	<input id="fieldEmail" name="cm-mkriuy-mkriuy" type="email" required />
	<button type="submit">Subscribe</button>
	<div id="messageDiv"></div>
</form>

var callbackFnName = function(res) {
	document.getElementById('messageDiv').innerHTML = res.Message;
	console.log(res);
}

var targetForm = document.getElementById('subForm');
targetForm.addEventListener('submit', function(e) {
	e.preventDefault();
	var emailField = document.getElementById('fieldEmail');
	var keyValues = [];
	keyValues.add = function(k,v) {
		this.push([encodeURIComponent(k),encodeURIComponent(v)].join('='));
		return this;
	};
	var query = function(arr) {
		return '?' + arr.join('&');
	};
	keyValues.add('callback', 'callbackFnName').add(emailField.name, emailField.value);
	var url = this.action + query(keyValues);
	var r = new XMLHttpRequest();
	r.open(this.method, url, true);
	r.onreadystatechange = function() {
		if(r.readyState === 4) {
			var res = document.createElement('script');
			res.type = 'text/javascript', res.async = 1, res.innerHTML = r.responseText;
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(res,s);
		}
	}
	r.timeout = 3000;
	r.onerror = function() {console.log(this);}
	r.send();
}, false);

For anyone interested, you can't post data to the Campaign Monitor API using a custom sub domain with an SSL. For example, this would not work:
<form id="subForm" action="https://subdomain.domain.com/t/d/s/mkriuy/" method="post">
To make this work, use:
<form id="subForm" action="https://myaccount.createsend.com/t/d/s/mkriuy/" method="post">
Or this:
<form id="subForm" action="*.createsend.com/t/d/s/mkriuy/" method="post">
Hope this helps.

Hey,

When I try to generate a sign up form, I get the following code:

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="A61C50BEC994754B1D79C5819EC1255C90353F11B10B3CE4FF74762E36F3B9AADE7929ED766969AD206D8CAC4801738C7C14C8BE7D2BB89026D7629C3B405CC1">
    
    <p>
        <label for="fieldName">Name</label><br />
        <input id="fieldName" name="cm-name" type="text" />
    </p>
    <p>
        <label for="fieldEmail">Email</label><br />
        <input id="fieldEmail" class="js-cm-email-input" name="cm-ekuuhr-ekuuhr" type="email" required /> 
    </p>
    <p>
        <button class="js-cm-submit-button" type="submit">Subscribe</button> 
    </p>
</form>
    <script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

I removed the JS script from above and added the ajax code so now it looks like this

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="A61C50BEC994754B1D79C5819EC1255C90353F11B10B3CE4FF74762E36F3B9AADE7929ED766969AD206D8CAC4801738C7C14C8BE7D2BB89026D7629C3B405CC1">
    
    <p>
        <label for="fieldName">Name</label><br />
        <input id="fieldName" name="cm-name" type="text" />
    </p>
    <p>
        <label for="fieldEmail">Email</label><br />
        <input id="fieldEmail" class="js-cm-email-input" name="cm-ekuuhr-ekuuhr" type="email" required /> 
    </p>
    <p>
        <button class="js-cm-submit-button" type="submit">Subscribe</button> 
    </p>
</form>

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

But when I try to submit, I get the following error:

Refused to execute script from 'https://www.createsend.com/t/subscribeerror?description=?callback=jQuery16205281633389693063_1518739935858&cm-name=ozy&cm-ekuuhr-ekuuhr=ozy%40pxlagency.com&_=1518739942094' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Next I tried changing the action value to a string that resembles the example:

<form action="http://pxlagency.createsend.com/t/r/s/ekuuhr/" method="post" id="subForm" data-id="A61C50BEC994754B1D79C5819EC1255C90353F11B10B3CE4FF74762E36F3B9AADE7929ED766969AD206D8CAC4801738C7C14C8BE7D2BB89026D7629C3B405CC1">
    <p>
        <label for="fieldName">Name</label><br />
        <input id="fieldName" name="cm-name" type="text" />
    </p>
    <p>
        <label for="fieldEmail">Email</label><br />
        <input id="fieldEmail" class="js-cm-email-input" name="cm-ekuuhr-ekuuhr" type="email" required /> 
    </p>
    <p>
        <button class="js-cm-submit-button" type="submit">Subscribe</button> 
    </p>
</form>

When I hit submit I get a success response. But when I check my subscriber list, I don't see the update.

Anybody have any clue what's going on?

Thanks

I'm having the same issue as ozywuli, perhaps this code has to be updated to match the new "getsecuresubscribelink" step? Thank you!

I have just discovered this too. A bit desperate with Monday's go-live looming....

If anyone has any pointers, I'd really appreciate it.

Please please, if anyone can help, I'd really appreciate it also!

@laurenhitchon @Snapto @brisa-pedronetto

New version of Campaign Monitor subscribe code works differently. As you can see code provides a js file (copypastesubscribeformlogic.js) which is responsible for sending data.

What has changed?
Previously it was just one static request to CM endpoint to subscribe a user and it was quite easy to make subscription requested by ajax. Now, it needs two separate requests to subscribe a user. First request is being done by ajax and is provided by CM (js file copypastesubscribeformlogic.js handles this request). This is the data that is being sent to CM:

URL: https://createsend.com//t/getsecuresubscribelink
Method: POST
Header: Content-type: application/x-www-form-urlencoded
Data: [email protected]&data=data-id

[email protected] is an e-mail provided in the form
data-id is an attribute taken from form tag provided by Campain Monitor code

In the response CM script gets a link with token. This is example of the link:

https://www.createsend.com/t/securedsubscribe?token=5A6DD7A94B9E0BCD68E622CFD904F4A09C640018E5595BCACC38D4308AA3F1A3564E98DFDA7CDBD5

When this link is returned (by ajax), form action attribute is being changed.
Initially form action tag is set to:
https://www.createsend.com/t/subscribeerror?description=

Right after the page has received a link with token form action attribute is changed to:
https://www.createsend.com/t/securedsubscribe?token=5A6DD7A94B9E0BCD68E622CFD904F4A09C640018E5595BCACC38D4308AA3F1A3564E98DFDA7CDBD5

At this moment form is being sent directly to CM and user is subscribed. So, this is how I ajaxyfied this new version of CM code (be aware this code needs jquery to work - maybe someone would like to make it in Vanilla JS):

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: 'form',
    errorMessage: 'There was a problem submitting this form. Please try later.',
    successSelector: 'success',
  };

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

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

You can change your selector from form to anything that selects your form. For example: .container article form. You can also add an html element with success class and provide a info about successful submission, for example:

<div class="success">Your e-mail has been added to our list</div>

IMPORTANT:
Before you use this script get rid of original script provided by CM from emebed code.

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!