Changing Contact Form Submit Button

erinnicolepratt
(@erinnicolepratt)

1 year, 1 month ago

Can someone please check my code? I am trying to change the color of my submit button and also add a border around the email field to match the other fields. I’m not having luck!

Here’s the page: https://theclbgroup.com/contact/

And here’s my code:

form.wpcf7-form input.wpcf7-form-control.wpcf7-submit {
background-color: #d59541;
color: #fff;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}

form.wpcf7-form input[type=”text”],
form.wpcf7-form input[type=”email”],
form.wpcf7-form textarea {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

(@lukeest)

We recently worked through this exact issue on our own site and here’s the CSS that worked perfectly for us to style the Contact Form 7 submit button and keep everything on-brand:

/* --- SUBMIT RED BUTTON STYLING --- */
.formbox__btn-calc,
.formbox__btn-mail,
.wpcf7-form-control.wpcf7-submit {
  background-color: #e30615 !important;
  border-color: #e30615 !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 20px !important;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
  min-width: 120px;
  width: auto !important;
  text-align: center;
}
.formbox__btn-calc:hover,
.formbox__btn-mail:hover,
.wpcf7-form-control.wpcf7-submit:hover {
  background-color: #cc0513 !important;
  border-color: #cc0513 !important;
}

Tips:

Swap #e30615 and #cc0513 for your own brand’s colors if needed.
The !important ensures your styles override any theme defaults.
This selector will style both the calculator and Contact Form 7 submit buttons for a consistent look.

This reply was modified 1 year, 1 month ago by Luke Stephens.

Viewing 1 replies (of 1 total)

The topic ‘Changing Contact Form Submit Button’ is closed to new replies.