使用ajax的Formspree联系表格不起作用答案

【问题标题】：Formspree contact form using ajax not working使用ajax的Formspree联系表格不起作用
【发布时间】：2018-04-24 19:51:25
【问题描述】：

我正在使用 formspree 将数据发送到我的电子邮件。代码看起来像这样。
HTML：

    <form id="contact-form" >
  <div class="form-stacked" >
              <label for="inputName">Name</label>
                <input type="text"  class="field-light"  id="inputName" placeholder="Name" name="name" />
              <label for="inputEmail">Email</label>
                <input type="email" class="field-light"  id="inputEmail" placeholder="Email" name="email" />
                <label for="inputMessage">Message</label>
                <textarea id="inputMessage" class="field-light"  rows="5" placeholder="Leave a Message" name="message" ></textarea>
        <button class="field-light center" type="submit" value="Submit">Submit</button>
      </div>
</form>

和 javascript 代码为：

<script>
$(document).ready(function() {
// $('#h2').hide();
$('#contact-form').submit(function(e) {
    var name = $('#inputName')
    var email = $('#inputEmail')
    var message = $('#inputMessage')

    if(name.val() == "" || email.val() == "" || message.val() == "") {
      $("#fail").show().delay(3000).hide(0);
      return false;
    }
    else {
      $.ajax({
        method: 'POST',
        url: '//formspree.io/mymail@gmail.com',
        data: $('#contact-form').serialize(),
        datatype: 'json'
      });
      e.preventDefault();
      $(this).get(0).reset();
      $('#success').show().delay(3000).hide(0);
    }
  });
});
</script>

代码看起来不错，但在提交表单时我没有收到任何电子邮件（我也在网络服务器上测试了它的本地主机）。我检查了 formspree 网站上的unblock 功能，看来我的电子邮件没有被阻止。我已阅读other 的答案，它工作正常，但我想修复此代码。

【问题讨论】：

没有 javascript 也能工作吗？通过将表单的操作设置为：//formspree.io/mymail@gmail.com?
@JoostS 是的，如果我们直接设置帖子，它确实有效，但问题是它会在地址栏上显示电子邮件。
知道 javascript 也可以被机器人读取。
@JoostS 我不知道

标签： javascript jquery ajax jekyll contact-form

【解决方案1】：

Formspree 有一个 Gold 帐户。这将隐藏电子邮件地址。如果您使用其他服务，例如在 CloudCannon 上托管或通过 formsubmit.io 或 formbucket 服务提供表单，您的电子邮件地址也将真正被隐藏。然后就可以在表单的action中使用简单的post了。

更新：目前（2020 年 5 月）免费计划也会隐藏您的电子邮件地址（需要注册）。

【讨论】：

我会尝试 formsubmit.io 让我看看是否同样有效
Formsubmit.io 工作正常！我也不需要额外的 javascript 代码。谢啦！对于那些需要帮助的人here。
Formspree 今天允许在隐藏电子邮件地址的免费计划中使用 ajax。
formsubmit.co 在这种情况下也很有帮助

【解决方案2】：

今天 Formspree 在免费计划中允许 AJAX 并提供表单 ID url，因此您无需在 action 端点中公开您的电子邮件地址。

【讨论】：