如何使用带有Bootstrap模板的Formspree

Question

我正在尝试将W3 school's "Company" Bootstrap theme改编为草稿版本为www.peek.solutions的网站。

主题附带一个尚未奏效的联系表单，我正在尝试使用Formspree来完成此操作。到目前为止，我的方法只是根据文档“包装”包含带有<form>标记的表单字段的部分，后面跟着action="https://formspree.io/kurt.peek@gmail.com"和method=POST：

<form action="https://formspree.io/kurt.peek@gmail.com" method="POST">
<div class="col-sm-7 slideanim">
  <div class="row">
    <div class="col-sm-6 form-group">
      <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
    </div>
    <div class="col-sm-6 form-group">
      <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
    </div>
  </div>
  <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
  <div class="row">
    <div class="col-sm-12 form-group">
      <button class="btn btn-default pull-right" type="submit">Send</button>
    </div>
  </div>
</div>
</form>

然而，这似乎不起作用：当我在字段中填写一些测试值并按“发送”时，我没有看到Formspree的默认确认页面，也没有收到给定地址的电子邮件（见下文）。

如何修复此代码以使Formspree正常工作？

Answer 1

我按照https://webdesign.tutsplus.com/tutorials/quick-tip-add-a-formspree-form-to-your-static-sites--cms-23870上的示例设法让它工作。这是更新的代码段：

<form id="contactform" action="//formspree.io/kurt.peek@gmail.com" method="POST">
<div class="col-sm-7 slideanim">
  <div class="row">
    <div class="col-sm-6 form-group">
      <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
    </div>
    <div class="col-sm-6 form-group">
      <input class="form-control" id="email" name="_replyto" placeholder="Email" type="email" required>
    </div>
  </div>
  <textarea class="form-control" id="comments" name="message" placeholder="Message" rows="5"></textarea><br>
  <div class="row">
    <div class="col-sm-12 form-group">
      <button class="btn btn-default pull-right" type="submit">Send</button>
    </div>
  </div>
</div>
<input type="hidden" name="_next" value="//peek.solutions/confirmation.html" />
<input type="text" name="_gotcha" style="display:none" />   
</form>

我仍然遇到一些问题，让_next输入重定向到我自己的确认页面，而不是Formspree的默认页面，但这是一个单独的问题。