Question

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

这是我上面提到的形式，但它根本不起作用。它在我试图摆弄它之前起作用了。

默认情况下，FormSpree中的表单如下所示：

<form action="//formspree.io/your@email.com"
      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/' + 'dynamicrealities@gmail.com');
        </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

按照底部的AJAX示例：https://formspree.io/

$("#sendMessage").on("click", function() {
    $.ajax({
        url: "//formspree.io/dynamicrealities@gmail.com", 
        method: "POST",
        data: {message: "hello!"},
        dataType: "json"
    });
});

请记住包含jQuery以便工作。删除：

var contactform =  document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities@gmail.com

并将其替换为我的代码并更改选择器。或者使用$("form").on("submit"...

以下是我的示例，该示例向您发送邮件并提示用户发出提醒：http://jsfiddle.net/228d4snb/

在return false;

之前做任何你想做的事情

Answer 2

现在实际上有一种更简单的方法：

_next

默认情况下，在提交表单后，用户会看到Formspree＆＃34;谢谢你＆＃34;页。您可以为该页面提供备用URL。

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

这是在https://formspree.io/

的最后记录的

Answer 3

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

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

将值替换为有效的感谢页网址。

点击此链接获取有关how to use Formspree和video demo

的教程

如何绕过FormSpree重定向？

3 个答案: