contact 7 form – Sparkle Themes https://sparklewpthemes.com Sparkle Themes - Best Premium and Free Clean WordPress Themes for Personal, Business and eCommerce Store Websites Fri, 02 Oct 2020 04:31:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.2 https://sparklewpthemes.com/wp-content/uploads/2020/08/16807461_198753970606487_7432317181345843399_n.png contact 7 form – Sparkle Themes https://sparklewpthemes.com 32 32 Contact form 7 style, Make it Beautiful by CSS3 https://sparklewpthemes.com/contact-form-7-style-make-it-beautiful-by-css3/ https://sparklewpthemes.com/contact-form-7-style-make-it-beautiful-by-css3/#respond Sun, 20 Aug 2017 16:34:20 +0000 https://sparklewpthemes.com/?p=1513 Contact form 7 is most popular plugin that is easy to use for all wordpress websites. So every time we have to customize css to make it nice. But It is time consuming and is annoying to create style every time for each project.

So here is very easy and ready to use style for contact form 7 using css3.

/********** Contact Form 7 Style *************/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    outline:none;
    display:block;
    width:380px;
    padding:4px 8px;
    border:1px dashed #DBDBDB;
    color:#3F3F3F;
    font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
    font-size:14px;
    /*border-radius*/
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    /*transition*/
    -webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
    -moz-transition:background 0.2s linear, box-shadow 0.6s linear;
    -o-transition:background 0.2s linear, box-shadow 0.6s linear;
    transition:background 0.2s linear, box-shadow 0.6s linear;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

div#wpcf7-f201-p203-o1{ 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif; 
font-style:italic;    
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}



div.wpcf7 {
    position: relative;
    width: 440px;
    z-index: 100;
    padding: 30px !important;
    border: 1px solid #383838;
    background: #D1D1D1;
    background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 6px #3F3F3F;
    -moz-box-shadow: 0px 1px 6px #3F3F3F;
    box-shadow: 0px 1px 6px #3F3F3F;
}

 div.wpcf7:after {
    background:#F9F9F9;
    margin:10px;
    position: absolute;
    content :" ";
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    border:1px #E5E5E5 solid;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

 input[type=submit] {
    cursor:pointer;
    background:none;
    border:none;
    font-family:'Alice', serif;
    color:#767676;
    font-size:18px;
    padding:10px 4px;
    border:1px solid #E0E0E0;
    text-shadow: 0px 1px 1px #E8E8E8;
    background: rgb(247, 247, 247);
    background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
input[type=submit]:hover {
    color:#686868;
    border-color: #CECECE;
    background: rgb(244, 244, 244);
    background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
    position:relative;
    top:1px;
    color:#515151;
    background: rgb(234, 234, 234);
    background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    -webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
} 
]]>
https://sparklewpthemes.com/contact-form-7-style-make-it-beautiful-by-css3/feed/ 0