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>

代码看起来很好但我没有收到提交表单的任何电子邮件（我在web服务器上测试了localhost）。我已经检查了formspree网站上的unblock功能，似乎我的电子邮件没有被阻止。我已经阅读了other回答，它运行正常，但我想修复此代码。

Answer 1

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

Answer 2

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

使用ajax无法正常工作的Formspree联系表单

2 个答案: