javascript 如何绕过 FormSpree 重定向?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33984667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:05:47  来源:igfitidea点击:

How to get around the FormSpree redirect?

javascripthtmlforms

提问by OmniOwl

I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).

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

enter image description here

在此处输入图片说明

This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.

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

Here is what the form looks like by default from 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>

Here is my version (which worked fine before I tried to get around the redirect)

这是我的版本(在我尝试绕过重定向之前运行良好)

<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>

And when I call _nextI want it to execute the following alert:

当我打电话时,_next我希望它执行以下警报:

function FormSentConfirmation() {
    alert('Thanks for the email, we\'ll be in touch promptly.');
}

When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.

当我按下提交按钮时,发生的只是表单消失了,但我没有收到任何电子邮件。我可能只是做错了,因为我对 HTML/JavaScript 还是很陌生。

采纳答案by MortenMoulder

Follow their AJAX example at the bottom: https://formspree.io/

按照底部的 AJAX 示例进行操作:https: //formspree.io/

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

Remember to include jQuery as well for this to work. Remove the:

请记住也包含 jQuery 以使其正常工作。除掉:

var contactform =  document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + '[email protected]

and replace it with my code and change the selector. Or use $("form").on("submit"...

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

Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/

这是我的示例,它向您发送邮件并提示用户提醒:http: //jsfiddle.net/228d4snb/

Do anything you'd like to do right before that return false;

在此之前做任何你想做的事 return false;

回答by Sharath kumar

Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.

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

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

replace valuewith a valid thank-you page URL.

用有效的感谢页面 URL替换value

Follow this link for a tutorial on how to use Formspreeand also a video demo

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

回答by Bitclaw

There is actually an easier way now:

现在实际上有一个更简单的方法:

_next

By default, after submitting a form the user is shown the Formspree "Thank You" page. You can provide an alternative URL for that page.

默认情况下,提交表单后,用户会看到 Formspree“谢谢”页面。您可以为该页面提供替代 URL。

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

This is documented at the very end of the https://formspree.io/

这记录在https://formspree.io/ 的最后