Lo primero sería añadir el widget a la sidebar.
1.- Diseño > Añadir gadget ( Formulario de Contacto).- Guardar.
Lo siguiente sería ocultarlo en todas las partes del blog y para ello buscamos: </head> y justamente antes colocamos:
<b:if cond='data:blog.url != ""'>
<style type='text/css'>
#ContactForm1 {
display: none;
}
</style>
</b:if>
2.- Ahora vamos a instalarlo en la página estática y seguimos estos pasos:
Panel de control - Páginas - Página nueva - Página en blanco - le colocamos el título (Formulario de Contacto) y en su interior colocamos lo siguiente:
<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 430px; /* ANCHO DEL FORMULARIO */
width: 100%;
font-weight:bold;
}
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUsJOIj92KF5ZTmUp116rP50UnFcIu_A_CZyqmaBh6z9MRx0ncvu4q7FaUGMZexaDglkifBsZHMRWTizotXlllNJyINI7yGwNhoxZPkhcSf2AtmV2nMPn3D2XNiW-Q4ZEq8FhCcZmNTo/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: 12px;
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/AVvXsEgn5TYVtXm6TqADFgBNlOf57AyiAbK-aZhcQVNdicAfnIvdalVZaQ-h6kB13LkIbEhJBGssTU-8euOlrVE009CZMcz8JIih43YLjyFxtuhc55EYxr7KS0_NN1mTfWdNZAwF5nV2QdjJzLo/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: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 450px!important; /* ANCHO CAJA MENSAJE */
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;
*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);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.amor-button-color {
color: #fff; /* color letras botones */
border: solid 1px #7D7D7C;/* color borde botones */
background: #626160; /* color fondo botones */
}
.amor-button-color:hover {
background: #27231F; /* color fondo botones al pasar cursor */
border-color: #27231F!important;
}
</style>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nombre" size='30' type='text' onblur='if (this.value == "") {this.value = "Nombre";}' onfocus='if (this.value == "Nombre") {this.value = "";}' />
<p></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='Correo Electrónico' value="Correo Electrónico" size='30' type='text'onblur='if (this.value == "") {this.value = "Correo Electrónico";}' onfocus='if (this.value == "Correo Electrónico") {this.value = "";}' />
<p></p>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Deja tu mensaje..' onblur='if (this.value == "") {this.value = "Deja tu mensaje..";}' onfocus='if (this.value == "Deja tu mensaje..") {this.value = "";}'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit amor-button-color' type='reset' value='Borrar'/>
<input class='contact-form-button contact-form-button-submit amor-button-color' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<p></p>
<div style='text-align: center; max-width:450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
Personalización:
Lo que está en ROJO es para aumentar/disminuir el ancho de la caja del nombre y email.
Lo que está en AZUL es para cambiar el color de los botones.
