intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Adding a contact form to your store

This article covers two different cases as your theme likely has a contact form already built in, but it may not.

At the end, your contact form should look similar to this:

Contact form 1

Not what you were looking for? Try one of theses tutorials:

Enable the built-in contact form

Most themes now have a contact form built-in somewhere in the code. We recommend checking if your theme has this built-in or not before you begin the process of building your own from scratch. To check:

  1. Go to the Edit HTML/CSS page.

  2. Under the list of Templates you will see a file called if one exists;

  3. Page contact liq
  4. If the file is not there, then click here to start from scratch. If a file already exists, continue reading.

  5. All you need to do is create a Page and assign the template to it. Here's how:

  6. Follow the steps in this article here to create a page;

  7. Change the Template from page to using the drop down box;

    Page contact template
    If you don't see the Template section, click save to complete the page creation and it will appear
  8. Click Save again;

  9. Don't forget to add the page to your navigation so customers will be able to click to it.

Starting from scratch involves 4 steps:

  1. Create your 'Contact Us' page
  2. Create an alternate page template called
  3. Formatting, Validation and Spam Check
  4. Where can I see the submissions?

Create your 'Contact Us' page

Create a 'Contact Us' page if you don't already have one.

  1. From your Shopify admin, click Online Store:

    Online store

  2. Click Pages:

    Online pages

  3. Click on the Add page button.

    Contact form 2

  4. Give your page a title. The title of the page can be something else than 'Contact Us' if you prefer.

  5. In the Rich Text Editor, you can add content to your page. This step is optional. You can add any content but not your contact form.

Here are some of the things you may want to add, using the Rich Text Editor:

  • Short inviting text: “We will get back to you within 24 hours”.

  • A phone number where people can reach you. Seeing a phone number instills trust with your customers, although chances are slim that people will actually call you and will very likely use your contact form instead.

  • If your store has a retail location, a physical address may also be useful.

*An email address or several ones. Spam filters are your friends. If you use gmail or any good enough mail service provider — including Shopify —, spam won't be a problem.

Create an alternate page template called

  1. Go to the Edit HTML/CSS page.
  2. Under the Templates folder, check to see that your theme does not supply you with a file. If it does, click on that to open it in the online code editor.

    If your theme does not supply you with a file, click on the Add a new template link.

    In the drop-down menu, choose "page" and call your page "contact".

    Contact form 3

    Click Create template. Your template should automatically open in the online code editor.

  3. In the online code editor, find this code:
    {{ page.content }}

    Right below, add this:

    {% form 'contact' %}
    {% if form.posted_successfully? %}
        <div class="successForm feedback">
          <p>Thanks for contacting us! We'll get back to you as soon as possible.</p>
    {% endif %}
    {% if form.errors %}
    <div class="errorForm feedback">
      <!-- {{ form.errors.size }} or {{ form.errors | size }} -->
      <p>Oops, sorry. We were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}. Please correct the following and submit again:</p>
      {% for field in form.errors %}
        <p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
      {% endfor %}
    {% endif %}
    <div id="contactFormWrapper">
        <label>Your Name:</label><br/>
        <input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe" />
        <input type="email" id="contactFormEmail" name="contact[email]" placeholder="" />
        <label>Phone Number:</label><br/>
        <input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="555-555-1234" />
        <textarea rows="15" cols="75" id="contactFormMessage" name="contact[body]" placeholder="Your Message"></textarea>
        <input type="submit" id="contactFormSubmit" value="SEND" />
    </div><!-- contactWrapper -->
    {% endform %}
    .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}
  4. Save your changes.

Formatting, Validation and Spam Check

The names of the form fields in the email sent to you will be capitalized. Example: a form field that uses name="contact[name]" will be labeled “Name”.

Form fields that use contact[email] and contact[body] will be validated. If either is blank, then error(s) will be flagged and the form won't be submitted.

A contact[body] field will be analysed by Shopify's spam filters as well. If the spam filters decide that the submission is spam, the subject of the email will be prefixed with [SPAM]. The email will still be sent. You can set up a filter in your email program to set aside emails with a subject that contains [SPAM]. We are sending all submissions in case of a false positive.

  1. From your Shopify admin, click Online Store:

    Online store

  2. Click Pages:

    Online pages

  3. Click on your 'Contact Us' page to open it.

  4. Scroll down to the Template section.

  5. In the drop-down menu, choose the template.

    Contact form 4

Preview and test your contact form on your store!

Where can I see the submissions?

Each submission is sent to the customer email address of your shop. You can edit that email address on the General page of your store admin.


To avoid contact submissions being blocked by your spam filter, you should make sure you add to your list of trusted email addresses.

You can view a related article on adding fields to the liquid contact form here.

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.