border issue on contact form - shopify dawn

[michaeltt]

Hi Shopify Community,

I’m experiencing some issues with the styling of my contact form and would greatly appreciate some help.

Issues:

1. Double Borders on the Comment Box: The "Comment" text area displays a doubled border, even when it hasn't been clicked or focused. I'd like to fix this so it has a single consistent border.

2. Double Borders on the Phone Field When Clicked: The "Phone" field shows a doubled border when I click or focus on it. Again, I'd like the border to remain a single, consistent thickness throughout.

Requirements:

• Consistent Border Thickness: I need the borders for all fields (including the "Phone" and "Comment" fields) to be single and maintain a consistent thickness whether they are clicked or not.
• White Placeholder Text and Borders: The placeholder text and borders for all fields should be white, as the form has a dark background.
• Send Button: The "Send" button should remain the same — solid white with "Send" in black.

I’ve tried adjusting the CSS with border-width and box-shadow, but I can’t seem to remove the doubled borders on the "Comment" and "Phone" fields.

Any suggestions on how to resolve this would be greatly appreciated!

Thanks in advance for your help!

[BSSCommerce-B2B · Accepted solution]

@michaeltt ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before </body>

<style>
#ContactForm .field:before,
#ContactForm .field:after{
   display: none!important
}
#ContactForm-phone {
   border: 1px solid white!important;
}
</style>

Result for you:

[michaeltt]

this worked perfectly, thank you so much for your assistance

[BSSCommerce-B2B]

@michaeltt , glad to help you 😍