Shopify Forms app - styling input background color

[khaidro]

Hello,

I currently have a "contact us" form set up using the Shopify Forms app. My website is dark themed and the default white input fields have too strong of a contrast.

Shopify site: https://hippothreads.com/pages/quote

I'm hoping to change the background color to something darker like #2A2A2A with #FFF text (see screenshot) but I can't figure out which class to apply the styling to. Could someone point me in the right direction? Thank you!

[BSSCommerce-B2B]

Hi @khaidro ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

#shopify-section-template--21628143697942__171890022514b6e03c form {
    --form-background-color: #2A2A2A !important;
    --form-text-color: #fff !important;
    --form-placeholder-color: #fff !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[khaidro]

Hi, thanks for your response. I tried putting the code into base.css (Using Dawn 2.0 theme) however the background color of the input still remains white, like your screenshot above. The result I'm looking to achieve is this below (with dark grey background #2A2A2A rather than white).

Is there anything else I can try? Thank you!

[niraj_patel]

@khaidro  add this CSS

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 input._formInputField_237zm_7 {
     background-color: #2A2A2A !important;
     color: #fff !important;
 }
 label._formInputFieldLabel_hmnh0_37 {
    color: #FFF !important;
 }
 ._textArea_17mgw_1 {
    background-color: #2A2A2A !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[khaidro]

Thanks for your response. I tried your code above in between the <style> tags, however the styling doesn't seem to have updated on the form itself.

[webdevbrighta]

any luck?