Get buttons on contact form to have same border outline as rest of form

Store Design

Topic summary

A user seeks to match the border styling of their contact form’s submit button with the rest of the form elements.

Proposed Solutions:

Three community members offered CSS-based fixes, all involving editing the base.css file (or similar stylesheet) in the Shopify theme editor:

  • Option 1: Add a simple border: 1px solid black rule to button[type="submit"]
  • Option 2: Use box-shadow: 0px 0px 0px 1px black on .contact__button .button with additional hover state styling
  • Option 3: Target #ContactForm .button with background color and border properties using !important flags

Key Details:

  • All solutions require accessing Online Store → Themes → Edit Code in Shopify Admin
  • Code should be inserted at the bottom of the CSS file
  • Screenshots were provided showing the visual result of at least one solution

Status: Multiple working solutions provided; awaiting user confirmation of which approach worked best.

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

Hi, how can i ensure the send button on my contact form has the same border outline as the rest of the form?

thank you

Screenshot 2024-07-01 at 10.53.25 AM.png
Screenshot 2024-07-01 at 10.53.25 AM.png1544×772 7.08 KB

Shopify URL: https://65a186-44.myshopify.com/

Password: meerew

2

Hi @letsgetwasted , go to base.css file and add the following code :

button[type="submit"]{
  border : 1px solid black;

}

Result:

Abdosamer_0-1719803348465.png
Abdosamer_0-1719803348465.png924×502 3.52 KB

3
  1. In your Assets Folder locate ‘base.css’ file and at the bottom of the file add the below code
.contact__button .button{
  box-shadow: 0px 0px 0px 1px black;
  transition: border 100ms ease;
}

.contact__button .button:hover::after{
  box-shadow: none !important;
}

.contact__button .button:hover{
  border: 1px solid black;
}
4

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

Step 2: Search file 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

#ContactForm .button {
    background-color: #000 !important;
    color: #fff !important;
}
#ContactForm .button:hover {
    background-color: #000000a8 !important;
}

Here is result:

zakelijk.gif

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