Shopify contact form validation snippet
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
{%- 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