Last active
September 1, 2020 19:47
-
-
Save tjmapes/a1782b228e14e4bdd08f55a1e10437f1 to your computer and use it in GitHub Desktop.
Shopify contact us form - debut theme - with order number custom field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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