Add border to input fields in Contact Page

Store Design
1

Hi there,

need some help designing my contact us submission form.

So I figured out how to change the style of the “Name” and “E-Mail” input field, but don’t know how to do the same with the "Category" field and “Message” field.

Also, do you know how to add a border or different background colour to the overall contact form?

Right now it looks like this:

tomorrowgolf_0-1615724975678.png
tomorrowgolf_0-1615724975678.png1137×641 19.2 KB

Thank you!

This is the code:

{{ page.title }}

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid red; border-radius: 4px; } input[type=email] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid red; border-radius: 4px; }
{% if page.content != blank %}
{{ page.content }}
{% endif %}

{% form ‘contact’ %}
{% if form.posted_successfully? %}

{{ 'contact.form.post_success' | t }}

{% endif %}

{{ form.errors | default_errors }}

Your name
Your email (required)
How can we help you?

Your message

{% if form.body %}{{ form.body }}{% endif %} {% endform %}
1 Like
2

@tomorrowgolf

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

3

@KetanKumar

Thanks a lot for your message!

This is the URL: https://tomorrowgolf.com/pages/contact-us
PWD: letsmakeitbig

4

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#contact_form{
    padding: 12px;
    background: #dde4e2;
    border: 1px solid #000000;
}
3 Likes
5

Hello @Kinjaldavra and @KetanKumar

I’m looking into adding a 1 px border color #a6b4b3 border around the input fields not the full form, please can you help with this.

I have 2 different contact form templates.

https://namat.sa/pages/contact-us

page.contact.liquid

https://namat.sa/pages/bespoke-orders

page.contact-bespoke.liquid

UPDATE: I was able to modify the borders, but I had to edit each row under the contact template. is there a fix to write the code once?