Form input require "Contact" page only working for email field

Highlighted
New Member
1 0 0

Hello,

I've been trying to use the "Contact" form Shopify provides on default, however it doesn't seem to force require "Name" and "Message". By default, it requires email to be filled out on submit as shown on the photo below. I am aware that I can add required in the input tag. However that can easily be manipulated by inspecting and editing the source in any browser. The email input field doesn't use required in input from what I can see, it does the check somewhere else and throws an error that it's invalid. How can I run force the other fields to be required without adding "required" in the input tag?

shopify.PNG

Have a look at my code below, happy for any help!

<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 %}
		<hr>
      <div class="contact-form form-vertical medium-up--one-half">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, 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 }} <span aria-hidden="true">*</span></label>
              <input
                type="text"
                id="{{ formId }}-name"
                name="contact[name]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'name' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-name-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'name' -%}
                <span id="{{ formId}}-name-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['name'] | capitalize }} {{ form.errors.messages['name'] }}.</span>
                </span>
              {%- 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">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="ContactFormFlavor">Preferred language</label>
          <select id="ContactFormFlavor" name="contact[language]">
            <option>English</option>
            <option>Swedish</option>
          </select>
        
          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }} <span aria-hidden="true">*</span></label>
          <textarea rows="6" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]" 
           autocorrect="off"
           autocapitalize="off"
           aria-required="true"{% if form.body %}{{ form.body }}{% endif %}
                {%- if form.errors contains 'message' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-message-error"
                {%- endif -%}
                ></textarea>
              {%- if form.errors contains 'message' -%}
                <span id="{{ formId}}-message-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['message'] | capitalize }} {{ form.errors.messages['message'] }}.</span>
                </span>
              {%- endif -%}
        
        <div style="text-align: center; width: 100%;">
          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
        </div>

        {% endform %}
      </div>


    </div>
  </div>
</div>
0 Likes