Guide Thumbnail
+

Adding a form to Shopify

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

Many Shopify users also use Formspree for their forms. While Shopify does provide a contact form for your website, it’s limited to their own platform leaving you with no options for integrations or more elaborate configurations.

Prerequisites

To follow this guide you’re going to need a Formspree account, which you can sign up for free right here, and an existing Shopify website. Check out the Shopify website and documentation to get started.

Getting started

Within your Formspree account click the button labelled New Project and name your new dashboard project. Projects let you group forms together if say you were using multiple forms on a single website for example. After naming your project click Create Project.

New project dialog

Next create a new form with the New Form button, call it Contact Form and update the recipient email to the email you wish to receive your form submissions in. Then click Create Form.

New form dialog

You’ll then be presented with the integration options for your new Formspree form. Formspree provides you with a wide range of implementation examples such as React, Ajax and regular HTML.

Integration view of the sample code section, tabbed with alternative language samples

For Shopify we’ll be using regular HTML. Select all the code within the example block and copy it to your clipboard.

<form action="https://formspree.io/f/{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>

Integrating with Shopify

Navigate to a new or existing page, or product, within your Shopify dashboard. Switch to the HTML view in the main content area, using the “Show HTML” button in the top right (Denoted by the “<>” icon).

Button to click show HTML

Paste the recently copied HTML in your clipboard into the HTML content area in the page or product.

HTML form added to the HTML view of a page called “Contact us”

Finally click “Save” in the bottom right corner of the view. Use the preview button on your Online Store to view the site and navigate to try out your newly added contact form.

Using Formspree with a Shopify store

The difference with using Formspree forms is that you can integrate with different services and extend the functionality of your forms. One example could be that you want to use a form as a support request portal. With Formspree you can turn your form requests into Gorgias support tickets, or feed them directly into your organization’s Slack group to make them visible to the entire team.

You’re not limited to one form either, nor by purpose. With a little development knowledge you can add a form to every product page on your site, allowing prospective customers to contact you about a specific product.

Formspree and Shopify in the wild

One example is JOLYN, who uses Formspree to collect competition entries and as a newsletter sign up form.

Example of the JOLYN website product listing page with a newsletter embedded in the page

In the words of Cory, JOLYN’s lead developer:

Formspree made it easy when adding HTML and AJAX forms

With the flexibility of Formspree, JOLYN was not only able to add a newsletter sign up form on their Shopify store, but also create a competition campaign to attract prospective customers and award people with prizes.

Example of the JOLYN website with a competition giveaway added, and a form next to it accepting entries

Tips for using Formspree with Shopify

Formspree is extremely flexible when it comes to creating custom forms. You’ll notice at the top of the form integration view in Formspree there’s an endpoint URL for your form.

Form view with form endpoint examples code

This endpoint applied to the action attribute along with an attribute of method="POST" is all you really need to get a form working. Everything within the form element is open for you to edit, add and remove to your particular needs.

<form action="https://formspree.io/f/XXXXX" method="POST">
  ...
</form>

Got Feedback?