Updating Contact Us Form Fields - Studio Theme

Store Design
, , ,

Topic summary

A user shares their custom solution for modifying the contact form in Shopify’s Studio theme. The modifications include:

Key Changes:

  • Split the name field into separate “First Name” and “Last Name” fields
  • Added a new field for order numbers
  • Made first and last name fields required

Implementation:
The solution involves editing Liquid template files with custom code that includes error handling for the new fields. The user provided code snippets and screenshots showing exactly where to insert the modifications in the theme files.

Context:
This is a community contribution rather than a help request. The user is sharing accumulated customization knowledge from their Shopify experience to help others who want similar contact form functionality.

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

Hi guys,

Just thought I’d share what I did to get my contact form to be first name / last name and include a field for an order number. First and Last name are also required. Screenshots of where I put it in the liquid files.


        

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

        
          
          
          {%- if form.errors contains 'family_name' -%}
            <small>
              {{ 'accessibility.error' | t }}
              
                {%- render 'icon-error' -%}
                {{- form.errors.translated_fields.family_name | capitalize }}
                {{ form.errors.messages.family_name -}}
              
            </small>
          {%- 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 -%}

Screenshot 2023-04-19 at 11.05.46 pm.png
Screenshot 2023-04-19 at 11.05.46 pm.png1602×880 30.6 KB

Screenshot 2023-04-19 at 11.06.48 pm.png
Screenshot 2023-04-19 at 11.06.48 pm.png1940×1504 452 KB

Screenshot 2023-04-19 at 11.07.46 pm.png
Screenshot 2023-04-19 at 11.07.46 pm.png1656×1448 368 KB

1 Like
2

Hi @OC4
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi, this is a solution I was offering, not asking for. I have asked quite a few questions since joining shopify i thought i’d add some custom things i’ve done along the way.