Shopify themes, liquid, logos, and UX
I would like to add required to the Name, Phone, and Message fields. Email is already required.
Here is my existing code.
<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]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}"> </div> <div class="grid__item medium-up--one-half"> <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label> <input type="email" id="{{ formId }}-email" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" 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">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span> {%- endif -%} </div> </div> <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label> <input type="tel" id="{{ formId }}-phone" name="contact[phone]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}"> <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label> <textarea 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>
Solved! Go to the solution
This is an accepted solution.
Hi, @digga ,
This is Evita from On The Map.
You can add required field inside input tag and textarea tag, like this:
<input type="tel" required id="{{ formId }}-phone" name="contact[phone]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}" >
Best, Evita
This is an accepted solution.
Hi, @digga ,
This is Evita from On The Map.
You can add required field inside input tag and textarea tag, like this:
<input type="tel" required id="{{ formId }}-phone" name="contact[phone]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}" >
Best, Evita
Thanks Evita
so simple just adding the word required so it goes from
id=
to
required id=
so easy thanks
Is there a way to do this without using the required attribute? This attribute forces the browser to use it's default error message which is not accessible. Any other JS techniques that I try to add do not validate that other fields are required.
Agreed. I cant find any information on how to use Shopify validation rules for other fields, other than the email field.
Hi @digga, watch this YouTube tutorial to find out how to make contact page form fields mandatory in Shopify's Dawn theme: https://www.youtube.com/watch?v=0LI7iyHABpo
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024