Custom Shopify contact forms without an app

Shopify themes come with a contact form built on {% form 'contact' %}. Shopify emails each message to your store's contact address, with hCaptcha checking for bots by default. The admin has no list of submissions, so a missed or deleted email is a lost message, and the form can't take a photo of a damaged order or a sketch for a custom piece.

If you only need more fields#

You may not need anything else. Shopify's own form accepts extra inputs named contact[...], and each label shows up in the email:

{% form 'contact' %}
  <label for="contact-email">Email</label>
  <input id="contact-email" type="email" name="contact[email]" required>
  <label for="contact-order">Order number</label>
  <input id="contact-order" type="text" name="contact[Order number]">
  <label for="contact-body">Message</label>
  <textarea id="contact-body" name="contact[body]" required></textarea>
  <button type="submit">Send</button>
{% endform %}

contact[email] is the only field Shopify requires. Every other name has to be unique within the form.

When you need a custom form#

A Nisuform form in a Custom Liquid section helps when you need the things Shopify's form doesn't do. Customers can attach up to 5 photos or PDFs on Pro. Every submission stays in an inbox you can search and export, so a deleted email doesn't lose a customer's message. You can run separate forms for wholesale, returns and custom orders, each with its own inbox. On Pro, each form can also post to Slack, Discord, Google Sheets or a webhook.

You don't install an app, and nothing runs in your store's admin.

1. Design the form#

   Create a form in Nisuform. Add your fields in the form builder, pick a theme and accent color to match your store, and save.

2. Copy the embed code#

   On the form's Setup tab, choose Site builder, pick any builder in the list and choose Copy the embed code. The code is the same for all of them.

3. Add a Custom Liquid section#

   In your Shopify admin, go to Online Store, Themes, Customize. Open the page template where the form goes, add a Custom Liquid section, paste the code and save.

4. Send a test#

   Open the page on your storefront, wait two seconds and send. The submission should be in your Nisuform inbox and your email within seconds.

A product inquiry form#

A Custom Liquid section on a product template can read the product it's shown on. This form sends the product's name and link with every question, and fills in the email of a signed-in customer:

<form action="https://api.nisuform.com/s/YOUR_FORM_KEY" method="POST">
  <input type="hidden" name="product" value="{{ product.title | escape }}">
  <input type="hidden" name="product_url" value="{{ shop.url }}{{ product.url }}">
  <label for="inquiry-email">Email</label>
  <input id="inquiry-email" type="email" name="email" value="{{ customer.email }}" required>
  <label for="inquiry-message">Question about {{ product.title | escape }}</label>
  <textarea id="inquiry-message" name="message" rows="4" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Ask a question</button>
</form>

Each question lands in your inbox with the product attached, so you can answer without asking which item they meant. The form posts without JavaScript, and customers see the Nisuform thank-you page afterwards. On Pro, a redirect can send them back to your store instead. For file uploads, add enctype="multipart/form-data" to the form and a file input with a name.

Lock it to your store#

Add your myshopify.com address and your custom domain, with and without www, to the form's allowed websites. Other sites then can't post to your endpoint. Shopify's hCaptcha doesn't cover a form that posts elsewhere, so spam is filtered on the Nisuform side with a honeypot, a fill-time check, rate limits, and link and duplicate checks. If spam still gets through, turn on Cloudflare Turnstile.