Shopify Development

Shopify Custom Contact Form Success, No Email? A Developer's Debugging Guide

Shopify admin notifications settings with contact form Liquid template
Shopify admin notifications settings with contact form Liquid template

The Frustrating Mystery: Custom Shopify Forms That Don't Email

As a Shopify migration expert at Shopping Cart Mover, we often encounter unique challenges when stores customize their themes and functionalities. One particularly perplexing issue that frequently surfaces in the Shopify community, and recently sparked a great discussion, is when a custom contact form proudly displays a "success" message, yet no notification email ever arrives in the inbox. It’s a classic head-scratcher, especially when the store's default contact form works flawlessly.

This exact scenario was highlighted by a community member, wearboco, who detailed their struggle with a multi-step custom contact form built on a modified Dawn theme. Despite using Shopify’s native {% form 'contact' %} Liquid tag, redirecting correctly, showing form.posted_successfully? as true, and displaying a success confirmation, the crucial notification email remained elusive. They had already checked the usual suspects: sender emails, spam folders, and confirmed the default form's functionality. So, what could be the underlying cause?

The Critical First Check: Is Your Form Really Talking to Shopify?

Before diving deep into Liquid code or JavaScript, the absolute first step is to confirm where your form is actually submitting its data. This might sound obvious, but it's a common oversight, as keenly pointed out by ThemeMend in the community thread. In wearboco's case, a quick inspection revealed the form was posting to an external service, Formspree (https://formspree.io/f/maeybedp), with fields like email and message – not Shopify's expected contact[email] and contact[body].

If your form is pointing to an external service, Shopify never even receives the submission, meaning no native notification can ever fire.

How to Verify Your Form's Submission Target:

  1. Open the page containing your custom form in your web browser.
  2. Right-click anywhere on the form and select "Inspect" (or "Inspect Element").
  3. In the developer tools panel, locate the
    tag.
  4. Examine its action="..." attribute.

If the action attribute points to an external URL (e.g., formspree.io, netlify.com, etc.):

  • The problem lies with that external service, not Shopify.
  • For Formspree specifically: Check if the form is confirmed (new forms often require a confirmation click on the first submission email). Verify the destination email, check submission limits, and always look at the Formspree dashboard's submission logs and your email's spam folder.
  • Solution: If you intend to use Shopify's native email notifications, you must update your form's action to submit to Shopify's default contact endpoint (typically handled automatically by {% form 'contact' %}) and ensure your field names conform to Shopify's contact[field_name] format.

Deep Dive: When Shopify's Native Form Still Fails

Assuming your form's action correctly points to Shopify, and you're using {% form 'contact' %}, there are still several subtle issues that can prevent email notifications from being sent.

1. The 'Hidden' Attribute vs. CSS display: none;

A crucial insight from the community discussion, particularly from M.Rahman and Ecom_swift_LLC, revolves around how you hide form fields. Using the native HTML hidden attribute on a

Quick Test: Temporarily make your contact[body] field visible and fill it with static text. If the email delivers, it strongly suggests the hidden attribute or dynamic JS updates were the culprit.

2. Shopify's Silent Spam Filtering

This is perhaps the most frustrating aspect: Shopify's internal spam filter can silently drop contact form submissions even when form.posted_successfully? returns true. As Ecom_swift_LLC explained, there's no log of these dropped submissions in the Admin, making debugging difficult.

Potential Triggers for Spam Filtering:

  • Minimal Fields: Stripping the form down to just contact[email] and contact[body] can be unusual enough to trigger filters. Consider adding contact[name], even if hidden via CSS.
  • Dynamically Filled Fields: A field that starts empty and is filled by JavaScript right before submission can resemble a honeypot anti-spam pattern, but inverted, making it suspicious.
  • Content of contact[body]: While Shopify's documentation states spam is usually flagged with [SPAM] in the subject, overly long bodies, suspicious links, or unusual content might lead to a silent drop. Testing with a shorter, plain-text body is a good isolation step.

3. Corrupted Notification Templates

Another often-overlooked possibility, as mentioned by Ecom_swift_LLC, is a broken or edited Liquid snippet within your Shopify notification settings. If the "Contact form" notification template (found under Settings > Notifications) contains errors, it can silently fail to render and send the email, even if the form submission itself was successful.

Action: Open this template in your admin, make a minor change (like adding a space), and try to save it. If it saves without errors, the template is likely fine. If it throws an error, you've found a critical issue.

Comprehensive Debugging Checklist for Developers

When facing this issue, follow these steps:

  1. Verify Form Action: Use browser developer tools to confirm your points to Shopify's native endpoint, not an external service.
  2. Inspect POST Payload: Compare the network POST request payloads of your working default form and your non-working custom form. Look for differences in field names (contact[email] vs. email), presence of contact[name], and the content of contact[body].
  3. Simplify and Test: Temporarily remove all JavaScript that modifies form fields. Use a simple, visible