How can I make the Name, the Phone, and the Message fields all *required fields in a contact form?

Store Design

Topic summary

A user seeks to make Name, Phone, and Message fields required in a Shopify contact form (Email is already required by default).

Proposed Solution:

  • A responder provided modified Liquid/HTML code with required attributes added to the relevant input fields.
  • The code snippet includes form validation markup for the contact form template.

Current Status:

  • The original poster reports the suggested code did not work when implemented.
  • After sharing their store URL (wheelchairsuperstore.com), the responder checked the live site but could not see the updated code, suggesting it may have been applied to the wrong file.
  • The user confirmed reverting to the original code after the solution failed.

Unresolved: The discussion remains open with no working solution confirmed. The issue appears to be either incorrect file modification or implementation error rather than faulty code.

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

How can I make the Name, the Phone, and the Message fields all *required fields in a contact form? Email is already required

{{ ‘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;
}
.section-{{ section.id }}-margin {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
margin-bottom: {{ section.settings.margin_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;
}
.section-{{ section.id }}-margin {
margin-top: {{ section.settings.margin_top }}px;
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
{%- endstyle -%}

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

{{ section.settings.heading }}

{%- 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 }}

{%- endif -%}
{{ 'templates.contact.form.name' | t }}
{{- 'templates.contact.form.email' | t }} * {%- if form.errors contains 'email' -%} {{ 'accessibility.error' | t }} {%- render 'icon-error' -%} {{- form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email -}} {%- endif -%}
{{ 'templates.contact.form.phone' | t }}
{{- form.body -}} {{- 'templates.contact.form.comment' | t -}}
{{ 'templates.contact.form.send' | t }}
{%- endform -%}

{% schema %}
{
“name”: “t:sections.contact-form.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “checkbox”,
“id”: “narrow_width”,
“default”: true,
“label”: “Make section narrow width”
},
{
“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”: “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
},
{
“type”: “header”,
“content”: “Section margin”
},
{
“type”: “range”,
“id”: “margin_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Top margin”,
“default”: 0
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Bottom margin”,
“default”: 0
}
],
“presets”: [
{
“name”: “t:sections.contact-form.presets.name”
}
]
}
{% endschema %}

2

Hi @todf ,

May I suggest to use code below:

{{ '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;
	}
	.section-{{ section.id }}-margin {
		margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
		margin-bottom: {{ section.settings.margin_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;
		}
		.section-{{ section.id }}-margin {
			margin-top: {{ section.settings.margin_top }}px;
			margin-bottom: {{ section.settings.margin_bottom }}px;
		}
	}
{%- endstyle -%}

    

        {%- if section.settings.heading != blank -%}
        ## 
            {{ section.settings.heading }}
        
        {%- 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": "checkbox",
			"id": "narrow_width",
			"default": true,
			"label": "Make section narrow width"
		},
		{
			"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": "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
		},
		{
			"type": "header",
			"content": "Section margin"
		},
		{
			"type": "range",
			"id": "margin_top",
			"min": 0,
			"max": 100,
			"step": 4,
			"unit": "px",
			"label": "Top margin",
			"default": 0
		},
		{
			"type": "range",
			"id": "margin_bottom",
			"min": 0,
			"max": 100,
			"step": 4,
			"unit": "px",
			"label": "Bottom margin",
			"default": 0
		}
	],
	"presets": [
		{
			"name": "t:sections.contact-form.presets.name"
		}
	]
}
{% endschema %}
3

That did not work

4

Hi,

Could you share your store url? We will help to check it.

5

https://wheelchairsuperstore.com/

https://wheelchairsuperstore.com/pages/contact-us

6

Hi @todf ,

We checked your store. However, we don’t see code above. It seems you updated wrong file.

7

I changed it back to original code because it did not work