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

You can add a contact form to your store to let customers get in touch with you. Many themes have a built-in contact form that you can enable, including all Shopify-supported themes. If you are using a theme that does not have a built-in contact form, you can create one yourself.

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.

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

    Click Online Store then Pages

  2. Click Add a page.

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

  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.

    Contact page example

    Here is some example information that you may 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.
    • Your phone number if you want customers to be able to reach you by phone.
  5. Click Save page to create your contact page.

Check whether 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.

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

    Click Online Store then Themes

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

    Click Edit HTML CSS button

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

    Find page.contact.liquid

  4. Choose one of the following options:

Create a contact form template

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

    Click Online Store then Themes

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

    Click Edit HTML CSS button

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

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

    Create a contact page template

  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.

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

    {{ page.content }}
    
  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>
    
  8. Click Save to confirm the changes to your template.

Information

You can add more fields to your contact form template after you create it.

Set your contact 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.

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

    Click Online Store then Pages

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

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

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

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

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

Contact form example

View contact form submissions

Your contact form sends all submissions to the Customer email address of your store. You can change the customer email address in the general settings of your Shopify admin.

Reminder

You can prevent your spam filter from blocking contact form submissions by adding mailer@shopify.com to your list of trusted email addresses.

Spam filtering

The contents of the contact[body] field of your contact form are analysed by Shopify's spam filters. If Shopify decides that the submission is spam, the subject of the email will be prefixed with [SPAM], but the email will still be sent. You can create an email filter to set aside emails with a subject that contains [SPAM].

Shopify sends all contact form submissions, including those marked as spam, to make sure that you don't miss any legitimate messages that are flagged as spam by mistake.

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.