How to code the contact form?

Store Design
,
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