Hi, I am using the debut theme and I would like to add an order number field to the contact form. can someone please help me with that?
example below
Topic summary
A Shopify store owner using the Debut theme needs help adding an order number field to their contact form.
Solution Provided:
KetanKumar offers step-by-step assistance by:
- Requesting the site URL and contact form code
- Providing custom code snippets to add the order number field
- Sharing a Shopify tutorial link for adding custom fields to contact forms
Implementation Details:
- ColombiaStudio shares their contact form code (page.contact template)
- KetanKumar provides updated code with the new order number field
- A follow-up request addresses alignment: making the order number and phone fields display side-by-side like the name and email fields
- KetanKumar delivers revised code to fix the layout
Outcome:
The issue appears resolved, with ColombiaStudio thanking KetanKumar for the solution. An additional community member suggests a YouTube tutorial covering various contact form customizations (dropdowns, radio buttons, checkboxes, text fields).
Note: The conversation includes code snippets and screenshot references that are central to implementing the solution.
1 Like
Sorry for facing this issue, it’s my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 
Please share your site URL,
So I will check and provide a solution here.
or
are you able to code try this
https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form
1 Like
@ColombiaStudio - can you add me to staff? I will add new field in your contact form
can you please share contact us page code so i will update here
1 Like
{{ page.title }}
{% if page.content.size > 0 %}
{{ page.content }}
{% endif %}
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
{{ 'contact.form.name' | t }}
{{ 'contact.form.email' | t }} *
{%- if form.errors contains 'email' -%}
{{ 'general.accessibility.error' | t }}
{% include 'icon-error' %}
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
{%- endif -%}
{{ ‘contact.form.phone’ | t }}
{{ ‘contact.form.message’ | t }}
{% if form.body %}{{ form.body }}{% endif %}{% endform %}
1 Like
Thanks can you please add this code
# {{ page.title }}
{% if page.content.size > 0 %}
{{ page.content }}
{% endif %}
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
{%- if form.errors contains 'email' -%}
{{ 'general.accessibility.error' | t }}
{% include 'icon-error' %}
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
{%- endif -%}
{% endform %}
1 Like
Hi, thank you for the code and one last thing is how do I align the order number and phone just like how name and email is? shown image below
1 Like
thanks for update please update
# {{ page.title }}
{% if page.content.size > 0 %}
{{ page.content }}
{% endif %}
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
{%- if form.errors contains 'email' -%}
{{ 'general.accessibility.error' | t }}
{% include 'icon-error' %}
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
{%- endif -%}
{% endform %}
1 Like
Thank you so much
1 Like
it’s my pleasure to help us
Hey @ColombiaStudio , dive into the world of customizing Shopify contact forms with this insightful YouTube video, covering text, dropdowns, radio buttons, and checkboxes:
