Display error when Name field is left empty in Contact form same way as email field

BendersBakery
New Member
4 0 0

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 %}

Replies 2 (2)

PageFly-Richard
Shopify Partner
4079 913 1567

 

Hi @BendersBakery 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add required  to your email field to get this solved

<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 }}"
required
>

Simply add required to the email field exactly like your name field

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

BendersBakery
New Member
4 0 0

That makes the field email show same error as the Name when left empty and click submit.
But I would like the opposite result, I'd like when leaving the name and email empty display the error as in the video attached.