Skip to content

Instantly share code, notes, and snippets.

@tjmapes

tjmapes/page.contact

Last active Sep 1, 2020
Embed
What would you like to do?
Shopify contact us form - debut theme - with order number custom field
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>
{% if page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% endif %}
<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', 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[name]">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input required type="email" id="{{ formId }}-email" name="contact[email]" autocorrect="off" autocapitalize="off" 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 }}-order" class="hidden-label">Order Number:</label>
<input type="text" id="{{ formId }}-order" name="contact[order]" placeholder="#1234">
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[phone]" pattern="[0-9\-]*" >
<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}<span aria-hidden="true">*</span></label>
<textarea required rows="10" id="{{ formId }}-message" name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.