How To Add A Contact Form To Your Shopify Store

Customer service can be one of the most challenging pieces of your business, but without happy customers, you have no business. That’s why it’s vital to make the customer experience one of your top priorities, and the way your customers communicate with you is all part of that experience.

Lot’s of businesses utilize helpdesk tools such as Intercom or ZenDesk, but that may be more than you need right now.

If your Shopify theme doesn’t already have a contact form, or you’re using a third-party tool like Typeform, Google Forms, or Wufoo or want to simplify things a bit, you can make your own simple contact form right in Shopify.

For the sake of this tutorial, I’m going to assume your store does not have a form and by the end of this tutorial, you’ll have something that accepts customer information and looks something like this:

How to Code Your Own Contact Form on Shopify

Before We Start: Make a Copy of Your Theme

Tip: Never edit the code of a live store in production. Make a duplicate first and use Shopify’s preview functionality to preview your changes.

Log in to your Shopify dashboard and go to Online Store > Themes. Find your live theme and click on the Actions dropdown menu and click on Duplicate.

How to Duplicate Your Shopify Store Theme

Once that duplicates, click the Actions menu again and click Edit code.

How to Edit Your Shopify Store Code

Let’s Build a Contact Form!

We’re going to need two things for our contact form to work: A new template file to hold our code, and a new page in our store.

Create a New Template File

Now that you’ve landed in the code editor, look to the left side of the screen in your folder tree and click and expand Templates. Then click on the Add a new template link.

How to Create a New Template File in Shopify

Then choose Page from the first dropdown and call it Contact. Then hit the Create template button.

How to Add a New Template to Edit Your Code in Shopify

Copy and Paste Our Code

Here is all the code we need to build our contact form.

Note: I’m using the Debut Shopify theme, so some of the elements and properties in the code below are specifically for that theme. If you aren’t using Debut, you’ll have to rename the classes to work properly with your theme. It shouldn’t be too difficult, especially if you have a developer handy—but results may vary. You can always reach out to me on Twitter for assistance and I’ll do my best to help.

Copy and paste the following code block into your new file and hit the Save button.

<div class=“page-width”>
  <div class=“grid”>
    <div class=“grid__item medium-up–five-sixths medium-up–push-one-twelfth”>
      <div class=“section-header text-center”>
        <h1>{{ page.title }}</h1>
      </div>

      {% if page.content.size > 0 %}
        <div class=“rte”>
          {{ page.content }}
        </div>
      {% endif %}

      <div class=“contact-form form-vertical”>
        {%- assign formId = ‘ContactForm’ -%}
        {% form ‘contact’, id: formId %}
          {% include ‘form-status’, form_id: formId %}

            <div class=“grid grid–half-gutters”>
                <div class=“grid__item medium-up–one-half”>
                    <label for=“{{ formId }}-name”>{{ ‘contact.form.name’ | t }}</label>
                    <input type=“text” id=“{{ formId }}-name” name=“contact[name]”>
                </div>
                <div class=“grid__item medium-up–one-half”>
                    <label for=“{{ formId }}-email”>{{ ‘contact.form.email’ | t }} <span aria-hidden=“true”>*</span></label>
                    <input required type=“email” id=“{{ formId }}-email” name=“contact[email]” autocorrect=“off” autocapitalize=“off” aria-required=“true”
                    {%- if form.errors contains ’email’ -%}
                        class=“input–error”
                        aria-invalid=“true”
                        aria-describedby=“{{ formId }}-email-error”
                    {%- endif -%}
                    >
                    {%- if form.errors contains ’email’ -%}
                    <span id=“{{ formId}}-email-error” class=“input-error-message”>
                        <span class=“visually-hidden”>{{ ‘general.accessibility.error’ | t }} </span>
                        {% include ‘icon-error’ %}
                        <span>{{ form.errors.translated_fields[’email’] | capitalize }} {{ form.errors.messages[’email’] }}.</span>
                    </span>
                    {%- endif -%}
                </div>
            </div>

            <label for=“{{ formId }}-order” class=“hidden-label”>Order Number:</label>
            <input type=“text” id=“{{ formId }}-order” name=“contact[order]” placeholder=“#1234”>

            <label for=“{{ formId }}-phone”>{{ ‘contact.form.phone’ | t }}</label>
            <input type=“tel” id=“{{ formId }}-phone” name=“contact[phone]” pattern=“[0-9-]*” >

            <label for=“{{ formId }}-message”>{{ ‘contact.form.message’ | t }}<span aria-hidden=“true”>*</span></label>
            <textarea required rows=“10” id=“{{ formId }}-message” name=“contact[body]”>{% if form.body %}{{ form.body }}{% endif %}</textarea>

            <input type=“submit” class=“btn” value=“{{ ‘contact.form.submit’ | t }}”>

        {% endform %}
      </div>
    </div>
  </div>
</div>

Validation Snippet

Our form has some light validation in it which will help the user know if they’ve made a mistake when filling out the form. This code is in a separate liquid snippet file called form-status.liquid.

Go back inside your theme code editor and click and expand Snippets. Then click Add a new snippet.

How to Add a New Code Snippet in Shopify

Name it form-status and hit Create snippet.

How to Create a New Snippet in Shopify

Copy and paste the code found here into the new snippet and hit Save.

Create a New Contact Page

Next, back in the Shopify admin, click on Online Store > Pages.

How to Create New Contact Page in Shopify

Then click on the Add page button on the top right of your screen. Choose a title and enter a description (optional). Then on the lower right side of the screen, click the dropdown under Template Suffix and look for the new template we just created. It should be called page.contact.

How to Code Your Own Contact Form in Shopify

Now, this new page will use the code we just pasted into our new template file. So if you make changes there, it will only reflect on the pages you’ve selected to use template page.contact. Once you’re happy with the title and description, click Save.

Now, you can preview the page by clicking View page at the top.

How to Code Your Own Contact Form in Shopify

But Wait! What Did All That Code Mean?

Let’s learn a little more about the code we used so you can make edits or changes on your own if you need to. If you’d like to download or bookmark the code, I created a Gist here so you can easily copy and paste it.

The code may look overwhelming but once you look past all the if statements, classes, and other attributes, it’s pretty basic.

The main elements you need for a form to capture and submit data properly are the necessary labels and input fields that accept the form data.

Take a look at the code that captures the customer’s name:

<label for=“{{ formId }}-name”>{{ ‘contact.form.name’ | t }}</label>
<input type=“text” id=“{{ formId }}-name” name=“contact[name]”>

It requires a label and an input element. The label has a for attribute, which associates (or connects) it to a matching input element that shares the same id.

The text in between the brackets is what your customers will see on the contact page. It looks like {{ ‘contact.form.name’ | t }} because it’s using a dynamic tag that references the language settings inside your Shopify Admin.

This area of the admin might be new to you, but this is where all the text that’s editable inside Shopify lives. Some of the other things you can edit here are the title of the Checkout, or the text on your “Pay now” button.

To edit the “name” label for our contact form, go to Settings > Store Languages > Change theme language.

How to Edit the Name Label in Shopify

Click on Contact in the navigation.

How to Change Theme Language in Shopify

Now you can see all the fields you have access to use inside our contact form.

Sending a Test Email

Head back to your contact form at yourwebsite.com/pages/contact-us and try submitting the form. If you’re successful, you should see something like this on the screen.

How to Send a Test Email in Shopify

Then you should receive an email that looks like this:

Shopify Contact Form Test Email

Bonus

Now you’ve successfully built out a native contact form for your store that even has an extra field for the order number! By gathering this upfront, you save the hassle and time of having to ask for it later. This is especially valuable for any stores with repeat customers that have many orders and who could be referring to more than one.

Conclusion

I hope you found this tutorial valuable. I used to use one of those third-party tools I spoke about in the beginning to gather this information and while they’re great, they aren’t integrated into your storefront and they cost money!