Contact Form 7 - Button Styling

Hi!

I recently added Contact Form 7 to my site and wanted to change the button color. I was able to successfully update majority of the button color from another post. I can’t seem to get rid of the red below the yellow. I’ve already tried the border-color and box-shadow css properties with no luck.

I’d love a second opinion on this since that’s my only blocker. Example below. Thank you!

image

Hi Vanessa,

Thank you for reaching out to us. The contact form button inherits the theme styling so you can change this by navigating to Theme Options > Buttons > Colors and set the Button Border and Button Bottom to transparent to remove the bottom border (see screenshot)

Alternatively you can choose the Flat button style to remove the Button Bottom via Buttons settings in Theme Options (see screenshot)

image

Hope this helps!

Awesome! That worked perfect. Thank you for such a detailed and informative response.

I noticed this bar right below the ‘Submit’ button - is there a way to adjust it so it’s hidden? Or only shown when someone had submitted a contact form? Example here, thank you!

Hey Vanessa,

This is a known issue and we’ve submitted this to our issue tracker so the developers will be made aware of it, you can follow this thread to fix this temporarily until a fix is released: Yellow border in all my Contact Form 7 sections

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

1 Like