5 Estilos de Formulários de contato para Blogger

Konnichiwaa fadinhas e elfos! Como vocês estão? O meu post de como colocar fomulário de contato em página fixa, ajudou algumas pessoas. Recentemente percebi que tem algumas visitas e um aumento na taxa de rejeição, achei necessário trazer esse post, para as pessoas que gostaria de ter outro design de formulário poder ter opção de escolha, separei 5 designs, veja qual você prefere e personalize o seu! E então, let's go?



Se você ainda não colocou um formulário de contato na sua página, siga esse tutorial COMO COLOCAR UM FORMULÁRIO DE CONTATO PERSONALIZADO NA PÁGINA DO BLOG na parte de PERSONALIZANDO pare e venha para esse post! Caso você queira algum desses abaixo copie algum desses, okay? Vamos lá!

Vá em Layout, Editar HTML e procure por /b:skin , então acima dele cole alguma das personalizações abaixo, escolha o que mais gostar e salve!

Formulário de contato simples/cute

Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ display:none!important;} 
/*---- Compatible contact Form by WG -----*/ 
.contact-form-name, .contact-form-email, .contact-form-email-message { 
max-width: 350px; width: 100%; font-weight:bold; } 
.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XGq1jaalVgLnfUFc9hJwG0igZDyTwL-sCT3YXw3Hf26lSnB3oGo1LEnmEZLHxVSQvzbR6wvocHQytvquUIJ5QEVlCLuYDKsBdKN0G0hVcTjcrGTltiGDHBO5mFi2PxLMQiep4-N_v4/s320/name.png) no-repeat 7px 8px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 16px; 
font-weight:bold; 
height: 24px; 
margin: 0;
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top; } 

.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzOryx-3CH4h5MAaqaPVP-BakCG5uLopGvz-TETR9dNNGwlZtfs3gVVyPUgeNxVMMECawQ1Hm4U17pWNTyPHwzosea0ZaKfbRg8BtBaXOKmxflDfFwlG-Or2pNxIVWAeRR53HYPcs0gI/s320/email.png) no-repeat 7px 10px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top; } 

.contact-form-email:hover, .contact-form-name:hover{ 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 5px 15px 5px 28px; } 

.contact-form-email-message:hover { 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1); 
padding: 10px; } 

.contact-form-email-message { 
background: #FFF; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: arial; font-size: 16px; margin: 0; 
margin-top: 5px; 
padding: 10px; 
vertical-align: top; max-width: 350px!important; height: 150px; border-radius:4px; } 

.contact-form-button { 
cursor:pointer; height: 32px; line-height: 28px; font-weight:bold; border:none; } 

.contact-form-button { 
display: inline-block; zoom: 1; 
/* zoom and *display = ie7 hack for display:inline-block */ *display: inline; 
vertical-align: baseline;
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; -moz-border-radius: .5em; 
border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background: #f9e5e5; } 

.contact-form-button:hover { text-decoration: none; background: #e5d0d0; border-color:#fff; } 

.contact-form-button:active { position: relative; top: 1px; background: #e5d0d0; } 

.WG-btnLogin { -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:15px; background:#edd7f4; background:-moz-linear-gradient(top, #e5d0d0, #e5d0d0); background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')"; border:1px solid #edd7f4 !important; cursor: pointer; padding:11px 16px; font:bold 11px/14px Verdana, Tahomma, Geneva; text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff; -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px; } .WG-btnLogin:hover, .btnLogin:focus, .btnLogin:active{ background:#edd7f4; background:-moz-linear-gradient(top, #e5d0d0, #e5d0d0); background:-webkit-gradient(linear, center top, center bottom, from(#e5d0d0), to(#edd7f4)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')"; } .WG-btnLogin:active { text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; } .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XGq1jaalVgLnfUFc9hJwG0igZDyTwL-sCT3YXw3Hf26lSnB3oGo1LEnmEZLHxVSQvzbR6wvocHQytvquUIJ5QEVlCLuYDKsBdKN0G0hVcTjcrGTltiGDHBO5mFi2PxLMQiep4-N_v4/s320/name.png) no-repeat 7px 0px; } 

.contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzOryx-3CH4h5MAaqaPVP-BakCG5uLopGvz-TETR9dNNGwlZtfs3gVVyPUgeNxVMMECawQ1Hm4U17pWNTyPHwzosea0ZaKfbRg8BtBaXOKmxflDfFwlG-Or2pNxIVWAeRR53HYPcs0gI/s320/email.png) no-repeat 7px 6px; }
@media screen and (-webkit-min-device-pixel-ratio:0) { 

.contact-form-name { b
ackground: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XGq1jaalVgLnfUFc9hJwG0igZDyTwL-sCT3YXw3Hf26lSnB3oGo1LEnmEZLHxVSQvzbR6wvocHQytvquUIJ5QEVlCLuYDKsBdKN0G0hVcTjcrGTltiGDHBO5mFi2PxLMQiep4-N_v4/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px; } 
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzOryx-3CH4h5MAaqaPVP-BakCG5uLopGvz-TETR9dNNGwlZtfs3gVVyPUgeNxVMMECawQ1Hm4U17pWNTyPHwzosea0ZaKfbRg8BtBaXOKmxflDfFwlG-Or2pNxIVWAeRR53HYPcs0gI/s320/email.png) no-repeat 7px 8px; padding: 15px 15px 15px 28px; } 
.contact-form-email:hover, .contact-form-name:hover{ padding: 15px 15px 15px 28px; } 
.contact-form-button { height: 28px; } 

Formulário de contato profissional

Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ 
display:none!important;} 
/*---- Formulario Pro -----*/
.contact-form margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}
.contactf-name,.contactf-email{float:left;width:48.25%}
.contactf-name{margin-right:3.5%}
.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.contact-form-name,.contact-form-email{height:37px}
.contact-form-email-message{height:170px}
.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}
.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}
.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;}

