28 mayo 2013

Personalizar Formulario de Contacto de Blogger

FORMULARIO CONTACTO

Blogger nos ha sorprendido con un nuevo widget, se trata de un formulario de contacto, el cual dígase de paso, me parece bastante simple, lo bueno, lo fácil de su instalación.

Este sencillo formulario de contacto lo podemos personalizar (mira aquí) y agregar a cualquier parte de nuestro blog, hoy os muestro la forma de llevarlo a una página estática. Está un poco modificado con un nuevo botón, para borrar el mensaje en caso de cualquier equivocación de nuestros lectores.


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.

Ver Demo

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 a instalarlo en la página estática y seguimos estos pasos:
Panel de control - Páginas - Página nueva - Página en blanco - le colocamos el título (Formulario de Contacto) y en su interior colocamos lo siguiente:

<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 430px; /* ANCHO DEL FORMULARIO */
width: 100%;
font-weight:bold;
}
.contact-form-name {
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 450px!important; /* ANCHO CAJA MENSAJE */
height: 150px;
border-radius:4px;
}
.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;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.amor-button-color {
color: #fff; /* color letras botones */
border: solid 1px #7D7D7C;/* color borde botones */
background: #626160; /* color fondo botones */
}
.amor-button-color:hover {
background: #27231F; /* color fondo botones al pasar cursor */
border-color: #27231F!important;
}

</style>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nombre" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Nombre&quot;;}' onfocus='if (this.value == &quot;Nombre&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='Correo Electrónico' value="Correo Electrónico" size='30' type='text'onblur='if (this.value == &quot;&quot;) {this.value = &quot;Correo Electrónico&quot;;}' onfocus='if (this.value == &quot;Correo Electrónico&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Deja tu mensaje..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Deja tu mensaje..&quot;;}' onfocus='if (this.value == &quot;Deja tu mensaje..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit amor-button-color' type='reset' value='Borrar'/>
<input class='contact-form-button contact-form-button-submit amor-button-color' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<p></p>
<div style='text-align: center; max-width:450px; 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>
</div>

Personalización:
Lo que está en ROJO es para aumentar/disminuir el ancho de la caja del nombre y email.
Lo que está en AZUL es para cambiar el color de los botones.

Si te ha gustado este artículo clic aquí para suscribirse gratis a través de nuestro correo electrónico, de esta forma recibirás un envío por cada nuevo artículo publicado o compártelo en las diferentes redes sociales.

56 comentarios

muy bueno,
hey como puedo hacer para colocar este gadget en un pagina, por ejemplo: una pagina que diga "Contactame" y que este gadget salga en una entrada

Elvis, si lees la entrada completa, sales de dudas, trata sobre ello.

Wao sisisisisis... excelente gracias por la ayuda, me gusto mucho ahora si me podran contactar para alguna sugerencia o pregunta, mil gracias...

Hola Antonio, felicitaciones por las modificaciones al formulario. Te hago una consulta: en la caja de mensaje, el texto "Deja tu mensaje.." sólo aparece si primero damos click en la caja y luego presionamos nuevamente fuera de ella. Se puede hacer algo para que aparezca ni bien se carga la página, como es el caso de los otros dos campos del formulario? Gracias!

Fernando, he revisado el código y no detecto ninguna anomalía, de todas formas, no creo que tenga ninguna importancia.

Saludos.

Hola antonio soy yo de nuevo, una pregunta, ¡Podemos modificar el codigo para colocarle a la caja del formulario "Asunto"...! Espero tu repuesta, Un Saludo

Elvis, Coloca esto en el CSS del código:
.asunto {
width: 60px;
color: #A0A0A0;
background-color: #FFF;
border: 1px solid #ddd;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 20px;
padding: 5px 5px 0px 10px;
}
.asunto:hover {
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
}

y ahora antes de <textarea clas............ colocas esto: <div class='asunto'>*Asunto*</div>

Hola Antonio.
Me ha sido de gran ayuda tu post. Hace ya diez años que no me ponía a montar nada de esto y lo que sabía ya ni rastro había dejado en mi cerebro, jeje.
Estoy peleándome con el asunto, a ver si consigo que quede bien. Incluyendo el código tal y como lo pones la cosa no chuta. No deja escribir el asunto, además que el recuadro queda más pequeño.
Saludos

Acabo de ver la visita.
Recibo el formulario por correo, eso funciona.

Pero el tema del asunto no. Ahora no está el css que has montado colocado.

