Styling Contact Form 7 Error Output

Good afternoon all!

I was busy building a website for my new business (stay tuned.) As usual, I am using the fantastic Contact Form 7 plugin, which basically lets you do anything as long as you realize that! Anyway— the error output just wasn’t cooperating or jiving with the design at all! Probably because it’s a Bootstrap design, and I was and am using Bootstrap columns to make the contact form layout pleasing, and responsive. (Who else is tired of a long, boring contact form?)

This led to issues with the display of the Contact Form 7 error output messages. I decided wouldn’t this message look nice stuck to the bottom of the screen, almost like a Windows tray message. Users are certainly used to looking there anyway! That gave me a bit of inspiration, and with the help of some colorful choices, I quickly came up with a solution I liked.

Now this took a few minutes to find out what class and elements were being used by Contact Form 7 to output these messages, but using the element inspector in Firefox quickly let me find that out. Here’s the CSS I decided to use instead of the default which was bunched up and obscured due to the columnar layout I had decided to use.

CSS Source Code

div.wpcf7-response-output  {
  position: fixed!important;
  bottom:12px!important;
  right: 12px!important;
  padding: 6px!important!
  color:#ffab00!important;
  background-color:#fff8e1!important;  
  border: 2px solid #ffe082!important;
  -webkit-border-radius: 4px!important;
  -moz-border-radius: 4px!important;
  border-radius: 4px!important;
  font-weight:bold!important;
  -webkit-box-shadow: 6px 4px 9px 3px #c1c1c1c!important;
  box-shadow: 6px 4px 9px 3px #c1c1c1c!important;
  z-index:99999;
}

The above CSS will output the messages at the lower right of the browser window, and out of way but still very noticeable. It’s also animated, but not sure if that’s something to do with the framework or theme I am using on this build, or Contact Form 7 itself.

Enjoy! Here’s an image of what it looks like in action.