Personalizar gadget Formulario de contacto Parte (I)

Hoy en Conecta Tutoriales traeremos 5 estilos diferentes para personalizar nuestro gadget de Formulario de contacto en blogger, un gadget que por defecto viene muy simple, aunque lo mejor de todo es que podemos personalizarlo a nuestro gusto y eso es lo que haremos ahora!

La instalación es muy fácil y solo consta de unos pasos.

Lo primero que debemos hacer es ir a la sección Diseño » Añadir un Gadget » luego seleccionar más gadgets y elegir Formulario de contacto!

Una vez elegido guardamos los cambios. 
Cabe recordar que con la implementación de este nuevo gadget ya no será necesario usar algún servicio externo. Los mensajes que se envien a traves del gadget llegarán al email de la cuenta del creador del blog.

Luego para comenzar a añadir los estilos, vamos a Plantilla » Edición html y presionando ctrl+f buscaremos la palabra ]]></b:skin> justo arriba de ella pegaremos el diseño que más nos guste, luego guardamos la plantilla y LISTO! Formulario renovado.

/* Formulario de Contacto, Estilo Elegante-Simple
----------------------------------------------- */

/* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: #eee;
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    height: 100%;
}
/* Campos Nombre y correo electronico */
.contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
}
/* Campo del cuerpo del mensaje */
.contact-form-email-message {
    padding: 5px;
    border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
        border: medium none;
        border-radius: 5px;
        color: #FFFFFF;
        font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
            font-size: 13px;
        font-weight: bold;
        height: 36px;
        max-width: 100%;
        padding: 2px 5px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        width: 100%;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border {
    width: 247px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:247px;
}

/* Formulario de Contacto, Estilo Circulo
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXGiTambMmWF0B9uLKpYxMUqV5GzxFmmaTnNcnAnCWtNC5AlkaCZ0hPnzgzrgeaIb42bL4Sdd7pVIo3PVzg-hEmQdjTpukzJaIdv0Y4ycWvjI-_uYAEgWAebWXY9IcAup9kD22YdpYb1t/s1600/formulario-circulos.jpg);
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #fff;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    background: #222;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #5B5B5B;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border{
    width: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

/* Formulario de Contacto, Estilo Corazones
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaQHcKMS1A-umI4Btt-ZKtGNa9Ah50espUjS-YFIttxGZFja5VBa6GiQCw0zFh0FBOIq57dzl_CCPsN9bThWNaQdvd5yUOATwKjb2AuMNHNTxk8PcjLv9X5QBmKi1676MngXTZtq-HO0A/s1600/formulario-corazones.jpg);
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #fff;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    background: #FC4444;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #FC6767;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border{
    width: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

/* Formulario de Contacto, Estilo masculino
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBF9l-gOu75S_Bp3QVYbaZwdGngr4eugEnyt76m_B3myWdLtFUqVBuqmHmhRQTu_8I96JaZz9CNeqfGlIJkJCFCXHTq48vILQcXA-qGZBQoqpxrYI_mub0rRhZ_TmQmSeMY05LgA8Ikp5/s1600/formulario-hombre.jpg);
    color: #fff;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #344C68;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    background: #EB5200;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #FF8C4F;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border{
    width: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

/* Formulario de Contacto, Estilo femenino
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw35_pGfO8qcJNFG2qd4K1grRJwCKVRaYHfsKS8UFsTpgnNFW27q1iXdnoSA6PdGXBnVsUzypmWTd1jk7QoeYRFPYb7eMx9JY5I2o0Bm7xxBeh77RL1knICWg9C4O-xoAp5c7WPn0edJoE/s1600/formulario-mujer.jpg);
    color: #fff;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #534F60;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    background: #DD6F92;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #E58BA8;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border{
    width: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

Cada diseño puede ser modificado y/o utilizado de forma unixes, en color azul muestra el estilo que representa a cada parte del formulario, el css fue adaptado para visualizarse de mejor manera posible en todos los navegadores.

Espero que los diseños hayan sido agradables para ustedes y cualquier duda pueden preguntar más abajo añadiendo sus comentarios.

Proximamente una nueva personalización!