How can I increase contrast in text fields on a contact form?

Store Design
1

Hello

As per image the contact form has little contrast. i want the text black and the field white but with maybe a border around each text field so it is more visible. searching the community and youtube has provided no success. i am a complete noob to coding and shopify. some similar questions in the community has resulted in the need to amend/add code to the theme.css???

Capture.PNG
Capture.PNG536×491 5.11 KB

The code for page.contact.liquid is as follows and i am using the “simple” theme.

{{ page.title }}

{{ page.content }}
{% form 'contact' %}

{% if form.posted_successfully? %}

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

{% endif %}

{{ form.errors | default_errors }}

{{ ‘contact.form.name’ | t }}

{{ ‘contact.form.email’ | t }}

{{ ‘contact.form.phone’ | t }}

{{ ‘contact.form.message’ | t }}

{% if form.body %}{{ form.body }}{% endif %}

{% endform %}

Any help would be awesome!

2

@GLHVending What’s your URL so we can see the CSS changes you need to make?

3

https://krazytown-vending.myshopify.com/

password should be:

xeutre

thanks for the help

4

@GLHVending

  1. Open theme code editor > Assets > theme.scss.css or thems.scss and paste the given lines at the bottom of the file:
form#contact_form input, form#contact_form textarea {
    border: 2px solid #f0f0f0;
}
form#contact_form input::placeholder, form#contact_form textarea::placeholder {
    color: #000;
}

https://prnt.sc/22jonb1

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

5

This was nearly perfect. however, the text when the “customer” types remains green. this is due to theme settings. see image “my name”. i would like the customers text to be black. color i think is #000. where can i find that in the coding?

Capture1.PNG
Capture1.PNG305×432 2.03 KB

6

@GLHVending

You can add this lines

#ContactFormPhone, #ContactFormEmail, #ContactFormName, #ContactFormMessage {
color: #000 !important;

}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

7

worked. saved. tested. thanks for the help. i like and accepted solution.