Formulário de contato com linha arco-íris

Gostou? Copie e cole acima de /b:skin 

hr {

    position:relative;

    height:.25em;

    border:0;

    overflow:hidden;

}

hr:before {

    content:"";

    display:block;

    position:absolute;

    top:0;

    left:0;

    height:.25em;

    width:5em;

    background:red;

    box-shadow:

        5em 0 0 0 orange,

        10em 0 0 0 yellow,

        15em 0 0 0 green,

        20em 0 0 0 blue,

        25em 0 0 0 indigo,

        30em 0 0 0 violet;

}



#ContactForm1{ display:none!important;} 
/*---- Formulario Rainbow -----*/ 
.contact-form-widget margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}
hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}
hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}
.contactf-name,.contactf-email{float:left;width:49.25%}
.contactf-name{margin-right:1.5%}
.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.contact-form-name,.contact-form-email{height:40px}
.contact-form-email-message{height:100px}
.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}
.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}
.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}

Observação: Para a linha aparecer, é necessário que na página fixa você adicione um <hr> , é só colocar no inicio mesmo, não precisa fechar nem nada, apenas adicione <hr> junto com o codigo anterior do formulário nesse post, salve e pronto!

Formulário de contato negrito

Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ display:none!important;} 
/*---- Formulario BOLD -----*/ 
.contact-form-widget margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}
.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}
.contactf-name,.contactf-email{float:left;width:47%}
.contactf-name{margin-right:6%}
.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}
.name-icon,.email-icon{position:absolute;z-index:1}
.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px arial;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.contact-form-name,.contact-form-email{height:40px}
.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}
.contact-form-email-message{height:150px;border-width:2.5px!important}
.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Arial";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}
.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}

Formulário de contato vintage

Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ display:none!important;} 
/*---- Formulario Vintage -----*/ 
.contact-form-widget margin-left:auto;margin-right:auto;width:600px;max-width:100%}
.contactf-name,.contactf-email{float:left;width:50%}
.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}
.contact-form-name,.contact-form-email{height:33px}
.contact-form-email-message{height:130px}
.contactf-message{position:relative}
.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}
.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}
.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px} 
.contact-form-button-submit,.contact-form-button-submit:hover{border-radius: 20px; background:#CBC7C4!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}
.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;} 

Por hoje é só! O que acharam? Qualquer dúvida é só perguntar nos comentários! Atenção: Tem apenas 8 dias para participar do sorteio da Kawaii Box aqui no blog, siga o blog e fique atento!  Fonte: Helpblogger. Redes Sociais do Sweet Magic: Facebook | Twitter | Instagram | Bloglovin | Pinterest * Até mais, Kissus