border issue on contact form - shopify dawn

Store Design
, ,

Topic summary

Main issue: contact form fields in the Dawn theme showed double borders—always on the Comment textarea and on focus for the Phone input—on a dark-background form. Requirements included single, consistent borders at all times, white borders and placeholder text, and keeping the Send button as solid white with black text.

Previous attempts with CSS (border-width, box-shadow) didn’t eliminate the double borders.

Resolution: a theme edit was suggested and applied:

  • Admin → Online Store → Theme → Edit code
  • Open theme.liquid
  • Add custom code before

Outcome: the double borders were removed and the fields displayed consistent single borders, matching the white-on-dark styling. The original Send button styling remained unchanged. The solution was confirmed as working by the requester.

Notes: screenshots were provided to illustrate the issue and the successful result. Status: resolved; no open questions remain.

Summarized with AI on December 20. AI used: gpt-5.
1

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.

  1. 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!

Screenshot 2024-09-09 at 1.03.43 PM.png
Screenshot 2024-09-09 at 1.03.43 PM.png911×555 14.3 KB

2

@michaeltt ,

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

Step 2. Find the file theme.liquid.

Step 3. Add this code before

Result for you:

BSSCommerceB2B_0-1725852375134.png
BSSCommerceB2B_0-1725852375134.png1033×751 15.2 KB

3

this worked perfectly, thank you so much for your assistance

1 Like
4

@michaeltt , glad to help you :heart_eyes: