How can i make a contact form field to a requiered field? The used theme is "Dawn"

Technical Q&A

Topic summary

A user seeks to make multiple contact form fields (Name, How did you find us?, What is the reason for your inquiry?, and Message) required in Shopify’s Dawn theme, similar to the default Email field validation. Despite trying various approaches including adding “required” attributes to input fields, the user struggled for 6 hours without success.

Solution Provided:

  • A contributor (PageFly-Richard) offered replacement HTML code that implements the required field functionality
  • The original poster confirmed the solution works successfully

Additional Requests:

  • Another user asked for help making Name, Email, Company Name, and ABN fields required, sharing their code
  • A third user requested guidance on making fields required in their own contact form
  • A YouTube tutorial link was shared demonstrating how to make contact form fields mandatory in Dawn theme

Status: The original issue appears resolved, though similar questions from other users remain open for assistance.

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

Hey, I have searched the entire Internet but unfortunately found nothing suitable. I want to make the fields “Name”, “How did you find us?”, “What is the reason for you inquiry?” and “Message” mandatory fields, where an error message pops up if they are not filled in. This is already standard for the “Email” field. But I can’t do it with the other fields, no matter if I write “required” in the “input” fields or other things I read in communities. I’ve been stuck on this for 6 hours now. Please help!

This is the HTML Code:

Show More

