Creating a Contact Form Using Formspree

Formspree is a provider of forms as a service. It is ideal for static websites and not only forwards form submissions to the intended recipients but also offers various features such as spam protection, form submission validation, and complex routing.

Below is a step-by-step guide to creating a contact form using Formspree.

1. Create a Formspree Account and Obtain the Form Code

1.1. Create a Formspree Account

  1. Create a new site in Shifter or use an existing site. (Example: Formspree Demo)
  2. Go to the Formspree website and click [Get started].
  3. Sign up for Formspree.
  4. Verify your email address.

1.2. Creating a New Form

  1. Create a new form.
  2. Fill in the “Form Name” and “Send emails to” fields, then click [Create Form].
  3. Copy the form code (HTML or AJAX).

2. Embedding the Formspree Code into WordPress

2.1. Launching WordPress

  1. Launch WordPress from the Shifter dashboard.
  2. Click the [Dashboard] button to log in to the WordPress dashboard.

2.2. Adding a Custom HTML Block and Pasting the Code

  1. Click [Add block] and select [Custom HTML].

  2. Paste the copied code and save your changes.

    <!-- Paste the copied Formspree HTML code here -->
<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>

3. Generating and Publishing the Artifact, and Verifying Form Functionality

  1. After generating and publishing the artifact, verify that the form works.
  2. After submission, the page will look like this.

4. Email Address Verification

  1. Once you’ve added an email address, save the page and generate a new artifact.
  2. This will create a static version of your WordPress site with the form added to the newly created contact page.
  3. When you submit a test entry via the form, you’ll be redirected to the Formspree page.
  4. A verification email will be sent to the email address you added.
  5. Check your email and click the activation link.

5. Completion and Formspree Features

You’re all set! You can now use Formspree to receive emails from your static WordPress site.

  • Spam Protection: Standard spam protection is included, and you can use features such as honeypot bots.
  • Paid Plans: With a paid plan, you can access even more features.

Stay tuned for more information about Formspree.