Cómo poner un formulario de contacto personalizado en una página de Blogger

Una de las opciones que te ofrece Blogger a la hora de diseñar tu web es insertar un gadget con un formulario de contacto en la sidebar. Pero... ¿y si en tu página no quieres poner una barra lateral? Una de las opciones es añadir tu dirección de correo electrónico en la página en la que explicas quien eres y lo que haces ("about", "sobre mí", "quienes somos"). Pero... ¿y si tampoco quieres hacer pública esa dirección para, por ejemplo, evitar el spam?No hay problema: no tienes más que insertar el formulario de contacto de Blogger en esa página de presentación o crear una nueva sólo para el formulario, como esta

Veamos esta última opción paso a paso:

Lo primero es, como decimos, crear una nueva página en blancopáginas > página nuevaLe pondremos como título, por ejemplo, "CONTACTO", la editamos en modo HTML y pegamos este código:

<div style="text-align: center;">

<br /></div>
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div style="text-align: center;">
<span style="font-size: large;">Nombre</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        </span></div>
</div>
<div style="text-align: center;">
<span style="font-size: large;">eMail *</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        Mensaje *</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: large;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <input class="contact-form-button contact-form-button-submit" color:="" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span>
        </span></div>
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<div style="text-align: center;">
<br /></div>
</form>
</div>
Le damos a "vista previa" y vemos cómo nos ha quedado.

¿CÓMO PERSONALIZAR EL FORMULARIO DE CONTACTO?

Añadiendo nuevos códigos enplantilla > personalizar > avanzado > CSScomo por ejemplo estos: 

/* Formulario de Contacto

----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 25px;
float: center;
padding: 10px;
background: #ffffff;
color: #000;
border: 1px solid #ffffff;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #c5bc73;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 13px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #444444;
border: none;
}
Que son los que corresponden al diseño de la imagen con que abríamos est post... ...y con los que, como veis, podemos cambiarlo todo para adaptarlo al diseño de nuestro blog. Sólo hemos de fijarnos en a qué parte del formulario corresponde cada uno de los bloques de códigos y que yo os he señalado en negrita.En concreto, nosotros por ejemplo hemos puesto a nuestro diseño una sombra en el contenedor principal ( box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);)y un ancho de 1000px (el ancho total del blog); también hemos redondeado los bordes de las casillas donde escribir el mensaje (border-radius: 5px;)y cambiado la letra. Finalmente, también hemos cambiado el color de fondo del botón de enviar (background: #c5bc73;)Así que... sólo es cuestión de que os pongáis a ello con cuidadito y paciencia, e ir probando hasta dar con el diseño que más os guste ;)