Add 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, and then click Pages (or press G W P).

  2. Click Add 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 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.
    • Your phone number if you want customers to be able to reach you by phone.
  5. Click Save page to create your contact page.

When you've created your contact page, you should make sure that your theme has a contact form template, and then you can set your contact page to use the contact form template.

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:

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

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

  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

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

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

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

  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.

Did you know?

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

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.

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

  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 might 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.

If you want to use another email address, you can use a free online service like Wufoo or Jotform to create a custom contact form to embed on your contact page. Click here for more details on adding contact forms from a third-party service.

Note

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 analyzed 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.

Want to discuss this page?

Visit the Shopify Community