Formulaire de contact style 7, Make it Beautiful par CSS3

Le formulaire de contact 7 est le plugin le plus populaire, facile à utiliser pour tous les sites Web WordPress. Donc, à chaque fois, nous devons personnaliser le CSS pour le rendre agréable. Mais cela prend du temps et c'est ennuyeux de créer du style à chaque fois pour chaque projet.

Voici donc un style très simple et prêt à l'emploi pour le formulaire de contact 7 en utilisant css3.

 /*********** Formulaire de contact 7 Style *************/
.wpcf7 entrée[type="texte"],
.wpcf7 input[type="email"],
.wpcf7 zone de texte {
    contour : aucun ;
    bloc de visualisation;
    largeur : 380 px ;
    rembourrage : 4px 8px ;
    bordure : 1 pixel en pointillé #DBDBDB ;
    couleur :#3F3F3F ;
    famille de polices : 'Droid Sans', Tahoma, Arial, Verdana sans empattement ;
    taille de police : 14 px ;
    /*border-radius*/
    -webkit-bordure-rayon : 2 px ;
    -moz-bordure-rayon : 2 px ;
    rayon de bordure : 2 px ;
    /*transition*/
    -webkit-transition : fond 0,2 s linéaire, boîte-ombre 0,6 s linéaire ;
    -moz-transition : arrière-plan 0,2 s linéaire, boîte-ombre 0,6 s linéaire ;
    -o-transition : fond 0,2 s linéaire, boîte-ombre 0,6 s linéaire ;
    transition : arrière-plan 0,2 s linéaire, boîte-ombre 0,6 s linéaire ;
}
.wpcf7 entrée[type="soumettre"],
.wpcf7 entrée[type="bouton"] { 
couleur d'arrière-plan :#725f4c ;
largeur : 100 % ;
text-align:center;
transformation de texte : majuscule ;
}

div#wpcf7-f201-p203-o1{ 
couleur de fond : #fbefde ;
bordure : 1px solide #f28f27 ;
rembourrage : 20 px ;
}
#wpcf7-f201-p203-o1 entrée[type="texte"],
#wpcf7-f201-p203-o1 input[type="email"],
# zone de texte wpcf7-f201-p203-o1 {
arrière-plan :#725f4c ;
couleur :#FFF ;
font-family:lora, "Open Sans", sans-serif; 
style de police : italique ;    
}
#wpcf7-f201-p203-o1 entrée[type="soumettre"],
#wpcf7-f201-p203-o1 entrée[type="bouton"] { 
couleur d'arrière-plan :#725f4c ;
largeur : 100 % ;
text-align:center;
transformation de texte : majuscule ;
}



div.wpcf7 {
    position : relative ;
    largeur : 440px ;
    indice z : 100 ;
    rembourrage : 30px !important;
    bordure : 1px solide #383838 ;
    arrière-plan : #D1D1D1 ;
    arrière-plan : -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    arrière-plan : -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    arrière-plan : -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    arrière-plan : dégradé linéaire répétitif (-45 deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px) ;
    -webkit-bordure-rayon : 8 px ;
    -moz-bordure-rayon : 8 px ;
    rayon de bordure : 8 px ;
    -webkit-box-shadow : 0px 1px 6px #3F3F3F ;
    -moz-box-shadow : 0px 1px 6px #3F3F3F ;
    boîte-ombre : 0px 1px 6px #3F3F3F ;
}

 div.wpcf7:après {
    arrière-plan :#F9F9F9 ;
    marge : 10px ;
    position : absolue ;
    contenu :" ";
    bas : 0 ;
    gauche : 0 ;
    droite : 0 ;
    haut : 0 ;
    indice z : -1 ;
    bordure : 1px #E5E5E5 solide ;
    -webkit-bordure-rayon : 8 px ;
    -moz-bordure-rayon : 8 px ;
    rayon de bordure : 8 px ;
}

 entrée[type=soumettre] {
    curseur:pointeur ;
    arrière-plan : aucun ;
    bordure : aucune ;
    font-family:'Alice', serif;
    couleur : #767676 ;
    taille de police : 18 px ;
    rembourrage : 10px 4px ;
    bordure : solide 1px #E0E0E0 ;
    texte-ombre : 0px 1px 1px #E8E8E8 ;
    arrière-plan : RVB (247, 247, 247) ;
    arrière-plan : -moz-linear-gradient(haut, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1 )));
    arrière-plan : -webkit-linear-gradient(haut, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : -o-linear-gradient(top, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : -ms-linear-gradient(haut, rgba(247, 247, 247, 1) 1 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : dégradé linéaire (haut, rgba (247, 247, 247, 1) 1 %, rgba (242, 242, 242, 1) 100 % );
    -webkit-bordure-rayon : 5 px ;
    -moz-bordure-rayon : 5 px ;
    rayon de bordure : 5 px ;
    -webkit-box-shadow : 0px 1px 1px #FFF encart, 0 0 0px 5px #EAEAEA ;
    -moz-box-shadow : 0px 1px 1px #FFF encart, 0 0 0px 5px #EAEAEA ;
    box-shadow:0px 1px 1px #FFF encart, 0 0 0px 5px #EAEAEA;
    -webkit-transition : tous les 0,2 s linéaires ;
    -moz-transition : tous les 0,2 s linéaires ;
    -o-transition : toutes les 0,2 s linéaires ;
    transition : toutes les 0,2 s linéaires ;
}
entrée[type=soumettre] :hover {
    couleur : #686868 ;
    border-color : #CECECE ;
    arrière-plan : RVB (244, 244, 244) ;
    arrière-plan : -moz-linear-gradient(haut, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1 )));
    arrière-plan : -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    fond : -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    arrière-plan : -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : dégradé linéaire (haut, rgba (244, 244, 244, 1) 0 %, rgba (242, 242, 242, 1) 100 %) ;
    -webkit-box-shadow : 0px 1px 1px #FFF encart, 0 0 0px 5px #E0E0E0 ;
    -moz-box-shadow : 0px 1px 1px #FFF encart, 0 0 0px 5px #E0E0E0 ;
    box-shadow:0px 1px 1px #FFF encart, 0 0 0px 5px #E0E0E0;
}
entrée[type=soumettre] :active, entrée[type=soumettre] :focus {
    position:relative ;
    haut : 1px ;
    couleur : #515151 ;
    arrière-plan : RVB (234, 234, 234) ;
    arrière-plan : -moz-linear-gradient(haut, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1 )));
    arrière-plan : -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    fond : -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    arrière-plan : -ms-linear-gradient(haut, rgba(234, 234, 234, 1) 0 %, rgba(242, 242, 242, 1) 100 %) ;
    arrière-plan : dégradé linéaire (haut, rgba (234, 234, 234, 1) 0 %, rgba (242, 242, 242, 1) 100 %) ;
    -webkit-box-shadow:0px -1px 1px #FFF encart, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px -1px 1px #FFF encart, 0 0 0px 5px #E0E0E0;
    box-shadow:0px -1px 1px #FFF encart, 0 0 0px 5px #E0E0E0;
}