How to make my contact form fields to be * Required

Highlighted
New Member
7 0 0

Hey there, if you scroll down all the way from this page http://bagstra.myshopify.com/pages/contact-us you would see a Feedback Form, how do i set that in order for the form to be send out, the person must fill in the blanks for all the fields? or else i will be getting missing details and spammers from there... please help!

This is my current code for the contact form:

<div id="page" class="row">
  
  <div class="span12">
    <h1>{{ page.title }}</h1>
    <div class="page-with-contact-form">
      {{ page.content }}
            
        {% form 'contact' %}
        {% if form.posted_successfully? %}
        <div class="successForm feedback">
          <p>Thanks for contacting us! We'll get back to you as soon as possible.</p>
        </div>
        {% endif %}

        {% if form.errors %}
        <div class="errorForm feedback">
          <p>Oops, sorry. We were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}. Please correct the following and submit again:</p>
          {% for field in form.errors %}
            <p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
          {% endfor %}
        </div>
        {% endif %}

        <div id="contactFormWrapper">
          <p>
            <label>Name <font COLOR="#FF0000">*</font> :</label><br/>
            <input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe" />
          </p>
          <p>
            <label>Contact Number <font COLOR="#FF0000">*</font> :</label><br/>
            <input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="555-555-1234" />
          </p> 
          <p>
            <label>Email <font COLOR="#FF0000">*</font> :</label><br/>
            <input type="email" id="contactFormEmail" name="contact[email]" placeholder="john@example.com" />
          </p>
          <p>
            <label>Feedback:</label><br/>
            <textarea rows="15" cols="75" id="contactFormMessage" name="contact[body]" placeholder="What's on your mind?"></textarea>
          </p>
          <p>
            <input type="submit" id="contactFormSubmit" value="Send" class="btn" />
          </p>
        </div>
        {% endform %}
      
    </div>
  </div>
  
</div>

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
489 0 42

Hey there, you can add the 'required' attribute to each of the inputs if you're looking to make them required. 

Ex: 

<input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe"  required />

 

www.tetchi.ca | www.twitter.com/t3tchi
4 Likes
Highlighted
New Member
7 0 0

It works! Thanks Tetchi! :)

0 Likes
Highlighted
New Member
3 0 0

Hello can you help the same thing for me please? Here is my current 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: 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 }}</label>
<input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" 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">
<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="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" 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[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

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

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

0 Likes
Highlighted
New Member
2 0 0

Thanks, this worked for me too!

0 Likes