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:
Before We Start: Make a Copy of Your Theme
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.
Once that duplicates, click the Actions menu again and click Edit 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.
Then choose Page from the first dropdown and call it Contact. Then hit the Create template button.
Copy and Paste Our Code
Here is all the code we need to build our contact form.
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.
Name it form-status and hit Create snippet.
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.
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.
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.
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.
Click on Contact in the navigation.
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.
Then you should receive an email that looks like this:
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!
