Creating a Contact Form with Formspree – Shifter

Formspree is a provider of forms as a service. As they say, it’s ideal for static sites, and we agree. Not only does it transfer data to the form’s destination like a standard form, but it also offers many additional features.

What Is Formspree?

Formspree is a service that lets you easily add forms to static websites. There’s no need to write server-side code; simply submit your HTML form to Formspree’s endpoint, and it will handle the form data for you.

Benefits of Using Formspree

  • Simplicity: Since there’s no need to write server-side code, you can easily implement forms.
  • Ideal for Static Sites: It’s ideal for sites built with static site generators (such as Shifter).
  • Versatile: In addition to transferring data to the form’s destination, it offers features such as spam protection and automatic replies.

Steps to Create a Contact Form Using Formspree

  1. Create a Formspree Account: Create an account on the Formspree website.

  2. Create a New Form: Create a new form in the Formspree dashboard.

  3. Create an HTML Form: Create an HTML form using the example below as a reference.

    <form action="https://formspree.io/f/{your_form_id}" method="POST">
      <label>
        Your email:
        <input type="email" name="_replyto">
      </label>
      <label>
        Your message:
        <textarea name="message"></textarea>
      </label>
      <button type="submit">Send</button>
    </form>
    • Please replace {your_form_id} with the ID of the form you created in Formspree.
    • _replyto is the field for specifying the email address to reply to.
    • message is the field for entering the message body.
  4. Embedding the HTML Form on Your Website: Embed the HTML form you created in the appropriate location on your website.

  5. Testing the Form: Submit the form to verify that Formspree is processing the data correctly.

Other Settings

Formspree also allows you to configure the following settings.

  • Spam Protection: You can set up spam protection measures such as reCAPTCHA.
  • Autoresponse: You can set up an automatic reply to form submitters.
  • Redirect: You can set a URL to redirect to after the form is submitted.

Summary

Formspree is a convenient service that lets you easily add a contact form to a static website. Be sure to give it a try.