O primeiro passo é criar um página á la no seu blogger -> páginas, e clique em nova página, No titulo digite ''Contato'' e então, no botão logo abaixo, deixe no modo HTML
Agora copie e cole o código abaixo dentro da página, salve a página e agora vamos personalizar ela.
Vá em Layout, Editar HTML, Procure por ]]></b:skin> e ACIMA DELE cole:
#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/AVvXsEjiV-mCFekMpGXzTAUjTRp_EziiSzKfBAtn2EfVe5_aM8mRuFUHtmjV5S6VhfI2mv1yaJk7tezmGQiryDu9WtAfe5MuRyOxSJSRA5q56-8F7tTPMIZokmVIo4zALSCnFzcGVdi0HeIIAT4/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/AVvXsEhUpjEWingjn90iY-A5sVnWAXkGrEby0W6_Z2_77f79s85qIFSgm6_q3rshzJp7XhsJid7AT9u1M20tHHkIka8JecrXBUpRVjPPsK5DYi1PtVejCimeTXeYRUxggtK2xqbxXY-6DjixnkY/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/AVvXsEjiV-mCFekMpGXzTAUjTRp_EziiSzKfBAtn2EfVe5_aM8mRuFUHtmjV5S6VhfI2mv1yaJk7tezmGQiryDu9WtAfe5MuRyOxSJSRA5q56-8F7tTPMIZokmVIo4zALSCnFzcGVdi0HeIIAT4/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpjEWingjn90iY-A5sVnWAXkGrEby0W6_Z2_77f79s85qIFSgm6_q3rshzJp7XhsJid7AT9u1M20tHHkIka8JecrXBUpRVjPPsK5DYi1PtVejCimeTXeYRUxggtK2xqbxXY-6DjixnkY/s320/email.png) no-repeat 7px 6px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiV-mCFekMpGXzTAUjTRp_EziiSzKfBAtn2EfVe5_aM8mRuFUHtmjV5S6VhfI2mv1yaJk7tezmGQiryDu9WtAfe5MuRyOxSJSRA5q56-8F7tTPMIZokmVIo4zALSCnFzcGVdi0HeIIAT4/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/AVvXsEhUpjEWingjn90iY-A5sVnWAXkGrEby0W6_Z2_77f79s85qIFSgm6_q3rshzJp7XhsJid7AT9u1M20tHHkIka8JecrXBUpRVjPPsK5DYi1PtVejCimeTXeYRUxggtK2xqbxXY-6DjixnkY/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;
}
Se quiser mudar a cor do botão, mude essas cores: #e5d0d0 e #edd7f4 . Agora é só salvar e pronto seu formulário de contato já estará pronto.
