How to make fields in contact form (Debut theme) mandatory?

Rsales
New Member
9 0 0

Hi all,

Could anyone please tell me how to make fields in a contact form (Debut theme) mandatory?

The email field is mandatory, with an asterisk. But that's it. I want all fields (so also 'name' and 'message' field) to be mandatory with an asterisk. I'm a bit shocked that simple things like this can't just be done by ticking a box... But alright. I guess it has to be fixed by coding.

I know that some sort of code has to go into 'page.contact-custom.liquid'. If anyone could tell me where to add what, you are a hero (or add them into my code below, so that I can just copy/paste that into my site!).

Thanks in advance!

 

<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 }}-message">{{ 'contact.form.message' | t }}</label>
<textarea required class:"required" 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
AvidBrio
Shopify Expert
125 6 12

 
@Rsales   you can add required tag into the all input filed  then all filed  are  required 

<input
class="form-field-input form-field-text {% if form.errors contains 'name' %}form-field-error{% endif %}"
id="contact_name"
name="contact[name]"
type="text"
value="{{ value }}" required>
If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
Rsales
New Member
9 0 0

Hi @AvidBrio , I just see this now so my response is very late. But that sounds great! Could you tell me where to put it? I don't really understand that part.

0 Likes
AvidBrio
Shopify Expert
125 6 12

@Rsales  hi 

 

 <input    required /> 

 you have to add  required  on word on input filed 

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
Rsales
New Member
9 0 0

I'm sorry, I just don't see what you mean. What is a "filed"? And I see "input" a lot of times in the sheet I pasted into this question. I just can't figure out where to put it and how... 

Would it be possible for you to copy-paste this whole thing, add the "required" and copy-paste it back as a response? That would be great!

<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 }}-message">{{ 'contact.form.message' | t }}</label>
<textarea required class:"required" 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
AvidBrio
Shopify Expert
125 6 12
 <input    required /> 

 

find 

<input 

then end of the

 /> 

add a required word that it @Rsales 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
Rsales
New Member
9 0 0

@AvidBrio  Thank you for your effort but... I really can't find/do it.  If you want: point it out in the code I pasted in. If not; thanks anyway!

0 Likes
NewUser5
New Member
1 0 0

Hi there, please tell me you found out how to do this? I can’t seem to follow the instructions you’re being given either..

0 Likes