Customize contact form feilds to be filled + outline in dawn theme

Customize contact form feilds to be filled + outline in dawn theme

junglecatclub
Tourist
13 0 3

hello, i would like to customize all the imput feilds and also the button to have the cream fill and black outline like the example i have shown at the bottom, can anyone help with code for this?

thank you 🙂

Screenshot 2025-01-16 at 15.50.54.png

Replies 3 (3)

Moeed
Shopify Partner
6736 1820 2202

Hey @junglecatclub 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.field__input {
    background: #EEE9DD !important;
}
</style>

RESULT:

Moeed_0-1737007224907.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


DaisyVo
Shopify Partner
3690 403 489

Hi @junglecatclub ,

You can follow the steps here:

 

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

 

Here is the code for step 3:

form#ContactForm .field__input {
    background: #EEE9DD !important;
}

Here is the result:

DaisyVo_0-1737007827881.png

 

Please let me know if it works!

 

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

websensepro
Shopify Partner
1854 215 261

Hi @junglecatclub 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

 

.contact.page-width.page-width--narrow.section-template--20735956811981__form-padding input, .contact.page-width.page-width--narrow.section-template--20735956811981__form-padding .text-area, .contact.page-width.page-width--narrow.section-template--20735956811981__form-padding button {
    border: 1px solid black !important;
    background: #EEE9DD !important;
}

 

Result:

websensepro_0-1737009197152.png

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP