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