Adding a Form to Wordpress

In this guide we’ll show you how to add a contact form to your Wordpress website using Formspree.

Formspree is a flexible form backend that works seamlessly with WordPress. Whether you’re running a blog or a business site, Formspree lets you collect form submissions without writing any backend code.

At the end of this guide, you’ll have a working contact form embedded on a WordPress page, and you’ll receive email notifications whenever someone submits the form.

Prerequisites

To follow this guide, you’ll need:

• A Formspree account (you can sign up for free here)
• An existing WordPress site

If you have a self-hosted WordPress site, you can add custom HTML blocks to your pages seamlessly. If you are using a managed WordPress instance on WordPress, you will need an account that has plugins enabled (Business plan or above) to be able to integrate a custom HTML block in your site.

Adding a form to WordPress

We’ll use the Custom HTML block to embed the form directly into a WordPress page.

Step 1: Create or Edit a Page

Navigate to the WordPress dashboard and either:

• Click Pages > Add New, or
• Choose an existing page and click Edit

Step 2: Add a Custom HTML Block

Click the + icon in the editor to add a new block. Then select Custom HTML from the list of blocks.

Step 3: Paste Your Form HTML

Paste the HTML form code from your Formspree integration screen. Here’s a simple example of a contact me form from the Formspree forms library:

<form
  action="https://formspree.io/f/FORM_ID"
  class="fs-form"
  target="_top"
  method="POST"
>
  <div class="fs-field">
    <label class="fs-label" for="name">Your Name</label>
    <input class="fs-input" id="name" name="name" required />
  </div>
  <div class="fs-field">
    <label class="fs-label" for="email">Email</label>
    <input class="fs-input" id="email" name="email" required />
    <p class="fs-description">
      This will help me respond to your query via an email.
    </p>
  </div>
  <div class="fs-field">
    <label class="fs-label" for="message">Message</label>
    <textarea
      class="fs-textarea"
      id="message"
      name="message"
      required
    ></textarea>
    <p class="fs-description">What would you like to discuss?</p>
  </div>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

You will replace https://formspree.io/f/FORM_ID with the actual form endpoint from your Formspree form in a while.

Step 4: Paste Your Form CSS

In the same block after the closing </form> tag, paste the CSS for your form. The Formspree forms library provides a handy CSS file to get started with HTML form styling:

<!-- Rest of the HTML code -->
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

<!-- Add the following block-->
<style>
  @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

  /* Rest of the style configs */

  .fs-textarea:focus-visible {
    box-shadow: var(--color-border-active) 0 0 0 1px inset;
  }

  .fs-textarea::placeholder {
    color: var(--color-text-muted);
  }
</style>

Once done, you should be able to view the styled form in the editor:

Step 5: Creating a Form Endpoint

Next, you need to create a form endpoint using Formspree. If you don’t have an account yet you can sign up here.

To start, create a new form with ++ Add New > New Form, call it Contact form and update the recipient email to the email where you wish to receive your form submissions. Then click Create Form.

On the form details page, you will find the Form Endpoint:

Copy the URL and paste it in the form’s action attribute:

<form
  action="https://formspree.io/f/FORM_ID"
  class="fs-form"
  target="_top"
  method="POST"
>

<!-- Rest of the code -->

Step 6: Preview and Publish

Click the Preview button to see how the form will appear on your page. Then click Publish or Update to make it live.

Now visit the page on your live site, fill out the form, and test it! You should see a success message and receive the form submission via email (and in your Formspree dashboard).

That’s it, you’re done!

Got Feedback?