I'm trying to adapt W3 school's "Company" Bootstrap theme to a website of which a draft version is at www.peek.solutions.
The theme comes with a contact form which doesn't yet work, and I'm trying to use Formspree to make it do so. My approach so far has simply been to 'wrap' the part containing the form fields with a <form>
tag following with an action="https://formspree.io/kurt.peek@gmail.com"
and method=POST
, following the documentation:
<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>
However, this does not seem to work: when I fill out some test values in the fields and press "Send", I do not see Formspree's default confirmation page, nor do I receive an e-mail at the given address (see below).
How can I fix this code to make Formspree work?
I managed to get it to work by following the example on https://webdesign.tutsplus.com/tutorials/quick-tip-add-a-formspree-form-to-your-static-sites--cms-23870. Here is the updated snippet:
<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>
I'm still having some issues with getting the _next
input to re-direct to my own confirmation page rather than Formspree's default one, but that's a separate issue.