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谢谢页面。

答案

所以基本上它会调用然后显示消息。只是为了记住更新脚本中的ids(在下半部分)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表单保持重定向的主要内容,如果未能解决你的问题,请参考以下文章

页面在验证时保持重定向

Apache .htaccess 重定向删除表单数据

如何在提交表单和位置重定向后打开特定模式

markdown Campaign Monitor文档

HTML 将背景图像应用于表格单元格 - 博客 - Campaign Monitor

c shell 输入重定向保持打开状态