Why not use Shopify's built-in contact form?

Shopify's default contact form is limited to name, email, and message fields. With FormsList, you can add custom fields (dropdowns, checkboxes, file URLs), get a submissions dashboard, set up integrations, and have better spam filtering.

Will this work with any Shopify theme?

Yes. The form uses standard HTML that works in any Shopify theme. Add it as a section for theme editor support, or paste the HTML directly into a page template or custom Liquid file.

Can I capture order-related information in the form?

Yes. Add hidden fields with Liquid variables like {{ customer.email }} or use a text input for order numbers. FormsList captures all named fields and displays them in your dashboard.

Intermediate6 minUpdated Mar 27, 2026

How to Add a Custom Contact Form to Shopify

Add a custom contact form to your Shopify store beyond the default contact page. Use Liquid templates with FormsList for full control over form fields and submissions.

Prerequisites

A Shopify store
A FormsList account (free)
Access to Shopify theme code editor

TL;DR

To add a custom contact form to Shopify beyond the default contact page, add an HTML form to a Liquid template with action set to `https://formslist.com/f/your-form-id`. FormsList handles submissions outside Shopify's built-in form system.

Create a FormsList form endpoint

Sign up for a free FormsList account and create a new form. Copy the endpoint URL. Using FormsList instead of Shopify's built-in contact form gives you custom fields, a submissions dashboard, integrations, and spam filtering.

Add the form to a Liquid template

Edit your Shopify theme to add a custom contact form. You can add it to a page template, a section, or create a new template. Go to Online Store > Themes > Edit Code in your Shopify admin.

{% comment %} sections/custom-contact-form.liquid {% endcomment %}
<div class="custom-contact-form" style="max-width: 600px; margin: 2rem auto; padding: 0 1rem;">
  <h2>{{ section.settings.heading | default: 'Get in Touch' }}</h2>

  <form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST">
    <div style="margin-bottom: 1rem;">
      <label for="name" style="display: block; font-weight: 600; margin-bottom: 0.25rem;">Name</label>
      <input type="text" id="name" name="name" required
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;" />
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="email" style="display: block; font-weight: 600; margin-bottom: 0.25rem;">Email</label>
      <input type="email" id="email" name="email" required
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;" />
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="subject" style="display: block; font-weight: 600; margin-bottom: 0.25rem;">Subject</label>
      <select id="subject" name="subject"
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
        <option value="General Inquiry">General Inquiry</option>
        <option value="Order Issue">Order Issue</option>
        <option value="Product Question">Product Question</option>
        <option value="Returns">Returns & Exchanges</option>
      </select>
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="message" style="display: block; font-weight: 600; margin-bottom: 0.25rem;">Message</label>
      <textarea id="message" name="message" rows="5" required
        style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"></textarea>
    </div>

    <!-- Pass shop info as hidden fields -->
    <input type="hidden" name="_source" value="shopify" />

    <!-- Redirect back to a thank-you page -->
    <input type="hidden" name="_redirect" value="{{ shop.url }}/pages/thank-you" />

    <button type="submit"
      style="padding: 0.75rem 2rem; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;">
      Send Message
    </button>
  </form>
</div>

{% schema %}
{
  "name": "Custom Contact Form",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Get in Touch"
    }
  ],
  "presets": [
    {
      "name": "Custom Contact Form"
    }
  ]
}
{% endschema %}

Add the section to a page

In the Shopify theme editor (Customize), navigate to the page where you want the form and add the 'Custom Contact Form' section. Alternatively, reference it directly in a page template using {% section 'custom-contact-form' %}.

Test and configure notifications

Submit a test message from your Shopify store and verify it appears in your FormsList dashboard. Enable email notifications to receive submissions at your support email. Connect Slack or Google Sheets for team visibility.