How to code the contact form?

Store Design
,

Topic summary

A user is attempting to customize their store’s contact form to add a required “order number” field while maintaining the default Dawn theme styling. They’ve shared code that includes CSS and HTML for the contact form but are experiencing three main issues:

Current Problems:

  • Input field corners are rounded instead of squared (unlike the original form)
  • Text color is grey and not aligned to the top-left corner
  • Field labels don’t shrink when clicking on input fields as they do in the default form

Goal: Replicate the native Dawn theme contact form appearance while adding the order number field.

A community member has responded offering to provide theme-specific code once the exact theme version is confirmed. The discussion remains open, awaiting clarification on the theme being used before a solution can be provided.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi Community!

I am looking to personalize the contact form on my site to include a field for order number.

I tried the following code, and it is not entirely correct.

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

{%- form ‘contact’, id: ‘ContactForm’, class: ‘contact-form 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 -%}

First Name *

Last Name *

Email *

Phone Number *

Type of Service

Type of Session

Your Message

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

{%- endform -%}

I’m encountering several issues with the input fields on my form:

  1. Corners of Input Fields: The corners of the input fields are rounded, and I would prefer them to be squared, like the original form.
  2. Text Color and Position: The text inside the input fields is grey and not aligned to the top left corner as the original form.
  3. Field Title Behavior: When clicking on an input field, the field title does not shrink in size as on the original form.

All in all, I would love if the contact form is the same as inherent form for Dawn theme, but with an added required field for “order number”.

Thank you!

2

Hi @nancy5 ,

you can add whatever field you like to add to your contact form just need to confirm which theme you are using currently so that i will share the code accordingly.

Thanks

Thanks