Making fields on the minimal theme contact form mandatory

[stoveguy]

Hi Guys,

Hope someone can help me.

How can I make my contact form fields required on my contact page. I have the minimal theme.

<div class="grid">

  <div class="grid__item post-large--two-thirds push--post-large--one-sixth">

    <div class="section-header">
      <h1 class="section-header--title">{{ page.title }}</h1>
    </div>

    <div class="rte">
      {{ page.content }}
    </div>

    <div>
      
      {% form 'contact' %}

        {% if form.posted_successfully? %}
          <p class="note form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}

        {{ form.errors | default_errors }}

        {% assign name_attr = 'contact.form.name' | t | handle %}
        <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
        <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">

        <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
        <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

        {% assign name_attr = 'contact.form.phone' | t | handle %}
        <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
        <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

        <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
        <textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

        <input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">

      {% endform %}
      
   </div>
 </div>
</div>

Thanks in advance.

[gina-gregory · Accepted solution]

The quickest and easiest way would be to add a 'required' attribute to those inputs.

<input required type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">

The browser will stop the submission of the form and show an error if the required field is not filled out.

[stoveguy]

Thanks for that.

Very easy, and did the job.