Create a Simple HTML Contact Form with Google Sheets + Formspree

HTML is great for making your website look and work exactly how you want it to—but it can be a pain to work with. We’re here to make it easier and streamline the process of adding an HTML contact form to your website. It can also be a pain to make form data accessible to everyone on your team, so we’ll also show you how to integrate it with Google Sheets, which, chances are, you’re already using.

If you have an HTML website, we assume you know at least a bit about coding with HTML. The good thing is, you don’t need to be an expert to get your HTML contact form working. We’ve illustrated this tutorial with a business website we made up called Seltz, a custom seltzer retailer that allows you to select your preferred level of carbonation. When we’re done, you’ll know how to put an HTML contact form in your website that tracks all of your submissions in Google Sheets.

Step 1: Code your html contact form

Grab the premade code for a contact form from our form library. You can add or customize fields in the editing box if you want, but most contact forms keep it simple with name, email address, and message. If you’re using an HTML template for your website, it should include all of the style code already. If your template already has a form included and you’re happy with its layout and fields, you can skip this step.

For Seltz’s website, we changed the placeholder text to suit their business personality. Those edits are shown in the red boxes here:

Then hit “copy form code” to add it to your clipboard or “download HTML” for a file. While you can copy the code straight from the editor, using these buttons will automatically include the form code and the styling code that make the form look good on your site.

This is what our final form code looks like:

  <form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/{form_id}" method="post">
    <fieldset id="fs-frm-inputs">
      <label for="full-name">Full Name</label>
      <input type="text" name="name" id="full-name" placeholder="Michael Bubbly" required="">
      <label for="email-address">Email Address</label>
      <input type="email" name="_replyto" id="email-address" placeholder="email@domain.tld" required="">
      <label for="message">Message</label>
      <textarea rows="5" name="message" id="message" placeholder="What's the fizz?" required=""></textarea>
      <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
    </fieldset>
    <input type="submit" value="Submit">
  </form>

Let’s go through what’s happening here:

• Everything is wrapped in <form></form> tags. These HTML tags tell your browser that everything between them should be considered part of the form and rendered together.
• <fieldset> groups related elements (e.g., the fields) together in the form.
• This form has <label>,<input> and <textarea> elements. Labels are the descriptions of each field the user can see (“First Name”). Inputs are the single line text fields where users add their name and email information (e.g., Michael). You can add a placeholder to each of these to make it easier for the user to understand what goes in each field. A textarea is a larger text field where users will include longer messages.
• You can also add hidden elements to a form, allowing you to add values to a form that isn’t visible to the user. If you have multiple forms, this can help you identify each. In this case, we used the hidden element to set the subject of the emails you will receive to “Contact Form Submission”.
• Finally, there is a submit button to send the information to the endpoint set out in the action attribute.

The possibilities really are endless (after all, it’s HTML), but this is all you need to get started.

Step 2: Choose an endpoint

The endpoint is the URL to which your website will send the form data. Without it, your form won’t work. Formspree generates a unique and secure endpoint for your form and stores all of the entries in your account. Click “+new form” and choose a name for your form (we chose “Seltz Contact Us”).

The endpoint is shown in the Integration tab. Use it to replace the action attribute in the form library code, which is written as: action="https://formspree.io/f/{form_id}".

Step 3: Put the code in your website

If your website already has form code, just put the endpoint URL in the “action” section. If not, paste the full form code where you want it to go. If you have a static website or HTML template, you can drop the form code on any page.

If you use Wordpress, Shopify or Webflow you can create an HTML code block and insert the code into that. Here’s what it looks like for Wordpress:

In our example, we built Seltz in WordPress. To add our HTML contact form, we went to the “Contact Us” page, chose an HTML block where we wanted the form to appear, and pasted the code within the block. We also could have inserted it via the code editor.

But it doesn’t matter whether you are using a CMS like WordPress or straight HTML—Formspree’s code will work the exact same way. Just paste the form code at the point in the page where you want it to appear.

Here’s how it looks:

Step 4: Test Your Form

Send some test emails to make sure everything is working. In Formspree, the submissions will look like this:

The top shows a timeline of when the form submissions arrive. The white area is an expanded record of the last entry. Click “export” to download a JSON or CSV version of these records.

Step 5: Connect with Google Sheets

All of your form submissions will be stored within your Formspree account. But if you want to work with the responses in a spreadsheet, you can also send the entries to Google Sheets. This lets you easily share the spreadsheet with other people on your team and filter, sort, or run more advanced analytics on the form entries.

Click on “Plugins” within “Form Details,” and select Google Sheets (available in our Gold and Platinum plans).

You’ll be prompted to log in to your Google account.

The spreadsheet is automatically generated in your Google account and will continue to receive your form entries.

Here’s how it looks:

Signed, sealed, delivered

Now, all your form submissions will go straight to Google Sheets, and you can organize and share them however you like. Formspree also supports plugins with Airtable, Mailchimp, Stripe, Zendesk, and more. Learn about our supported plans here.

Got Feedback?