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).
My Problem : I want to load a success message on same page as form without page refresh or redirect, but it keeps redirecting to default CM thank you page.
My Form:
<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>
<input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>
<input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required />
</p><br/>
<p>
<label for="fieldeihjlu">How did you hear of us?</label><br />
<select id="fieldeihjlu" name="cm-fo-eihjlu">
<option value="1985454">Word of Mouth</option>
<option value="1985450">Social Media</option>
<option value="1985451">Press</option>
<option value="1985452">Web Search</option>
<option value="1985453">Sales and Marketing Activities</option>
</select>
</p>
<p>
<input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>
Success message (same page as form):
<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>
Then as per this LINK i added the following 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);
*On page load i don't get any Console errors.
*On Submit i get error : Refused to execute script from https://www.createsend.com/t/subscribeerror?description=..... because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled ,
but then it still executes to the default CM thank you page.
