Hi,
I'm trying to make the Name field required on the contact form. I've achieved that, but would like to display error the same way that for the case when email is left empty instead of the one that's being displayed. Right now for the Name field a pop up appears saying "Please fill out this field" and don't let me submit, but when leaving empty the email it says: Please adjust the following and a error message appears on email field saying Email is invalid.
Could someone help?
Here is the code of my contact-form-custom.liquid
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
{%- if section.settings.heading != blank -%}
<h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.heading }}
</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
{%- endif -%}
{%- liquid
assign contact_form_class = 'isolate'
if settings.animations_reveal_on_scroll
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
endif
-%}
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
{%- if form.posted_successfully? -%}
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
{% render 'icon-success' %}
{{ 'templates.contact.form.post_success' | t }}
</h2>
{%- elsif form.errors -%}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
{% render 'icon-error' %}
{{ 'templates.contact.form.error_heading' | t }}
</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-name" class="link">
{{ form.errors.translated_fields.name | capitalize }}
{{ form.errors.messages.name }}
</a>
<a href="#ContactForm-email" class="link">
{{ form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email }}
</a>
</li>
</ul>
{%- endif -%}
<div class="contact__fields">
<div class="field field--with-error">
<input
autocomplete="name"
type="text"
id="ContactForm-name"
class="field__input"
name="contact[name]"
spellcheck="false"
autocapitalize="off"
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
aria-required="true"
required
{% if form.errors contains 'name' %}
aria-invalid="true"
aria-describedby="ContactForm-name-error"
{% endif %}
placeholder="{{ 'templates.contact.form.name' | t }}"
>
<label class="field__label" for="ContactForm-name">
{{- 'templates.contact.form.name' | t }}
<span aria-hidden="true">*</span>
</label>
{%- if form.errors contains 'name' -%}
<small class="contact__field-error" id="ContactForm-name-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">
{%- render 'icon-error' -%}
{{- form.errors.translated_fields.name | capitalize }}
{{ form.errors.messages.name -}}
</span>
</small>
{%- endif -%}
</div>
<svg style="display: none">
<symbol id="icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</symbol>
</svg>
<div class="field field--with-error">
<input
autocomplete="email"
type="email"
id="ContactForm-email"
class="field__input"
name="contact[email]"
spellcheck="false"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{% endif %}
placeholder="{{ 'templates.contact.form.email' | t }}"
>
<label class="field__label" for="ContactForm-email">
{{- 'templates.contact.form.email' | t }}
<span aria-hidden="true">*</span>
</label>
{%- if form.errors contains 'email' -%}
<small class="contact__field-error" id="ContactForm-email-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">
{%- render 'icon-error' -%}
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}
</span>
</small>
{%- endif -%}
</div>
</div>
<div class="field">
<div class="select">
<select
class="field_input select__select"
name="contact[reason]"
id="ContactForm-reason"
style="font-size: inherit;"
aria-required="true"
>
<option selected disabled>Reason for Contact</option>
<option value="General Question">General Question</option>
<option value="Problem with and order?">Problem with an order?</option>
<option value="Ambassador Program">Ambassador Program</option>
</select>
<svg class="icon-caret" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
<label class="form__label field__label" for="ContactForm-reason"> </label>
</div>
<div class="field">
<div class="select">
<select
class="field_input select__select"
name="contact[hear]"
id="ContactForm-hear"
style="font-size: inherit;"
aria-required="true"
>
<option selected disabled>How do you hear about us?</option>
<option value="Website">Website</option>
<option value="Google">Google</option>
<option value="Facebook">Facebook</option>
<option value="Instagram">Instagram</option>
<option value="TikTok">TikTok</option>
<option value="Other">Other</option>
</select>
<svg class="icon-caret" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
<label class="form__label field__label" for="ContactForm-hear"> </label>
</div>
<div class="field">
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-body">
{{- 'templates.contact.form.comment' | t -}}
</label>
</div>
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.contact-form.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Contact form",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.contact-form.presets.name"
}
]
}
{% endschema %}