He probado en los 3 navegadores más importantes y en todos los resultados son satisfactorios, el único problema que observo es que tienes los botones uno bajo el otro.

Elimina la etiqueta <br /> que lleva detrás de value='Borrar' y de value='Enviar.

Si quieres introduzco el css del asunto para que veas lo que pasa. Espera, voy a ello.

Ahí lo tienes, con el css que has dado (las dos partes) y he quitado lo último que me has comentado.
Verás que no se puede escribir en Asunto, además del tamaño del recuadro.

y escribiendo en la caja del formulario, MIRA ESTE

Vale Antonio... Fallo mío de comprensión del hecho en sí, :p

Son las horas que llevo delante del ordenador, to er día vamo.

Pensaba que la idea era que en el cuadro "Asunto", escribíamos el asunto del mensaje... Pero no es para eso.

¿Ahora sí lo he entendido no?

Mmmmm...
Interesante sí.
Gracias de nuevo!
Voy a ponerme con ello.

Amigo sera posible agregar un campo adicional al formulario para colocar Numero telefonico?

Se que no vas a borrar el comentario, jeje, mentiras, ya se que si, da igual. Solo queria agradecerte por la explicación que has dado aunque en un principio no me funcionaba el envio de mensajes, no se por que, pero ya lo solucioné ocultando de otra forma el formulario del cuerpo del blog. Al final quedó así Contacto

Por cierto, ya son 52 del alma. Jeje, saludos desde colombia.

colombiasinpalabras, no es mi estilo borrar comentarios si no conllevan un insulto o malas palabras, si hay alguna equivocación en el código me alegro que me lo comentéis, aquí estamos para aprender. !No somos genios!.

Pregunta, ¿a dónde me llegará el mensaje? o.O

Daniela debes tener activado el perfil de google+ en lugar de blogger, para que te lleguen los email.

Hola Antonio...leo tu ultimo comentario "debes tener activado el perfil de google+ en lugar de blogger, para que te lleguen los email" pero no se como hacer esto...me podrias explicar? Gracias!

Paco, entra en Blogger y en la ruleta de la parte superior derecha debes activar perfil de google+.

Gracias Antonio! otra consulta...luego de activar el perfil de google+, debo reinsertar el codigo del formulario? me automande un mensaje desde el formulario y no me llega el mje.
gracias!

Deberías recibirlo en el correo electrónico con el cual te registraste, ya sea Blogger o Google+.

Muchísimas gracias, me ha servido de mucho esta entrada. Lo aplique a mi blog y funciona perfectamente, saludos.

holas queria saber como ocultaste el formulario, pues no me llegan los comentarios a mi correo.

Excelente blog, gracias! me ha servido de gran ayuda. Simplemente añadir, si su autor me permite, que además de realizar todos estos pasos tuve que borrar código para que los mensajes me llegaran:




(borrar todo lo que hay en el medio)




Un saludo!

Hola muchas gracias por este tutorial, tengo una pregunta, si quisiera borrar de adentro del la caja el nombre y la imagen y lo mismo con correo electronico y la imagen como lo hago.
muchas gracias

Gracias,me ha valido. Estoy terminando de construir el mio y salvo por mi inexperiencia inicial, luego he comprobado que funcionaba perfectamente.En concreto, tras activar mi perfil Google, buscaba en la carpeta de entrada los reportes de prueba que me autoenviaba y no me percate que gmail habilita una pestaña de nombre "SSocial" donde les iba acumulando. La inexperencia.
Saludos y gracias de nuevo

Hola, otra vez el "Colombiano sin Palabras" para aclarar dos cosas:
1> Pensé que borrarías el mensaje por el link que puse en el, pues creo que en tus normas decía que no se permiten enlaces.
2> Ocultando el "formulario de contacto" como se explica aquí no me sirvió a mi, pues no me dejaba enviar mensajes aunque el gadget como tal si lo oculta, así que busqué en otros blogs y di con esta forma de ocultar el formulario y fue la única que me sirvió.

Me gustaría que pusieras dentro de esta página esa forma de ocultar el formulario que explican en "oloblogger" para que a los que no les funciona como a mi ya tangan otra opción.

Todo esto se dio porque hace tiempo puse el formulario en el blog "Colombia sin Palabras" y lo fui a poner en otro blog y no me acordaba como había hecho, llegue aquí y no me volvió a dar, así que seguí investigando y di con la solución en "oloblogger".

