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:

#

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. Click into the Themes area of your admin;

  2. Click into the Template Editor;

  3. Under the list of Templates you will see a file called page.contact.liquid if one exists;

  4. #
  5. If the file is not there, then click here to start from scratch. If a page.contact.liquid file already exists, continue reading.

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

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

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

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

  10. 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:

Reminder

This is an unsupported customization. Learn more here ›

  1. Create your 'Contact Us' page
  2. Create an alternate page template called page.contact
  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 store admin, click on the Pages tab.
  2. Click on the Add page button.
  3. #
  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 page.contact

  1. From your store admin, go to the Themes page.
  2. Click on the Template Editor button.

    #
  3. Under the Templates folder, check to see that your theme does not supply you with a page.contact.liquid file. If it does, click on that to open it in the online code editor.

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

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

    #

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

  4. 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>
        </div>
    {% 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 %}
    </div>
    {% endif %}
     
    <div id="contactFormWrapper">
      <p>
        <label>Your Name:</label><br/>
        <input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe" />
      </p>
      <p>
        <label>Email:</label><br/>
        <input type="email" id="contactFormEmail" name="contact[email]" placeholder="john@example.com" />
      </p>
      <p>
        <label>Phone Number:</label><br/>
        <input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="555-555-1234" />
      </p> 
      <p>
        <label>Message:</label><br/>
        <textarea rows="15" cols="75" id="contactFormMessage" name="contact[body]" placeholder="Your Message"></textarea>
      </p>
      <p>
        <input type="submit" id="contactFormSubmit" value="SEND" />
      </p>            
    </div><!-- contactWrapper -->
    
    {% 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>
    
  5. 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 store admin, click on the Pages tab.
  2. Click on your 'Contact Us' page to open it.
  3. Scroll down to the Template section.
  4. In the drop-down menu, choose the page.contact template.

    #

Preview and test your contact form on your store!

Where can I see the submissions?

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

Reminder

To avoid contact submissions being blocked by your spam filter, you should make sure you add mailer@shopify.com 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