How can I add a white background to my contact form fields?

Store Design
,

Topic summary

A user seeks help adding white backgrounds to contact form input fields on their Shopify store.

Solution Provided:
A PageFly support representative provides CSS code to be added to the theme’s base.css file, targeting specific form elements:

  • Input fields for name, email, phone
  • Textarea for the contact form body
  • Uses background: white !important; declaration

Follow-up Request:
The user asks how to make an image span the full width of the page and remove white space above it.

Additional CSS Solutions:
Two options are offered:

  1. Remove top padding above the image using padding-top: unset !important;
  2. Make the image fill the page width with additional CSS targeting the page width container and grid display properties

The conversation demonstrates a typical CSS customization workflow: editing theme code files and adding custom styles to modify Shopify store design elements.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

How can I add a white background to the fields of my contact form? Can I add some code to the custom CSS in Onlineshop ➔ Edit ➔ go to the page?

URL: https://taneraskin.com/pages/kontakt

xoxo

Isabelle

2

Hi @isabellemaria ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

input#ContactForm-name,
input#ContactForm-email,
input#ContactForm-phone,
textarea#ContactForm-body{
    background: white !important;
}

PageFlyVictor_0-1677715108700.png
PageFlyVictor_0-1677715108700.png782×278 4.21 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

Amazing, thank you!!

Do you also know if I can make to image bigger so it goes from the complete left to right side and has no white space above it (besides the header)

4

Hi @isabellemaria ,

Your image is in a block with the text so I think it’s best to stay the same size. and here’s how to remove the white space above the image

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.section-template--17813028241676__main-padding {
   padding-top: unset !important;
}

If you still want the image to fill the width of the page and contact page look like image I attached below, you can use this code:

.page-width.page-width--narrow.section-template--17813028241676__main-padding {
    max-width: unset !important;
}

.page-width.page-width--narrow.section-template--17813028241676__main-padding > div > p:not(:nth-child(1)) {
    justify-content: center;
}

.page-width.page-width--narrow.section-template--17813028241676__main-padding > div {
    display: grid;
    justify-items: center;
}

.page-width.page-width--narrow.section-template--17813028241676__main-padding > div > p:nth-child(1) >img{
    width: auto;
}