5 atractivos dise?os para el Formulario de Contacto de Blogger

Una de las novedades que me perd? fue el gadget de Formulario de Contacto de Blogger, un formulario con el que nuestros lectores pueden ponerse en comunicaci?n privada con nosotros sin necesidad de que ellos tengan que abrir el correo. El gadget por s? solo es ?til, y aunque no tiene opciones me parece que incluye los campos m?s b?sicos y suficientes que la mayor?a de los bloggers necesita.

La ventaja de este gadget es que no tenemos que depender de servicios externos que luego nos limitan con un n?mero mensuales de env?os y nos obligan a mantener visible su link.

La desventaja es que su dise?o es demasiado simple, y tal vez esa sea una raz?n por la que muchos usuarios no se atreven a usarlo.

La buena noticia es que esa misma simplicidad de su dise?o permite que podamos modificarlo a nuestro gusto y adaptarlo a nuestra plantilla.

Ya saben que no soy muy bueno con el dise?o, no obstante ayer dedicando una horas realic� estos ejemplos con los que se podr?n dar una idea de la manera como podemos transformar radicalmente estos widgets y pasar de los simple a lo llamativo.

Son 5 dise?os, y el c?digo est? listo para copiar y pegar. Primero deber?s tener el gadget del Formulario, si a?n no lo tienes entra en Dise?o | A?adir un gadget, se abrir? una ventanita, del men? de la izquierda selecciona M?s gadgets y ah? elige Formulario de contacto.

Ya que lo tengas en tu blog entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> pega el c?digo del estilo del formulario que prefieras. Guarda los cambios y listo.

---

Estilo B?sico

/* Formulario de Contacto, Estilo B?sico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
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;
}
/* 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: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}

Estilo Postal

/* Formulario de Contacto, Estilo Postal
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9Aq7Ob90VLnIGMe10xBPktVRwzl3oq8brkXgKQLsBiW1GXBDp9IweGNj7RWG9_nt2cup3Ae2ccJ2ZjckCXdxSbz_czUiwfKYe4guzMfRMigV0stpX0xpHqYu8-ttkotkuovCAhIXMwc8/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Estilos del contenedor interno */
.contact-form-widget div.form {
background: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS52Rs9ge8KmHS5M4DgDXZVm7lI4x90oNxEFQfM2YTca1AmSf5nC-3a2OljXM4bWcdQVKP0mrg8wQ_LymakuuEz5o6GiANn9e2GtcNbncnelWLT90NlLD1njTaP7TCHvrfVwSkWQdqHN6B/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}

Estilo Negro Lim?n

/* Formulario de Contacto, Estilo Negro Lim?n
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #98bd3c;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #282828;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #F9D423;
color: #282828;
border: none;
}

Estilo Girly

/* Formulario de Contacto, Estilo Girly
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEbbUrH4mRcHdlWKRAB-RoSt6AlKgG-cl2OLYDQi74zCHWsTMpKw5NeS4AELv0v0Ug6Zo6WX5TJtPRamRNoIe5D0EdG_RrZ-nbdKYrVwFPX3dXhyM6DEyADtBRlxrOO8166tFp2Xv86jj/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
/* Estilos del contenedor interno */
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7OaDAcZlLTENYd-8XBy18ncmDQxIvonD40SsHZtAKU9-Yr-sZC5njiec-R7-rEtYDOu__s_wyGGZSAl5TbJ8wCtY5xIGaUu9SySnwFR0n1-uaoaRlLOe_gdY9S9tHEWo2-RAwe8IbfQCp/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}

Estilo Met?lico

/* Formulario de Contacto, Estilo Met?lico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ac0T_lLDHCenSb75OsBVtsI9awopPC0_pz08f7CekSvTeEAyvDAwnvfvO_tQhZuowxYPSKSxln0GziOVTo9RBiI5JP_pDioFE3hgwFFa20G5u7raHsBm2fbQ13FsV_mt0QLyS5R6mQz3/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}

En color verde he puesto a qu� ?rea pertenece cada grupo de estilos por si alguien le quiere modificar algo, o por si alguien se anima a hacer sus propio dise?o.
En todos los casos el ancho m?ximo del gadget se controla en esta parte: max-width: 280px;

Toma en cuenta que algunos estilos al ser CSS3 podr?an no verse de la misma manera en todos los navegadores, sobre todo en Internet Explorer.

Espero que les gusten y los disfruten.