如何绕过 FormSpree 重定向？

Question

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

这是我上面得到的表格，但实际上根本不起作用。不过，在我尝试摆弄它之前它就起作用了。

这是 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 还很陌生。

Answer 1

更新： 该功能仅适用于付费计划。

在表单提交后使用表单内的隐藏输入字段进行重定向。您可以使用此代码块将用户重定向到您喜欢或创建的页面。

<input type="hidden" name="_next" value="//site.io/thanks.html" />

将 value 替换为有效的感谢页面 URL。

点击此链接可获取有关 如何使用 Formspree 的教程以及 视频演示

Answer 2

遵循底部的 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;

Answer 3

您可以将表单放入 iframe 中，这样只有 iframe 才会被重定向。我所做的是创建一个单独的 html 文档，其中仅包含联系表单 html（以及任何关联的脚本），然后在我实际的 contact.html 页面中放置：

<iframe src="contact-form.html" class="container"></iframe>. 

将 iframe 样式设置为适当的大小并且没有边框，它应该可以顺利工作。

Answer 4

如果您不想使用 JQuery，请使用此代码段：

<script>
    const form = document.querySelector('form');
    form.addEventListener('submit', e => {
        e.preventDefault();
        const formData = new FormData(form);
        const xhr = new XMLHttpRequest();
        xhr.open('POST', form.action, true);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== XMLHttpRequest.DONE) return;
            if (xhr.status === 200) {
                form.reset();
                alert('Thank you for your message. We will get back to you soon.');
            } else {
                alert('Sorry, there was an error. Please try again later.');
            }
        };
        xhr.send(formData);
    });
</script>