A contact form is a must-have for any Shopify store. It gives your customers an easy way to get in touch with you whether they have questions, need support, or want to share feedback. Adding one to your site is simple, thanks to Shopify Liquid – the templating code that makes most Shopify themes work.
In this guide, you’ll learn how to add a contact form to your Shopify store, step by step. We’ll cover both the essential and optional fields and share tips for keeping your site SEO-friendly.
How to add contact form using Shopify Liquid
At first, you need to create a contact form.
Step 1: Create a contact form
To start, you’ll use the Shopify Liquid {% form 'contact' %}
tag. This tells Shopify that your form is designed for customer inquiries and ensures all submitted data is handled correctly.
A basic structure of a contact form in Liquid will look like this:
{% form 'contact' %}
<!-- Add form fields here -->
{% endform %}
Where to add this code
To integrate the contact form into your Shopify store, follow these steps:
- Create or edit a contact page.
- Log in to your Shopify admin panel.
- Go to Online Store > Pages.
- Click on Add Page or select an existing Contact Us page to edit.
- In the page content editor, click on Show HTML (this option appears as
</>
in some themes). - Paste the form code snippet into the HTML editor.
- Add to a theme template:
- Navigate to Online Store > Themes and click Edit Code.
- In the theme editor, locate the file for the Contact page template, usually named
contact.liquid
orpage.contact.liquid
. - Paste the form code into the desired section of the file.
- Embed in other sections:
- If you want the form on multiple pages, such as the homepage or footer, go to the respective Liquid file (
index.liquid
for homepage orfooter.liquid
for the footer). - Paste the form code in the appropriate location within the file.
- If you want the form on multiple pages, such as the homepage or footer, go to the respective Liquid file (
This structure sets up the framework for your form. Next, you’ll add the fields your customers will fill out.
Step 2: Adding essential fields
The most essential field of a contact form is the email address.
<input type="email" name="contact[email]" required>
In this code, the attributes mean:
- type=”email” specifies that the input field accepts an email address.
- name=”contact[email]” is a specific naming convention required by Shopify to process the email address correctly.
- required=”required” makes the email field mandatory.
Where to place the code
Place the email field code within the {% form 'contact' %}
tags in the page, section, or template file you’ve chosen. For example:
{% form 'contact' %}
<input type="email" name="contact[email]" required>
{% endform %}
Additional steps: Adding extra inputs
While an email field is enough for basic communication, adding optional fields can make your contact form more effective. These fields let you collect extra details, such as:
- Name: Makes your responses more personal.
- Subject: Helps customers specify what their query is about.
- Message: Gives them space to explain their question or issue.
Name:
<input type="text" name="contact[name]">
Subject:
<input type="text" name="contact[subject]">
Message:
<textarea name="contact[message]"></textarea>
Where to add the code
Add these optional fields inside the {% form 'contact' %}
tags alongside the email field. For example:
{% form 'contact' %}
<input type="email" name="contact[email]" required>
<input type="text" name="contact[name]">
<input type="text" name="contact[subject]">
<textarea name="contact[message]"></textarea>
{% endform %}
You can make optional fields mandatory by adding the required
attribute, like this:
<input type="text" name="contact[name]" required>
In conclusion
Your contact form is ready to serve if you follow our instruction. It’s not really a coding challenge for non-technical Shopify owners thanks to the Shopify Liquid. If you need anything advanced with the form, contact Kahunam’s Shopify experts today!