Campaign Monitor表单保持重定向
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Campaign Monitor表单保持重定向相关的知识,希望对你有一定的参考价值。
新版Campaign Monitor订阅代码的工作方式不同。如您所见,代码提供了一个负责发送数据的js文件(copypastesubscribeformlogic.js)。
发生了什么变化?
以前,只有一个静态请求到CM端点订阅用户,并且很容易通过ajax请求订阅。现在,它需要两个单独的请求来订阅用户。第一个请求由ajax完成,由CM提供(js文件copypastesubscribeformlogic.js处理此请求)。
我的问题:我想在没有页面刷新或重定向的情况下在同一页面上加载成功消息,但它会一直重定向到默认的CM谢谢页面。
我的表格:
<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>
成功消息(与表单相同的页面):
<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>
然后根据这个LINK我添加了以下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);
*在页面加载时,我没有得到任何Console
错误。
*在提交时我收到错误: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
,
但它仍然执行到默认的CM谢谢页面。
所以基本上它会调用然后显示消息。只是为了记住更新脚本中的id
s(在下半部分)var successMessage = $('#success'); var form = $('#subForm')
。
没有使用新的CM更新进行测试,但这对我有用。
CSS
#success {display: none;}
HTML / js:
<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>
<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" >
! function(e) {
var t = {};
function n(o) {
if (t[o]) return t[o].exports;
var r = t[o] = {
i: o,
l: !1,
exports: {}
};
return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
}
n.m = e, n.c = t, n.d = function(e, t, o) {
n.o(e, t) || Object.defineProperty(e, t, {
configurable: !1,
enumerable: !0,
get: o
})
}, n.r = function(e) {
Object.defineProperty(e, "__esModule", {
value: !0
})
}, n.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
} : function() {
return e
};
return n.d(t, "a", t), t
}, n.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, n.p = "", n(n.s = 1)
}([function(e, t) {
var n;
"function" != typeof(n = window.Element ? window.Element.prototype : window.HTMLElement.prototype).matches && (n.matches = n.msMatchesSelector || n.mozMatchesSelector || n.webkitMatchesSelector || function(e) {
for (var t = (this.document || this.ownerDocument).querySelectorAll(e), n = 0; t[n] && t[n] !== this;) ++n;
return Boolean(t[n])
}), "function" != typeof n.closest && (n.closest = function(e) {
for (var t = this; t && 1 === t.nodeType;) {
if (t.matches(e)) return t;
t = t.parentNode
}
return null
}),
function() {
var e, t, n, o = document.documentElement || document.body;
o.getAttribute("data-cm-hook") || (t = "submit", n = function(e) {
var t = e.target.closest(".js-cm-form");
t && (e.preventDefault ? e.preventDefault() : e.returnValue = !1, function(e, t, n) {
var o = n.querySelector(".js-cm-email-input"),
r = "email=" + encodeURIComponent(o.value) + "&data=" + encodeURIComponent(n.getAttribute("data-id")),
c = new XMLHttpRequest;
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.
var successMessage = $('#success');
var form = $('#subForm')
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() {
form.hide('fast');
successMessage.show('fast');
}
} else {
alert("error");
}
}
}, c.open(e, t, !0), c.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), c.send(r)
}("POST", "https://createsend.com//t/getsecuresubscribelink", t))
}, (e = o).addEventListener ? e.addEventListener(t, n) : e.attachEvent("on" + t, n), o.setAttribute("data-cm-hook", "1"))
}()
}, function(e, t, n) {
e.exports = n(0)
}]);
</script>
以上是关于Campaign Monitor表单保持重定向的主要内容,如果未能解决你的问题,请参考以下文章