Contact Form 7 CSS Skin
Here is a bit of css to override the default styling of this flexible form plugin.
08.07.12
Contact Form 7 is a super flexible form generator that we use on nearly every site but the default styling is non existent. Here is some CSS snippets to give you a great base for customising your forms (or if you just want them to look cleaner).
Add this to your theme’s CSS file
.wpcf7 input, .wpcf7 textarea {
width: 90%;
padding: 10px;
color: #8e8e8e;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
border: solid 1px #9f9f9f;
box-shadow: inset 2px 2px 8px #bababa;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.wpcf7 .wpcf7-list-item {
padding-left: 0;
margin-left: 0;
margin-right: 25px;
}
.wpcf7 .wpcf7-list-item input {
border: none;
padding-left: 0;
margin-left: 0;
}
.wpcf7 select {
outline: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active {
background: #ebf7f5;
outline: none;
}
.wpcf7 input.wpcf7-submit {
-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
transition: 0;
border: none;
position: relative;
color: #fff;
text-shadow: 1px -2px 0px black;
text-transform: uppercase;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
padding-top: 11px;
padding-bottom: 10px;
padding-left: 35px;
padding-right: 35px;
/* Gradient background */
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000));
background: -moz-linear-gradient(top, #4d1b5c, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#000000');
-ms-filter: "
progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#000000)"
;
/* Drop Shadow */
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* On Hover */
.wpcf7 input.wpcf7-submit:hover {
cursor: pointer;
text-decoration: none;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80));
background: -moz-linear-gradient(top, #4d1b5c, #6d2f80);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
}
/* On Click */
.wpcf7 input.wpcf7-submit:active {
top: 1px;
color: #d8c6e2;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));
background: -moz-linear-gradient(top, #4d1b5c, #4d1b5c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* CF7 Messages */
.wpcf7 .wpcf7-validation-errors {
border: none;
background-color: #f4ae46;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.wpcf7 .wpcf7-mail-sent-ok {
border: none;
background-color: #7ad33f;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.wpcf7 .wpcf7-mail-sent-ng {
border: none;
background-color: #cf2d38;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: white;
}
.wpcf7 span.wpcf7-not-valid-tip {
border: none;
background-color: #cf2d38;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
width: 180px;
color: white;
/* Drop Shadow */
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.wpcf7-form .fleft {
float: left;
}
.wpcf7-form .mright20 {
margin-right: 20px;
}
.wpcf7-form .mright40 {
margin-right: 40px;
}
.wpcf7-form .clear {
clear: both;
}
How about autofocus?
There isn’t an option for this as yet. But it can be done with a line of JQuery.
jQuery('.wpcf7-text:first').focus();
Loading GIF
You may also want to change the loading GIF, however as it’s embedded in the code you can’t change it with CSS.
You can create a custom loading gif at ajaxload.info or preloaders.net then add the below snippet into your functions.php file.
/* Custom AJAX Loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return get_bloginfo('stylesheet_directory') . 'https://d14pjowmeoxkey.cloudfront.net/images/ajax-loader.gif';
}
Keep Reading
We think you may like these
Free SVG QR Code Generator
No need to need to sign up, give away your email, or even pay just to download your QR code in a usable format like SVG.