Contact form - Required and Optional Fields

Shopify Discussion
, ,

Topic summary

A user working with Shopify’s Providence theme is trying to make Name, Phone, and Product Code fields required on their contact form, while making the Email field optional. Previously attempted solutions (adding “required” attribute, changing IDs, adding required classes) have not worked.

Solutions Provided:

  • RockTechnolabs shared updated code that adds the required attribute directly to the input fields for Name, Phone, and Product Code in the form template
  • The solution maintains the Email field without the required attribute, making it optional
  • Code modifications involve editing the Liquid template file with proper HTML5 required attributes

Additional Resource:

  • Jahid-KlinKode referenced a YouTube tutorial addressing similar required field issues in Shopify’s Dawn theme (though the original poster uses Providence theme)

Status: The discussion appears to have potential solutions provided, but no confirmation yet from the original poster on whether the fixes resolved the issue.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi Shopify experts,

I am using Providence theme and I would like to make the fields (Name, Phone and Product Code) on my contact form required. I have tried the solutions shared in the community (e.g. adding “required” in input, changing “id” to “required id”, and adding required class=“required”) but none of them work, the form can still be submitted without entering these information.

Also, is there a way to change Email to be optional to fill in? Currently Email is the only mandatory field in my form and it needs to be input in the right format (i.e. including @) .

Here is the coding of my form:

{% render ‘content-open’, class: ‘column-max’, sidebar: false %}

{% render ‘page-header’, title: page.title %}

{% render ‘separator’ %}

{{ page.content }}

{% render ‘separator’, class: ‘margin-top margin-bottom hide-for-large’ %}

{% form 'contact' %}

{% if form.posted_successfully? %}

{{ 'contact.form.posted_successfully' | t }}
{% endif %}

{% render ‘form-errors’, form: form %}

Name: {% render 'field-error-message', form: form, field: 'name' %}
Phone number:

{% render ‘field-error-message’, form: form, field: ‘phone’ %}

Email address: {% render 'field-error-message', form: form, field: 'email' %}

Please enter the product code you would like to request. {% if form.body %}{{ form.body }}{% endif %} {% render 'field-error-message', form: form, field: 'body' %}
{{ 'contact.form.submit' | t }}

{% endform %}

{% render ‘content-close’, sidebar: false %}

2

Hi @Crystal_ZP

{% render ‘content-open’, class: ‘column-max’, sidebar: false %}

{% render ‘page-header’, title: page.title %}

{% render ‘separator’ %}

{{ page.content }}

{% render ‘separator’, class: ‘margin-top margin-bottom hide-for-large’ %}

{% form 'contact' %}

{% if form.posted_successfully? %}

{{ 'contact.form.posted_successfully' | t }}
{% endif %}

{% render ‘form-errors’, form: form %}

Name: {% render 'field-error-message', form: form, field: 'name' %}
Phone number:

{% render ‘field-error-message’, form: form, field: ‘phone’ %}

Email address: {% render 'field-error-message', form: form, field: 'email' %}

Please enter the product code you would like to request. {% if form.body %}{{ form.body }}{% endif %} {% render 'field-error-message', form: form, field: 'body' %}
{{ 'contact.form.submit' | t }}

{% endform %}

{% render ‘content-close’, sidebar: false %}

Try this code.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Rock Technolabs

3

Hey @Crystal_ZP , resolve the issue of contact page form fields not being required in Shopify’s Dawn theme by following the steps in this YouTube video: https://www.youtube.com/watch?v=0LI7iyHABpo