{{ ‘section-contact-form.css’ | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } {%- endstyle -%}
{%- if section.settings.heading != blank -%} ## {{ section.settings.heading | escape }} {%- else -%} ## {{ ‘templates.contact.form.title’ | t }} {%- endif -%} {%- form ‘contact’, id: ‘ContactForm’, class: ‘isolate’ -%} {%- if form.posted_successfully? -%} ## {% render ‘icon-success’ %} {{ ‘templates.contact.form.post_success’ | t }} {%- elsif form.errors -%} ## {% render ‘icon-error’ %} {{ ‘templates.contact.form.error_heading’ | t }}

  • {{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}
    {%- endif -%}
Show More
Show More

{%- if form.errors contains ‘email’ -%} {{ ‘accessibility.error’ | t }} {%- render ‘icon-error’ -%} {{- form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email -}} {%- endif -%}

Show More
Show More
Show More
Show More

{%- endform -%} {% schema %} { “name”: “t:sections.contact-form.name”, “tag”: “section”, “class”: “section”, “disabled_on”: { “groups”: [“header”, “footer”] }, “settings”: [ { “type”: “text”, “id”: “heading”, “default”: “Contact form”, “label”: “Heading” }, { “type”: “select”, “id”: “heading_size”, “options”: [ { “value”: “h2”, “label”: “t:sections.all.heading_size.options__1.label” }, { “value”: “h1”, “label”: “t:sections.all.heading_size.options__2.label” }, { “value”: “h0”, “label”: “t:sections.all.heading_size.options__3.label” } ], “default”: “h1”, “label”: “t:sections.all.heading_size.label” }, { “type”: “select”, “id”: “color_scheme”, “options”: [ { “value”: “accent-1”, “label”: “t:sections.all.colors.accent_1.label” }, { “value”: “accent-2”, “label”: “t:sections.all.colors.accent_2.label” }, { “value”: “background-1”, “label”: “t:sections.all.colors.background_1.label” }, { “value”: “background-2”, “label”: “t:sections.all.colors.background_2.label” }, { “value”: “inverse”, “label”: “t:sections.all.colors.inverse.label” } ], “default”: “background-1”, “label”: “t:sections.all.colors.label” }, { “type”: “header”, “content”: “t:sections.all.padding.section_padding_heading” }, { “type”: “range”, “id”: “padding_top”, “min”: 0, “max”: 100, “step”: 4, “unit”: “px”, “label”: “t:sections.all.padding.padding_top”, “default”: 36 }, { “type”: “range”, “id”: “padding_bottom”, “min”: 0, “max”: 100, “step”: 4, “unit”: “px”, “label”: “t:sections.all.padding.padding_bottom”, “default”: 36 } ], “presets”: [ { “name”: “t:sections.contact-form.presets.name” } ] } {% endschema %}

In Case u want to see it how it looks correctly, here is the CSS Code.

/* Custom Contact Form */
#ContactForm .field select {
    position: initial;
    width: 100%;
    padding: 1.5rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    letter-spacing: .04rem;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
2

Hi @merttrem ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
You can replace your code by below code:

Show More 

{%- if section.settings.heading != blank -%}## {{ section.settings.heading | escape }}{%- else -%}## {{ 'templates.contact.form.title' | t }}{%- endif -%} {%- form 'contact', id: 'ContactForm', class: 'isolate' -%} {%- if form.posted_successfully? -%}## {% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}{%- elsif form.errors -%}## {% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}
- {{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }} 
{%- endif -%}

{%- if form.errors contains 'email' -%} <small>{{ 'accessibility.error' | t }} {%- render 'icon-error' -%} {{- form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email -}} </small>{%- endif -%}

{%- endform -%}

{% schema %} { "name": "t:sections.contact-form.name", "tag": "section", "class": "section", "disabled_on": { "groups": ["header", "footer"] }, "settings": [ { "type": "text", "id": "heading", "default": "Contact form", "label": "Heading" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" }, { "type": "select", "id": "color_scheme", "options": [ { "value": "accent-1", "label": "t:sections.all.colors.accent_1.label" }, { "value": "accent-2", "label": "t:sections.all.colors.accent_2.label" }, { "value": "background-1", "label": "t:sections.all.colors.background_1.label" }, { "value": "background-2", "label": "t:sections.all.colors.background_2.label" }, { "value": "inverse", "label": "t:sections.all.colors.inverse.label" } ], "default": "background-1", "label": "t:sections.all.colors.label" }, { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 } ], "presets": [ { "name": "t:sections.contact-form.presets.name" } ] } {% endschema %} ```

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Thank you so much richard!! It works :heart_eyes:

4

Hi, I’m trying to do the same thing, but I can’t quite work out how the required tag works - I want to make the name, email, company name and ABN required - could you help me please? Thank you - this is my code

Show More

{{ ‘section-contact-form.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if section.settings.heading != blank -%}

{{ section.settings.heading }}

{%- else -%}

{{ ‘templates.contact.form.title’ | t }}

{%- endif -%}
{%- liquid
assign contact_form_class = ‘isolate’
if settings.animations_reveal_on_scroll
assign contact_form_class = ‘isolate scroll-trigger animate–slide-in’
endif
-%}
{%- form ‘contact’, id: ‘ContactForm’, class: contact_form_class -%}
{%- if form.posted_successfully? -%}

{% render ‘icon-success’ %}
{{ ‘templates.contact.form.post_success’ | t }}

{%- elsif form.errors -%}

{% render ‘icon-error’ %}
{{ ‘templates.contact.form.error_heading’ | t }}

  • {{ form.errors.translated_fields.email | capitalize }}
    {{ form.errors.messages.email }}

{%- endif -%}

{%- if form.errors contains ‘email’ -%}

{{ ‘accessibility.error’ | t }}

{%- render ‘icon-error’ -%}
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}

 {%- endif -%}

{%- endform -%}

{% schema %}
{
“name”: “t:sections.contact-form.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “Contact form”,
“label”: “Heading”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “background-1”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“presets”: [
{
“name”: “t:sections.contact-form.presets.name”
}
]
}
{% endschema %}

5

I would like to make some fields “required” in my own contact form. Can you explain how to make the proper edits?

6

Hi @merttrem , discover the solution to making contact page form fields mandatory in Shopify’s Dawn theme with this concise YouTube tutorial: https://www.youtube.com/watch?v=0LI7iyHABpo