Gracias, excelente post; lo visitaré cada vez que se me olvide como poner ese formulario de contacto. Jeje

Saludos y feliz día.

Hola de nuevo el "Colombiano sin Palabras".

La ves pasada yo pensaba que ibas a eliminar el comentario por el enlace.

La solución que me permitió ocultar y enviar mensajes en mi formulario es la que explican en "Oloblogger" dejo el enlace aquí Ocultar formulario de Contacto

Gracias por este post, ojalá pongas esa opción que da "oloblogger" para ocultar el formulario, pues se que no a todos nos funciona con la forma de ocultarlo que explicas aquí.

Volví a pasar por aquí porque intenté poner el formulario en otro blog y tampoco me resultó en un principio así que volví y rebusqué en la web hasta que di con "oloblogger" y ahí si me funcionó el envío de mensajes, pues el problema es que como explicas aquí si se oculta el gadget pero no me enviaban los mensajes desde la página estática.

Feliz día y saludos desde Colombia sin palabras

Muy buen aporte me sirvio de mucho, a propósito si gustan pueden darse una vuelta por mi blog http://thervn.blogspot.com/

Mi idea era insertar el nuevo gadget de formulario de contacto de Blogger pero no me convenció: campos limitados, no poder configurar destinatario, no poder enviar a múltiples destinatarios, no poder incluir campo captcha,... al final opté por otra opción, podéis ver los detalles en http://www.areatic.net/2013/10/blogger-formulario-de-contacto-en-una.html

si lo pongo en una pagina externa,
como hago para hacer funcionar el boton enviar?

Alex lo mismo que en la sidebar.
Si en la sidebar te funciona el botón "enviar" te debería tambien funcionar en la página que lo coloques.

http://www.tkd-ashdod.com/assda.html

Alex algo debes estar haciendo mal, fíjate bien en los códigos.
Te sale la escritura de derecha a izquierda, haber como es posible eso.

si, no se porque . el codigo lo pege igual.
pero podria ser porque toda la pagina esta echa de derecha a inzquierda. no esta en castellano.
sabes como puedo cambiar el codigo para arreglarlo?
y como puedo mover todo el sidebar mas al centro?

la pagina no esta echa en blogspot (me imaigno que te diste cuenta)
en que parte del codigo pongo mi mail para que el boton de enviar funcione?
por eso no entiendo

Alex, no me había fijado en eso, pero ahora que lo comentas solo sirve para blogger, por ello no te funciona.

ah ok:(, y el tema del sidebar es lo mismo?
http://www.tkd-ashdod.com/%D7%A0%D7%99%D7%A1%D7%99%D7%95%D7%A0%D7%95%D7%AA-1-1-1-1-1.html
si no se puede arreglar el efecto de deslizado por lo menos me podes ayudar para moverlo mas a la izquierda?? porque lo quiero pegado al texto

Alex lo siento pero si no es de blogger, desconozco su funcionamiento.

Muchísimas gracias!! Este tutorial me ha sido de gran ayuda y he podido personalizar al 100% mi formulario de contacto. Saludos!!

Hola Antonio
Muchas gracias por el tutorial, lo he seguido sin ningún problema y me funciona perfectamente. Lo único que he intentado introducir una casilla nueva, Telefono, y aparece en el formulario, pero al enviar este, no viene reflejado el teléfono. No sé que habré hecho mal, ni como enviarte mi código .txt.

Muchas gracias

Te puede aparecer pero nunca lo mandará, porque el formulario es de blogger y está en su base de datos tal cual.
De todas formas en internet hay bastantes páginas para crear un formulario de contacto personalizado.

Mira este de mi pagina web del Taxi Ver formulario

Muchas gracias Antonio.
Ya me temía yo que no lo podía hacer.

Un saludo

Hola, muchas gracias por el post. Hago una consulta, apliqué el formulario y cambié los colores de los botones, pero cuando envío un mensaje el boton que era marron, se vuelve celeste y no encuentro la forma de cambiar ese color. Como debería hacer?

Este es el link.

http://hanadojo.blogspot.com.ar/p/contacto.html

Gracias.

Hanadajo, la verdad es que no se el motivo, debería salir en gris, pero como es un gadget de blogger modificado al igual extrae el css de blogger.
Tendría que mirarlo con más tiempo.

Bueno, muchas gracias de todas formas! muy útil la información.

Genial! lo he aplicado y se ve muy bien. Gracias!


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"