How to Add Contact Form in Shopify?

Create a contact page

You can create a new page on your online store to display a form that customers can fill out to send you a message. You can also include your own contact information on this page to let customers contact you in different ways, such as by mail or telephone.

Step 1: From your Shopify admin, click Online Store, and then click Pages (or press G W P).

Shopify admin

Step 2: Click Add page.

Add page

Step 3: In the Title box, type a title for your contact page, for example, Contact us or Get in touch.

Step 4: In the Content box, type some text that you want to appear above the contact form. You don't have to enter anything here.

Content box


Here is some example information that you might want to add in the Content box:

  • Short, friendly text such as "We'll get back to you as soon as we can".
  • Your store's address if you have a retail location.
  • You're phone number if you want customers to be able to reach you by phone.


Step 5: Click Save page to create your contact page.

Check if your theme has a contact form template

Many themes, including all Shopify-supported themes, have a built-in page.contact.liquid template. This template allows you to add a basic customer contact form to any page on your Shopify store. If your theme doesn't have a contact form template, then you can create a new one.

To check if your theme includes a page.contact.liquid template:

Step 1: From your Shopify admin, click Online Store, and then click Themes (or press G W T).

Step 2: Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

Step 3: In the Templates section, look for page.contact.liquid:

page.contact.liquid

Step 4: Choose one of the following options:

If your theme doesn't have a page.contact.liquid file, then you can create a contact form template.

If your theme has a page.contact.liquid file, then you don't have to create a form. You can set your contact page to use the contact template.

 

Create a contact form template


If your theme doesn't have a built-in page.contact.liquid, you can create a new one:

Step 1: From your Shopify admin, click Online Store, and then click Themes (or press G W T).

Step 2: Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

Step 3: In the Templates section, click Add a new template.

Step 4: In the Add a New Template dialog, choose page from the drop-down menu and name the template contact:

New Template

Step 5: Click Create template. This creates a copy of your page.liquid called page.contact.liquid. The template will automatically open in the code editor.

Step 6: In the online code editor, find the following code:

{{ page.content }}


Step 7: On a new line directly below that line, copy and paste the following code:

{% form 'contact' %}

{% if form.posted_successfully? %}
<div class="successForm feedback">
{{ 'contact.form.post_success' | t }}
</div>
{% endif %}

{% if form.errors %}
<div class="errorForm feedback">
<!-- {{ form.errors.size }} or {{ form.errors | size }} -->
<p>Your contact form has {{ form.errors | size | pluralize: "an error", "a few errors" }}. To submit your form, make the following changes and try again:</p>
{% for field in form.errors %}
<p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
{% endfor %}
</div>
{% endif %}

<div id="contactFormWrapper">
<p>
<label>{{ 'contact.form.name' | t }}</label>
<input type="text" required id="contactFormName" name="contact[name]">
</p>
<p>
<label>{{ 'contact.form.email' | t }}</label>
<input type="email" required id="contactFormEmail" name="contact[email]">
</p>
<p>
<label>{{ 'contact.form.phone' | t }}</label>
<input type="telephone" id="contactFormTelephone" name="contact[phone]">
</p>
<p>
<label>{{ 'contact.form.message' | t }}</label>
<textarea required rows="10" id="contactFormMessage" name="contact[body]"></textarea>
</p>
<p>
<input type="submit" id="contactFormSubmit" value="{{ 'contact.form.send' | t }}" />
</p>
</div>

{% endform %}

<style>
.contact-form {margin:1em 0}
.feedback {padding:0.5em 0.7em;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}
.feedback p {padding:0.5em 0 !important;margin:0 !important}
.successForm {background:#bde0a8;color:green}
.errorForm {background:#eebdbd;color:red}
</style>

Step 8: Click Save to confirm the changes to your template.

Set your page to use the contact form template

After you've created a new contact page for your online store, you can add the contact form template to it. This will show the content of the contact form on your new page.

Step 1: From your Shopify admin, click Online Store, and then click Pages (or press G W P).

Step 2: Click the name of the contact page that you created.

Step 3: In the Template section, choose page.contact from the drop-down menu.

Step 4: Click Save to confirm your changes to the page.

Your contact form should now be visible on your Contact page.

You might need to add your Contact page to your navigation menu to make it visible on your store.

Contact page

Join our Newsletter

Never miss the latest offers, voucher codes and useful articles delivered weekly in your inbox.