Customize the text color of a contact form

Solved

Customize the text color of a contact form

ActivAdv
Tourist
4 0 1

Hi, im working on a theme section template by GemPages but i have a problem:

ActivAdv_0-1719243166566.png


I'd like to have the text color in black for each of the 3 fields, but the most important issue is the email field.

Seems that the color of the cursor and the text is white...

How could i solve it?

Section preview: https://mockstyle.com/a/gempages?version=v7&shop_id=516242170353550504&theme_section_id=519612440602...

Thanks!

Accepted Solution (1)

BSSCommerce-B2B
Shopify Expert
551 110 133

This is an accepted solution.

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

Step 2: Search file gp-global.css, 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

#contact_form input, #contact_form textarea {
    color: #000 !important;
}

Here is result: 

BSSCommerceB2B_1-1719244014962.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

View solution in original post

Replies 5 (5)

BSSCommerce-B2B
Shopify Expert
551 110 133

This is an accepted solution.

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

Step 2: Search file gp-global.css, 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

#contact_form input, #contact_form textarea {
    color: #000 !important;
}

Here is result: 

BSSCommerceB2B_1-1719244014962.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

BSS-TekLabs
Shopify Expert
391 123 131

Add the following code snippet to the file theme.css or base.css.


input[type='email']{

color: var(--g-c-text-1, text-1)

}

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

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


BSS Commerce - Full-service eCommerce Agency

Made4uo-Ribe
Shopify Partner
6827 1629 2007

Hi @ActivAdv 

Check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

input.gp-form-item, textarea.gp-form-item {
color: black !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1719244926656.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

ActivAdv
Tourist
4 0 1

thankyou guys, o solved the problem following your solutions!!
Thanks so much

GemPages
Shopify Partner
5621 1261 1230

Hi @ActivAdv,

At GemPages, adding custom CSS to an Email element by follow these steps:

  1. Open the Editor: Select the page you want to edit from the GemPages Dashboard and open it in the editor
  2. Right Click to element you want add custom CSS: In the left sidebar, navigate to the "Advanced" tab.
    GemPages_0-1719296833669.png

     

  3. Add CSS color:#000!important
    GemPages_1-1719296872056.png

     

    Hope this can help you,
    Best regards,
    GemPages Support Team
 
 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center