使用 ajax 的 Formspree 联系表不起作用

Question

我正在使用 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>

代码看起来不错，但我在提交表单时没有收到任何电子邮件（我也在本地主机上测试了它，并在网络服务器上进行了测试）。我已经检查了 unblock feature on formspree site and it seems my email is not blocked. I have read other 答案，它工作正常，但我想修复此代码。

Answer 1

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

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

Answer 2

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

使用 ajax 的 Formspree 联系表不起作用

Formspree contact form using ajax not working

javascript

ajax

jquery

jekyll

contact-form