This website used Hugo and the HugoFresh theme for its first iteration.
Hugo fresh offers a fairly clean starting point for a multi-page website, but surprisingly did not have a functional contact form but correcting this is simple.
We used Formspree.io to set up a basic contact form as our old hand-rolled form was easy to script against and spam. Formspree has some advantages such as built in captcha and stats.
To connect this to the Hugo-fresh theme simply modify the contents of
layouts/partials/section5.html so it looks a little like:
<form action="https://formspree.io/f/FORMSPREE-ID" method="POST"> <div class="columns is-multiline"> <div class="column is-6"> <input class="input is-medium" type="text" name="name" placeholder="First and Last" required=""> </div> <div class="column is-6"> <input class="input is-medium" type="email" name="email" placeholder="email@example.com" required=""> </div> <div class="column is-12"> <textarea class="textarea" rows="10" placeholder="Write something..." name="message"></textarea> </div> <div class="form-footer has-text-centered mt-10"> <button class="button cta is-large primary-btn raised is-clear" type="submit">Send Message</button> </div> </div> </form>
Changes should include:
- Adding the form action which calls your Formspree.io form
nameproperties to the input fields to match what’s expected for the form you’re using.