hugo-fresh and Formspree

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@domain.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
• Adding name properties to the input fields to match what’s expected for the form you’re using.