While working with WordPress certainly can be challenging at times— there’s nothing you can’t really accomplish using it. That is NOT to say that it is the right CMS for the job every time, because well— It’s just not. However for general ease of use, it’s great. It’s customization ability and quickness from concept to market, whereby websites can essentially be rapidly deployed ensures its continued success. That brings us to contact forms.
At Beach Web Design we have a plethora of contact tools available to us, Including:
- Ninja Forms
- Gravity Forms
- Vanilla Forms
- Formidable
That’s just a few, however we typically choose to use the ever-reliable, easy to work with, easy to format, easy to create Contact Form 7! Yes, thank you Takayuki Miyoshi. Contact Form 7 is a free WordPress plugin, that if you are reading this article, you are probably using on your own WordPress Website. Another great thing about CF7 is the many fine extensions that are available in the WordPress repository that serve to extend CF7 functionality. There’s really not much you can’t do with it. IT’s truly a great plugin that deserves to be installed.
Contact Form 7 Success Style
Let’s get to the meat.
So you want to style the success message?
It’s a simple matter to override some CSS styles that are present from Contact Form 7. Some themes probably already override these default styles but if not, let’s do that ourselves. The code below only affects the Contact Form 7 success message.
div.wpcf7-mail-sent-ok { text-align:center;!important; border: 1px solid #56e2e0 !important; padding: 32px !important; font-size: 15px !important; font-weight: bold !important; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px 5px 5px 5px; background-color: #EBEBEB !important; background-image: url(https://beachwebdesigner.com/wp-content/uploads/2016/06/Header-Designs-3.png) !important; }
Notice we use the “Important” CSS directive to make sure that our styles are applied. This may not be 100% necessary, but it’s better to use it than not to. This simply ensures that your changes will continue look correct, no matter if plugin updates are changing something, etc. This is smart practice, especially if you are styling plugin output, and especially for an element that is normally hidden such as the CF7 success message.
We think our success message(s) for Contact Form 7 successful sends look pretty great! We use the BWD title bar image as a background and our tertiary color for the border, and the border radius matches the buttons, etc. Of course you can style your contact form 7 messages any way you like! Hopefully this article helps someone! We appreciate you visiting the blog here are Beach Web Design. You can always join our newsletter if you like and enjoy articles like this one.
Cheers!
