Shopify Forms app - styling input background color

Shopify Forms app - styling input background color

khaidro
Visitor
3 0 0

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!

 

khaidro_0-1718954683536.png

 

Replies 5 (5)

BSSCommerce-B2B
Shopify Partner
565 114 137

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: 

BSSCommerceB2B_1-1718955550099.png

 

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 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
khaidro
Visitor
3 0 0

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).

 

khaidro_0-1718956032804.png

Is there anything else I can try? Thank you!

techlyser_web
Shopify Partner
1849 345 373

@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>

techlyser_web_0-1718957964151.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
khaidro
Visitor
3 0 0

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.

 

khaidro_2-1718985070248.png

 

khaidro_1-1718985028390.png

 

webdevbrighta
Shopify Partner
5 0 0

any luck?