10 junio 2013

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:
formulario de contacto blogger
<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://lh5.googleusercontent.com/-pcixWTz6DZ4/UbXsn8ZvSvI/AAAAAAAAL7o/P1ll3ZUey6k/w267-h250-no/formulario-contacto1.jpg"/></td></tr></table>

Estilo 2:
formulario de contacto blogger
<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://lh4.googleusercontent.com/-d98v1TFuVhs/UbX6c5EGNZI/AAAAAAAAL8k/M5erNNahUNM/w267-h250-no/1.gif"/></td></tr></table>

Estilo 3:
formulario de contacto blogger
<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://lh4.googleusercontent.com/---7hVNtTSaU/UbYAHM8e-pI/AAAAAAAAL80/UwQUICraeFc/w267-h300-no/email-marketing1.jpg"/></td></tr></table>

Estilo 4:
formulario de contacto blogger
<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:

formulario de contacto blogger
<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://lh5.googleusercontent.com/-X-eL_t-O7PM/UbYTTFJ7SjI/AAAAAAAAL9M/PBg9kyvPZ-o/w244-h284-no/contacto.jpg"/></td></tr></table>

Finalmente publicar la página.
Espero que hayan disfrutado este post, por favor dejar vuestros comentarios y preguntas a continuación ..



Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

9 comentarios

Buenisimo quedo en mis blogs, puse el formulario primero, graciaaaaasssss

no sabes si puedo modificar el correo a donde me llegaran los mensajes?


Hola Antonio

Los Form estan buenisimos y me dio por poner uno en mi blog pero no puedo hacer funcionar el boton enviar.

Sera que yo solo tengo ese problema?
http://www.drmikao.com.ar/p/contacto.html

Te agradeceria si puedes darme una ayudita poque tu regalo me parecio genial.

Segui todos los pasos y hasta borre todo el main includable del widget en la plantilla por las dudas pero ni modo.

Desde ya muchas gracias por tu disposicion y los forms

Ruben Moya

yo tb tengo problemas ocn el boton enviar no funciona que se puede hacer

Correcto, había un pequeño fallo que había obviado, ya está solucionado.

Este comentario ha sido eliminado por el autor.
Este comentario ha sido eliminado por el autor.

Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"