Hi everyone, I have two customized contact forms on my website (www.uncleervins.com) - one for general contact and one for businesses interested in our Wholesale program. You can fill it out and hit submit and get the response that a submission went through, but I do not receive an email that someone filled out the form. Is there something wrong with my code or something else on the Shopify backend?
Note: I use the Debut Theme.
General Contact Form Code:
<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>
</div>
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="ContactFormState">State</label>
<select id="ContactFormState" name="contact[State]">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</div>
<div class="grid__item medium-up--one-half">
<label for="ContactFormSubject">Subject</label>
<select id="ContactFormSubject" name="contact[Subject]">
<option>General Question</option>
<option>Braggin' Rights</option>
<option>Product Quality Issue</option>
<option>General Feedback/Comments</option>
<option>Fundraiser Program</option>
<option>Other</option>
</select>
</div>
</div>
<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
Wholesale contact form:
<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input required type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="ContactFormBusinessName">Business Name</label>
<input
type="text"
id="ContactFormBusinessName"
name="contact[BusinessName]"
/>
</div>
</div>
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="ContactFormTypeofStore">Type of Store</label>
<select id="ContactFormTypeofStore" name="contact[TypeofStore]">
<option>Select</option>
<option>Brick and Mortar</option>
<option>E-Commerce</option>
<option>Brick & Mortar and E-Commerce</option>
</select>
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>
</div>
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="ContactFormAddress">Address</label>
<input
type="text"
id="ContactFormAddress"
name="contact[Address]"
/>
</div>
</div>
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-third">
<label for="ContactFormCity">City</label>
<input
type="text"
id="ContactFormCity"
name="contact[City]"
/>
</div>
<div class="grid__item medium-up--one-third">
<label for="ContactFormState">State</label>
<select id="ContactFormState" name="contact[State]">
<option>AL</option>
<option>AK</option>
<option>AZ</option>
<option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>HI</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>IA</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>ME</option>
<option>MD</option>
<option>MA</option>
<option>MI</option>
<option>MN</option>
<option>MS</option>
<option>MO</option>
<option>MT</option>
<option>NE</option>
<option>NV</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NY</option>
<option>NC</option>
<option>ND</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VT</option>
<option>VA</option>
<option>WA</option>
<option>WV</option>
<option>WI</option>
<option>WY</option>
</select>
</div>
<div class="grid__item medium-up--one-third">
<label for="ContactFormZipCode">Zip Code</label>
<input
type="text"
id="ContactFormZipCode"
name="contact[ZipCode]"
/>
</div>
</div>
<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
Shopify Discussion
Partners and Developers
