我在Github Pages服务上找到了我的网站。我正在尝试实现FormSpree免费联系表单,但是在您提交表单后,它会将您重定向到另一个网站。我想避免的事情。因此,我在互联网上查找了它,当然其他人也想摆脱它(我在下图中省略了我的电子邮件)。

javascript - 如何避开FormSpree重定向?-LMLPHP

这是我上面提到的形式,但实际上根本不起作用。在我尝试摆弄之前,它已经奏效了。

这是FormSpree默认情况下的表单外观:

<form action="//formspree.io/[email protected]"
      method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</form>

这是我的版本(在尝试绕过重定向之前,它工作得很好)
<div class=modal-body style="background-color: #454545">
    <p>Please use the form below to contact us regarding feedback or any questions you may have!
        We will never use the information given below to spam you and we will never pass on your
        information to a 3rd party.</p>
    <p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
    please consult their privacy policy for any questions regarding this matter.</p>
    <form id="contactform" method="POST">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Name</span>
                <input name="form-name-input" type="text" name="name" class="form-control" required>
            </div>
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input name="form-email-input" type="email" name="_replyto" class="form-control" required>
            </div>
            <div class="input-group">
                <span class="input-group-addon">Subject</span>
                <input name="form-subject-input" type="text" name="subject" class="form-control" required>
            </div>
            <div class="input-group">
                <span class="input-group-addon">Description</span>
                <textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
            </div>
            <input type="text" name="_gotcha" style="display:none" />
            <input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
            <input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
        </div>
        <script>
            var contactform =  document.getElementById('contactform');
            contactform.setAttribute('action', '//formspree.io/' + '[email protected]');
        </script>
    </form>
</div>
<div class="modal-footer" style="background-color: #333333">
    <button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>

当我调用_next时,我希望它执行以下警报:
function FormSentConfirmation() {
    alert('Thanks for the email, we\'ll be in touch promptly.');
}

当我按下“提交”按钮时,所有发生的事情就是表格消失了,但是我没有收到任何电子邮件。我可能只是在做错了,因为我还是HTML/JavaScript的新手。

最佳答案

遵循底部的AJAX示例:https://formspree.io/

$("#sendMessage").on("click", function() {
    $.ajax({
        url: "//formspree.io/[email protected]",
        method: "POST",
        data: {message: "hello!"},
        dataType: "json"
    });
});

请记住也要包括jQuery才能使其正常工作。去除那个:
var contactform =  document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + '[email protected]

并用我的代码替换它并更改选择器。或使用$("form").on("submit"...
这是我的示例,该示例向您发送邮件并提示用户警报:http://jsfiddle.net/228d4snb/

return false;之前做任何您想做的事情

关于javascript - 如何避开FormSpree重定向?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33984667/

10-12 20:53