Skip to content

Instantly share code, notes, and snippets.

@jdennes
Last active March 7, 2024 04:40
Show Gist options
  • Star 92 You must be signed in to star a gist
  • Fork 18 You must be signed in to fork a gist
  • Save jdennes/1155479 to your computer and use it in GitHub Desktop.
Save jdennes/1155479 to your computer and use it in GitHub Desktop.
Subscribing to a Campaign Monitor list using AJAX
<!-- 1. Take your Campaign Monitor subscribe form as generated through the app: -->
<form action="http://jamesd.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. AJAX subscription to your list! -->
@mrmema
Copy link

mrmema commented May 12, 2017

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

@vinayamk
Copy link

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

@gentle-media
Copy link

gentle-media commented Jun 6, 2017

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.

@jnsprngs
Copy link

jnsprngs commented Jun 16, 2017

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);

@Factored-Dan
Copy link

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.

@ozywuli
Copy link

ozywuli commented Feb 16, 2018

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

@pnettto
Copy link

pnettto commented Feb 19, 2018

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

@Snapto
Copy link

Snapto commented Feb 28, 2018

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.

@laurenhitchon
Copy link

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

@dawidnawrot
Copy link

dawidnawrot commented Mar 19, 2018

@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=subscriber_email@example.com&data=data-id

subscriber_email@example.com 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.

@michelle-may
Copy link

michelle-may commented Mar 21, 2018

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.

@dawidnawrot
Copy link

@Macaroons glad to help :)

@coneilltmx
Copy link

coneilltmx commented Apr 11, 2018

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.

@blackbird74
Copy link

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 :)

@asgharabbas
Copy link

asgharabbas commented Apr 20, 2018

@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);

@asgharabbas
Copy link

<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");
}
}
}

@mcrider
Copy link

mcrider commented May 31, 2018

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.

@mcrider
Copy link

mcrider commented May 31, 2018

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.

@jamesmusgrave
Copy link

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

@smallpirate
Copy link

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?

@v3nt
Copy link

v3nt commented Aug 23, 2018

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

@v3nt
Copy link

v3nt commented Aug 23, 2018

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.

fullsizeoutput_21b3
fullsizeoutput_21b4

Preview of securedsubscribe?token...
fullsizeoutput_21b5

Any help much appreciated!

@adambloomer
Copy link

@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.

@monthly
Copy link

monthly commented Oct 4, 2018

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?

@arrenv
Copy link

arrenv commented Oct 4, 2018

@nathanngon
Copy link

Hi, do we have any update here?

@domstubbs
Copy link

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.

@dtbaker
Copy link

dtbaker commented Jan 16, 2019

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).

@jamesmusgrave
Copy link

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

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

@jacinyan
Copy link

jacinyan commented Mar 2, 2022

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment