Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify contact form validation snippet
{%- if form.posted_successfully? -%}
<p class="form-message form-message--success" tabindex="-1" data-form-status>
{{ success_message | default: 'contact.form.post_success' | t }}
</p>
{%- endif -%}
{% comment %} We need to add this so the errors are output in the right order {% endcomment %}
{% assign error_order = "author, email, body, password, form" | split: ", " %}
{%- if form.errors -%}
<div class="form-message form-message--error">
<h2 class="h3 form-message__title " tabindex="-1" data-form-status>{{ 'contact.form.error_heading' | t }}</h2>
<ul>
{% for error in error_order %}
{% for field in form.errors %}
{% if error == field %}
{% capture field_label %}
{% case field %}
{% when 'author' %}
{{ 'contact.form.name' | t }}
{% when 'body' %}
{{ 'contact.form.message' | t }}
{% else %}
{{ form.errors.translated_fields[field] }}
{% endcase %}
{% endcapture %}
<li>
{%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
{% comment %} the href should match the input's id {% endcomment %}
<a href="#{{ form_id }}-{{ field }}" class="form-message__link">{{ field_label | strip | capitalize }} {{ form.errors.messages[field] }}</a>
{%- endif -%}
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
{%- endif -%}
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.