如何使用Formspree与引导程序模板

Z时代
2024-01-10
分类：问答

我正在尝试将W3 school's "Company" Bootstrap theme改编为版本号为www.peek.solutions的网站。如何使用Formspree与引导程序模板

主题带有一个联系表单，它还没有工作，我试图使用Formspree来实现它。我的做法至今只是一直以“包”与action="https://formspree.io/[email protected]"和method=POST以下含有具有<form>标签表单域的一部分，该文件如下：

<form action="https://formspree.io/[email protected]" 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工作？

回答：

我设法通过遵循https://webdesign.tutsplus.com/tutorials/quick-tip-add-a-formspree-form-to-your-static-sites--cms-23870上的示例来使其工作。以下是更新的摘要：

<form id="contactform" action="//formspree.io/[email protected]" 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>