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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024