5 Estilos Para El Formulario de Blogger

Hace unos días os mostraba la forma de personalizar el formulario de Contacto de Blogger y añadirlo a una página estática. Hoy he diseñado 5 formularios oficiales de blogger, así que hoy estoy emocionado de compartir este formulario personalizado con todos ustedes.

Vamos a ver todos los diseños y podréis elegir cualquiera de las formas que ustedes prefieran y agregarlo a vuestro blog. Para instalarlo en una página estática seguiremos los siguientes pasos:

Para instalar el formulario en una página estática vamos a seguir estos pasos:
Lo primero sería añadir el widget a la sidebar.
1.- Diseño > Añadir gadget ( Formulario de Contacto).- Guardar.

Bien,  ya lo tenemos instalado en nuestra sidebar.

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 != &quot;&quot;'>
<style type='text/css'>
#ContactForm1 {
display: none;
}
</style>
</b:if>

2.- Ahora vamos al menú Páginas.
Haga clic en Nueva página y elegir la página en blanco.
Presione HTML, copie y pegue el código del formulario que prefiera.

Estilo 1:

<style type="text/css"> .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; margin-top:2px; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; background:#585858; color:#fff;} .contact-form-button:hover { text-decoration: none; background:#fff; color:#585858; border:none;} .contact-form-button:active { position: relative; top: 1px; } </style> <table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;background:#ccc;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<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' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/><input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; 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></td><td width="250" style="padding: 5px;background:#ccc;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd4ErMSoDvDab87I_rFX1XmoOtZygftEqcd1lnguI_Wg3aRPP-NoT3wNllIog44_VChslOQbSPmHT6fFK6P-6_uYKPa1cMZ4-ca7bGxF_PRP949ugVVn2_8rSDSB5A6Mwqrg56TScnoIY/w267-h250-no/formulario-contacto1.jpg"/></td></tr></table>

Estilo 2:

<style type="text/css"> .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; margin-top:2px; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; background:#fff; color:#585858;} .contact-form-button:hover { text-decoration: none; background:#CFCDCD; color:#000; border:none;} .contact-form-button:active { position: relative; top: 1px;} </style> <table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#414040;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<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' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/><input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; 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></td><td width="250" style="padding: 5px;background:#414040;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQULH71gAtgi8sLZhu37qCyRjLGZjnWzthOniXK_g6hIs0KAkVicLy4rcewlPY9YUcrQQU9TagGn-u8cnZ3hpTpbN7sBtUDWXB6H9WPG2mQROVKfWv1vgj9Un3E1zgM6b4vFWdCLuvZdg/w267-h250-no/1.gif"/></td></tr></table>

Estilo 3:

<style type="text/css"> .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; margin-top:2px; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; background:#fff; color:#0B37FC;} .contact-form-button:hover { text-decoration: none; background:#fff; color:#000;} .contact-form-button:active { position: relative; top: 1px;} </style> <table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#0B37FC;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<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' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/> <input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; 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></td><td width="250" style="padding: 5px;background:#0B37FC;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQrnPDH9NQEa5JlM-6mKe_-hw03HLSYDqVE1wwalcct-OcauOfzvDLMzwGcJypAXZ921qPT3rlyAIcBPpCM1yebhQkb4sh6EhUu8FA_r3TYUVpJXuzdQYF_oGgFfsIWQ9kFcBemLt2Xw/w267-h300-no/email-marketing1.jpg"/></td></tr></table>

Estilo 4:

<style type="text/css"> .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; margin-top:2px; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; background:#fff; color:#000;} .contact-form-button:hover { text-decoration: none; background:#D2F7E1; color:#000; border:none;} .contact-form-button:active { position: relative; top: 1px;} </style> <table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#0CB753;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<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' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/> <input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; 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></td><td width="250" style="padding: 5px;background:#0CB753;" align="left"><img src="http://www.brillomart.com/img/contactof.jpg"/></td></tr></table>

Estilo 5:

<style type="text/css"> .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; margin-top:2px; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; background:#fff; color:#000;} .contact-form-button:hover { text-decoration: none; background:#D67878; color:#000; border:none;} .contact-form-button:active { position: relative; top: 1px;} </style> <table width="520" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="250" style="padding:5px;color:#fff; background:#A90A0A;"><form name='contact-form'>Nombre<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>Email<span style='font-weight: bolder;'></span><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>Mensaje<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' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/> <input class='contact-form-button contact-form-button-submit id='ContactForm1_contact-form-submit' type='reset' value='Borrar'/> <div style='text-align: center; max-width: 222px; 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></td><td width="250" style="padding: 5px;background:#A90A0A;" align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SY5_yzwvRd6xV33uhdJ4YkJxVCwAqZjGdlTbBjjLWybLX5hW3KpT-bdMh21lob04NYbG3k3SFcack9nhd0cZONpTOz4l7Jb7NnKD-kiIJgNXC4JARa-p1GmDTdkzpKoLusJV1BxHV-k/w244-h284-no/contacto.jpg"/></td></tr></table>

Finalmente publicar la página.

Imprimir artículo