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

19 de marzo de 2014 283 comentarios ,

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(//lh3.googleusercontent.com/-GqNaPfpbCw4/UyjXvLmWlOI/AAAAAAAAKIM/qHtxyZYRPUc/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(//lh4.googleusercontent.com/-tXb0r3XoQlU/UyjaViCJFrI/AAAAAAAAKIY/3HV7tKODyIQ/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(//lh4.googleusercontent.com/-wz6C40j6prM/Uyjo-r3lQSI/AAAAAAAAKIo/eTCpE9uVrCw/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(//lh5.googleusercontent.com/-_eWCqxEwGfo/UyjxeoqeutI/AAAAAAAAKJE/r96690O9TG4/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(//lh3.googleusercontent.com/-dJy1C7rwmEQ/Uyj-q5JD1cI/AAAAAAAAKJU/oaOXETgXO3c/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.



283 comentarios en:

" 5 atractivos diseños para el Formulario de Contacto de Blogger "

  1. Excelente Potro. De vuelta a la carga de nuevas mejoras para nuestros bloggers. Saludos desde Perú

    ResponderEliminar
    Respuestas
    1. hola que tal yo también soy de Perú de donde parte eres soy de lina pero vivo en chala caraveli desde año 2000

      Eliminar
  2. Hola Potro, buen post, pero mi pregunta va de una entrada antigua que hiciste. Tengo un problema con mi Blog www.triatlonenfamilia.com no se actualiza en los blogroll de mis seguidores, yo en mi blog tengo puesto al mio dos veces, una lleva dos entradas sin actualizarse y el otro una, es decir mis seguidores mas antiguos hace dos entradas que no saben que he actualizado y los mas actuales una.
    En permitir feed de blog tengo puesto completo
    Publicar URL redireccionada del feed pone http://feeds.feedburner.com/TriatlonEnFamilia?max-results=10
    Ya no se que mas hacer tengo poca idea de informática ya te aviso pero lo he intentado todo lo que he leido por ahí..
    necesito tu ayuda
    gracias

    ResponderEliminar
    Respuestas
    1. Hola ANA, no encuentro problema con el feed de tu blog, al abrirlo me muestra las últimas entradas publicadas en tu blog. Quizá el problema sean los gadgets que muestran el feed, usualmente tardan en actualizar la información, y los de Blogger a veces tardan mucho más (a veces hasta semanas), pero eso ya es fallo del sistema del gadget de Blogger.
      Tal vez pueda servirte de algo que hagas un ping para avisar a los diferentes servicios que hay nueva información en tu blog:
      http://ciudadblogger.com/2010/01/acelerar-el-tiempo-de-actualizacion-del.html

      Eliminar
    2. Hola potro, no se muy bien a que te refieres con los gadgets, mi problema es que me meto en los blogs de otra gente y en la lista que tienen de los blogs que siguen, el blogroll , el mio sigue estando en la entrada anterior.
      ellos no se enteran que he actualizado.
      Ahora he cambiado la fecha a hoy y he dejado en blanco lo de Publicar URL redireccionada del feed y parece que a la mitad se les ha actualizado.
      ¿Es mejor que lo deje en blanco o vuelvo a poner lo de feedburner?

      Eliminar
    3. A esos gadgets me refiero ANA, como el del blogroll, ese es el tipo de gadget que tardan en actualizarse.
      Si tu feed lo administras desde Feedburner entonces sí hay que poner la URL en esa área, sólo se deja en blanco cuando no tienes ningún gestor de feeds.
      Pero repito, es un tanto normal que ese gadget falle, no desesperes, así como se atrofia también vuelve a la normalidad.

      Eliminar
  3. Es verdad que era sosísimo el formulario. Me ha encantado tu diseño postal (acabo de ponerlo en mi plantilla). Muchísimas gracias. Qué bueno tenerte de vuelta ;)

    ResponderEliminar
    Respuestas
    1. Gracias eska, si yo me animara a poner uno usaría también ese :)

      Eliminar
  4. buenos dias potro me alegro que hayas vuelto. Cuanta falta hacias. uno d los nuevos diseños para formulario en mi blog. Pero tengo otra duda o pregunta. No quiero que se muestre el nr de comentario ni los comentarios de blogger en mi blog. Logre ocultarlo en la entradas pero no en la pagina pricipal que aunq le di a ocutar comentarios aparece este mensaje "undefined comment" si me pudieras ayudar seria excelente. este es mi blog: http://www.diocesisdesanfernando.org/

    ResponderEliminar
    Respuestas
    1. Saludos Webmaster, no soy El Potro pero creo poder ayudarte, en tu plantilla busca este elemento

      .mores .mments

      y en donde dice: display: block; cambialo por display:none;

      con eso no verás más ese elemento en la portada de tu blog.

      Eliminar
    2. Muchisimas gracias GABRIEL300487., la solucion a salido casi perfecta. sin embargo aun me aparece el mensaje "undefined comment" en la seccion del carrusel en el blog. habra alguna forma de ocultar ese mensaje alli tambien? Y tambien me gustaria saber como cambiar View More en las entradas de la portada dl blog, por "leer mas". He utilizado metodos tradicionales para hacerlo pero no he podido cambiarlo. Esta platilla es bastante nueva y hay cosas diferentes. Ruego ayuda.

      Eliminar
    3. Hola WebMaster. Tienes que descargar y editar este script de tu plantilla:
      http://yourjavascript.com/0413121251/ptmcontentpos.js

      Busca esta parte que aparece dos veces y elimina ambas:
      - '+M+' comment

      Ahí mismo verás el texto View More que apetece dos veces, sólo cámbialo por el texto que quieras.

      Luego tendrás que guardar el script, subirlo a tu propio alojamiento y cambiar la URL del script en tu plantilla.

      ¡Saludos y gracias por tu comentario!

      Eliminar
    4. Excelente potro sin ti no hubiese popido hacerlo :D quedo perfecto y aprendi a editar un script. Nunca lo habia echo. Tengo 2 preguntas mas. Se q pregunto mucho, pero el curioso es el interesado jeje.! Aqui va la primera; en mi plantilla hay una barra superior que presenta las ultimas entradas del blog. Como puedo modificar el nombre de esta, que aparece como "headlines" y no he conseguido modificarlo. Y tambien quisiera saber como activar el lightbox para imagenes, que de la manera tradicional no se activa. Supongo que hay q modificar algo en la platilla, pero no se que exactamente. Tu ayuda es muy importante potro tanto para mi como para otras personas que quieren aprender. Por cierto soy de Venezuela.

      Eliminar
    5. Qué bueno que has aprendido a hacerlo porque tendrás que realizar el mismo procedimiento nuevamente ;)
      De igual forma busca en ese script el texto headlines, cambia sólo el segundo por el texto que quieras, si no ves resultados cambia también el primero.

      Para que el Lightbox funcione cambia en tu plantilla esto:
      <div class='post-inner entry'>

      Por esto:
      <div class='post-inner entry post-body'>

      Saludos hasta Venezuela!

      Eliminar
    6. Perfecto potro ya logre modificarlo, pero ahora las noticias no pasan, :( se queda estatico. Pero paso antes que modificara inclusive. Nose si modifique algo x error dentro del blog o algun scrip haga interferencia. T ruego nuevamente puedas ayudarme.
      En el Lightbox todo perfecto :D

      Eliminar
    7. Ahí no sabría cómo ayudarte pues no sé qué otros cambios hayas hecho antes de que eso pasara, tampoco sé cómo funcionen los scripts de esa plantilla, nunca la he usado, bien podría ser una cuestión en la configuración de la plantilla o alguna modificación que realizaste.
      Si la causa fue el cambio del script regrésalo como estaba y ve haciendo los cambios uno a uno hasta que te cerciores que todo está bien.

      Saludos.

      Eliminar
    8. Gracias potro ya pude resolverlo yo mismo. era otro script q estaba dando problemas pero ya lo retire. Pero tengo una pregunta o una duda. Como hago para cuando vaya a compartir una entrada del blog en las redes sociales por ejemplo se vea el titulo de la entrada y un sumario de la entrada y no solo el titulo del blog como aparece actualmente ?

      Eliminar
    9. Añade metatags para Facebook:
      http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html

      Y de una vez agrega micro datos Schema en tu plantilla:
      http://www.oloblogger.com/2012/04/microdatos-schema-en-plantillas-blogger.html

      Eliminar
    10. Saludos potro como siempre un gusto aprender. Tengo una nueva inquietud. Acabo de instalar la plantilla Modern Mag de templateism. En el carousel widget de la pagina principal muestra fecha y numero de comentarios. Como no tengo activados los comentarios de blogger sino de facebook, aparece "undefined". Me gustaria eliminar estos elementos de carousel., pero no stoy seguro de como hacerlo. Si me pudieras ayudar seria excelente. este es mi blog: www.apuredigital.com

      Eliminar
    11. Hola de nuevo. Prueba poniendo esto en los estilos de tu plantilla:
      .recent-com {display:none}

      Eliminar
    12. Gracias potro, si funciono. Quedo excelente :D De veras q seria d nuestros blogs sin tu ayuda :(. Sabes q tengo una inquietud. He visto varias nuevas plantillas q tienen incorporado un nuevo lightbox q no es el nativo de blogger. Tienes alguna idea q como poner a funcionar ste nuevo lightbox en mi blog? La verdad se ve chulisimo como en ste blog d pruebas: http://newsly-pbt.blogspot.com/2013/11/sample-post-with-links-paragraphs-and_21.html Ojala puedas orientarme. seria muy feliz de tenerlo asi en lo blog.!!.

      Eliminar
    13. No he podido identificar qué Lightbox es pero se parece mucho a este:
      http://ciudadblogger.com/2010/01/lightbox-imagenes-en-ventanas-modales.html

      Y esta es otra opción más completa:
      http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html

      Eliminar
    14. Listo potro t comento q me decidi a cambiar d plantilla por la q tiene el lightbox q me gusta y me funciona excelente.. Gracias x todo tu aporte y siempre responder las inquietudes!. Lo unico q no logro es quitar el "undefinid" de comentarios en las publicaciones d la portada. Si sabes donde colocae el {display:none} para ocultarlo, t lo agradeceria muchisimoo.!!!

      Eliminar
    15. Puedes ocultarlo de esta forma:
      .comt {display:none;}

      Eliminar
    16. potro no consigo el .comt dentro de la plantilla. si puedes darme un poco mas de referencia sonde debo colocar xq aun no lo ubico potro :(

      Eliminar
    17. listo ya entendi como colocarlo. Gracias potro. mi blog no seria nada sin vuestra ayuda

      Eliminar
  5. Es buele leer uno de tus post Potro. Apenas me vengo enterando de que blogger tiene formulario de contacto XD, como me gustó la opcion de justform que pusiste en uno de tus otros post, pues me quedo con ella, aun asi me hace pensar que debo ver más acerca de los elementos que ofrece blogger.

    ResponderEliminar
  6. Es bueno leer uno de tus post Potro.
    Apenas me vengo enterando de que blogger tiene formulario de contacto XD, como me gustó la opcion de justform que propusiste en uno de tus otros post, pues me quedo con ella. Aún así me hace pensar que debo ver más acerca de los elementos que ofrece blogger.

    ResponderEliminar
    Respuestas
    1. Es muy básico éste, el que tú usas es muchísimo más completo en varios sentidos, pero claro está que hay quienes no necesitan tantas opciones y sólo requieren algo tan simple como el que ofrece Blogger.
      Yo también me quedo con JotForm ;)

      Eliminar
  7. Potro, cordial saludo, gracias por este tutorial, muy bueno, le da personalidad al blog.

    ResponderEliminar
  8. Gracias! tengo uno puesto pero igual me animo a utilizar alguno de ellos y jugar un poco con los colores : )

    ResponderEliminar
  9. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hay que dedicarle más al contenido, recuerda que los robots de los buscadores buscan texto, entre más texto mejor.
      Aun así tu blog sí está indexado:
      http://oi62.tinypic.com/14wc17p.jpg

      Pd. Elimino el comentario por el aviso que está aquí arriba.
      Saludos!

      Eliminar
  10. Saludos potro, me hiciste tanta falta que me pasé a Tumblr (www.diegoblog.co) jejeje.. un abrazo!!

    ResponderEliminar
  11. Hola Potro, ya empezamos a preguntar ;) jeje

    Puedo elegir/cambiar/añadir la dirección a la que llega el mensaje del formulario??

    Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Qué gusto leerte de nuevo Gorka!
      Lamentablemente no, siempre le llegará al administrador del blog, hasta ahora no tiene ni una sola opción de configuración el gadget :/

      Eliminar
    2. GRACIAS MAJO!!!

      Lo mismo digo ;)

      Eliminar
  12. muchas gracias voy a poner alguno aver que tal ;)

    ResponderEliminar
  13. Excelente POTRO buen regreso ..... Potro desde hace tiempo te prometí una pequeña donación por que la mereces .... ahora que volviste liberare espacio en mi tarjeta de paypal y PUM =) UN ABRAZO

    ResponderEliminar
    Respuestas
    1. Vale, con eso me compraré por delicioso un café colombiano :)
      Otro abrazo para ti.

      Eliminar
  14. Gracias Protro Aqui Funcionando Perfecto Pero Una Pregunta Como Le Resto El Ancho? esq se sale un poquito de su cuadrito oK Gracias ||| Y No Sabes xq Tengo El buscador Personalizado De google y El Otro de Blogger EN MI blog Pero Las Entradas Antiguas No Salen!!! No Se Porq , Me Puedes Ayudar ( El nombre De Mi Blog Se llama)
    TutorialesByNeto

    ResponderEliminar
    Respuestas
    1. Hola :)
      En el max-width: 280px; puedes modificar el ancho máximo que quieres que tenga el gadget, ¿a eso te refieres?
      Los buscadores ambos los probé buscando una de las primeras entradas que publicaste (del día 19 de diciembre) y en los dos buscadores apareció la entrada.
      Saludos.

      Eliminar
    2. mmm Entonces Mi Buscador No Salen mmmm oK Gracias

      Eliminar
  15. Muy Buen Post Querido Amigo, me alegra de que estes de nuevo por aqui. Saludos desde Algeciras, España.

    ResponderEliminar
  16. volta explendorosa, e este post demais da conta!
    Parabens
    Porto!

    ResponderEliminar
  17. Gracias potro,exactamente ahorita estoy creando una subpágina de "Contacto", bien andaba por mi cuenta de google+ y ahí vi tu publicación ;)
    Saludos grandes.

    ResponderEliminar
    Respuestas
    1. Genial, ojalá te sirva de algo esta entrada para lo que andas haciendo :)

      Eliminar
  18. Muy bueno recién regresas y regresas con muy buenos post sigue adelante

    ResponderEliminar
  19. buen post, justo necesitaba uno, saludos!

    ResponderEliminar
  20. Justoe staba buscando unos para mi web quedaron perfectos, saludos!

    ResponderEliminar
  21. Que alegría que hayas retornado Potro. Tu blog siempre es referencia obligada para hacer las cosas bien y de manera sencilla.

    Con respecto a este formulario yo le encontré dos fallas que me llevan a usar otro externo sin limitaciones que no diré cual es para no hacer spam.

    Primero, no permite que uno decida hacia cual de las cuentas email de la que es titular llegue. Yo uso Hotmail, pero mis blogs tienen cuenta de gmail.

    Segundo, si cuentas con más de un blog, no te permite definir una marca para que te indique desde cual ha sido escrito el mensaje.

    Supongo que seguramente tu encontrarás la manera de solucionarlo, pero yo he preferido usar otro sistema gratuito.

    Un abrazo Potro y que este nuevo comienzo te depare todo lo mejor.

    ResponderEliminar
    Respuestas
    1. Qué amable comentario OPin.

      A mí lo que se me ocurre para solucionar el problema de dónde enviar los correos es crear una regla en tu correo, por ejemplo, que todos los correos que lleven como asunto "Formulario de contacto de Blogger" se redirijan a otra cuenta.
      Lo segundo sí tiene un aviso, aunque no en el asunto sino dentro del correo, al abrirlo verás que al final dice: "Nota: Este correo electrónico se ha enviado a través del gadget Formulario de contacto de la página http://nombre-de-mi-blog.blogspot.com"

      Pero si nadie quiere complicarse siempre habrá buenas opciones de formularios, yo el único "pero" que les pongo es que muchos (no todos) te limitan con la cantidad de envíos por mes, pero si tampoco necesitas mucha cantidad entonces eso no representa problema alguno :)

      Otro abrazo para ti.

      Eliminar
  22. Ah qué maravilla!! A la carga nuevamente!! Excelente post como siempre, Potro. Yo quisiera que hicieras un post sobre Mailchimp, Feedburner me ha dado dolores de cabeza espeluznantes y no le agarro la onda a su alternativa mailchimp, ya revisé muchos blogs donde explican como hacer las campañas y todo eso pero no le entiendo!!! Se supone que el servicio es gratis pero a mí me llegó un correo donde ya comenzaban a cobrarme y me suspendieron el servicio, yo leí que solamente pagabas si superabas los 2000 suscriptores, en fin, no doy una y realmente me interesa enviar mis reseñas a la gente que se suscribe al feed. Quiero también preguntarte ¿Qué me recomiendas o qué servicio me recomendarías? Feedburner solamente manda mis reseñas cada vez que quiere!! No me sirve.

    Un gran abrazo y... bienvenido de vuelta!!! =D

    ResponderEliminar
    Respuestas
    1. La verdad es que nunca he usado MailChimp, pero sí es cierto que es gratis sólo cuando son menos de 2000 suscriptores, no sé qué políticas manejen por la cual te hayan podido empezar a cobrar.
      Yo uso Feedburner desde siempre y la verdad es que nunca he tenido el problema que mencionas, al menos creo que a todos mis suscriptores les llegan las actualizaciones del blog.
      Quizá lo que haga falta es que configures el horario de entrega, y tal vez ayude haciendo un ping cada vez que publiques en tu blog:
      http://ciudadblogger.com/2010/01/acelerar-el-tiempo-de-actualizacion-del.html

      Pon a prueba eso, con suerte y con eso se resuelven tus problemas del feed :)

      ¡Un beso grande!

      Eliminar
  23. Hola Potro
    Para no ser muy bueno en el diseño, ¡¡hay que ver lo bonitos que te han quedado todos!!, bueno, el del lacito no me va mucho, jajajajaja pero está bonito igualmente
    Yo tengo puesto el gadget de Seguir por correo electrónico y es el único que veo que tiene el sobre azul en lado izquierdo cuando lo eliges, no veo ninguno que ponga Formulario de contacto, no se si serán lo mismo los dos
    Uissss, siiiiiii, ya lo vi, estaba mirando en Lo básico y resulta que sale en la pestaña Mas gadgets, así que hoy no pregunto nada jejeje
    Abrazos

    ResponderEliminar
    Respuestas
    1. Jajaja, ya te estaba respondiendo y aún no terminaba de leer tu comentario :P
      ¡Abrazos y besos!

      Eliminar
  24. Muy buenos, Potro!...y yo que ni me había dado cuenta de que este gadget existía ya, :)...ay, tanto tiempo sin verte por aquí hasta había perdido interés por el mantenimiento de mi blog. Ahora estoy segura de que lo recuperaré. ¡Muchas gracias!
    Un beso y un abrazo enormes.

    ResponderEliminar
  25. Excelente artículo Potro, y felicidades por tu regreso :D!

    ResponderEliminar
  26. Que Bonitos Potro!!
    Adoro dos el carta y el metálico y que maravillo es sentirte de vuelta, ahora que estas presente ☺ te podre torturar con lo pendiente muejeje.

    Saluttes ^^

    PD: y gracias por este encantador aporte.

    ResponderEliminar
  27. Ya lo Instale en mi Plantilla Mil Gracias POTRO...

    ResponderEliminar
  28. hola el potro, como es q mi blog esta indexado -.- eso es por lo q no aparece mis entrada ?

    ResponderEliminar
    Respuestas
    1. Indexado significa que tu blog está incluido en los resultados de búsqueda. Si tu blog aparece en los resultados entonces tus entradas también, sólo que no siempre aparecen en la primera búsqueda que hagamos, entre más relevante sea tu blog para Google más fácil será que tus entradas aparezcan a la primera.

      Eliminar
  29. Potro como puedo poner las categorias de mi blog asi... http://i.imgur.com/OCUIoIW.jpg

    ResponderEliminar
    Respuestas
    1. Es un Leer más automatizado, sólo que está condicionado para que sólo se muestre en ese tipo de páginas.
      Básicamente es cambiar la etiqueta <data:post.body/> por este código:
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <data:post.body/>
      <b:else/>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <data:post.body/>
      <b:else/>
      <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb' itemprop='image'>
      <a expr:href='data:post.url'>
      <img expr:src='data:post.thumbnailUrl'/>
      </a>
      </div>
      </b:if>
      <data:post.snippet/>
      <b:if cond='data:post.hasJumpLink'>
      <b:else/>
      <section class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </section>
      </b:if>
      </b:if>
      </b:if>
      </b:if>

      Eliminar
  30. Potro hace unos meses me eliminaron mi blog, y pedi recuperarlo y supuestamente me lo devolvieron pero me aparece en el escritorio de blogger, y cuando lo busco en google me aparece, y aparece de la siguiente manera, te dejo la url para que me respondas y me ayudes. http://wwwpavasfamosas.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Al parecer te devolvieron el blog (la URL) pero te eliminaron el contenido, quizá el contenido de tu blog violó alguna de las políticas de contenido y por eso decidieron eliminar todo lo que había en él.

      Eliminar
  31. amigo y como puedo sacarlo de estar indexado ayudame

    ResponderEliminar
  32. Saludos mi buen amigo Potro, qué gusto tenerte de nuevo para darle vida a nuestros blogs, espero un día de estos dedicas una entrada a las vistas dinámicas, en especial a qué mejoras se les pueden hacer y de pronto analizar si es posible incluir un anuncio más, pues sólo muestra dos.

    Edwin Yanes
    www.poesiagt.com

    ResponderEliminar
    Respuestas
    1. Hola Edwin, desgraciadamente lo que se le puede hacer a las Vistas Dinámicas es muy escaso, casi nulo. Si se quiere tener un blog personalizado al máximo lo mejor es usar otro tipo de plantillas.

      Saludos y gracias por tu comentario!

      Eliminar
  33. Saludos Potro Disculpa la molestia ... tengo una duda como hago para poner el formulario un poco mas chico osea no tan alto... agradezco si me puedes responder.. un Abrazo !!!!

    ResponderEliminar
    Respuestas
    1. Saludos Joralgom Joral. Pon en 0px el margin-bottom que está dentro de /* Estilos de los campos */
      Con eso se reducirá un poco la altura del gadget.
      Un abrazo.

      Eliminar
    2. Mil Gracias POTRO.. funciono... no fue mucho pero quedo mejor... un Abrazo brody !!!!

      Eliminar
    3. Si quieres reducirlo más puedes poner un height debajo de .contact-form-widget {
      Por ejemplo:
      height:250px;

      Pero, eso acortará el elemento, no lo ajustará, es decir, que si te excedes el campo de los mensajes y el botón de enviar podrían quedar fuera del gadget.

      Eliminar
    4. Mil Gracias por tomarte el tiempo en contestar bro eres muy amable !!!!!

      Eliminar
  34. potro podrias enseñarnos a colocar dos anuncios debajo del titulo, asi juntos como los tiene usted, como se hace paso a paso.

    y tambien la barra que despliega el blog hacia abajo asi como lo tiene usted como es, gracias por su regreso.

    ResponderEliminar
    Respuestas
    1. ya lo logre 2 bloques adsense solo me falta barra que despliega el blog hacia abajo

      Eliminar
    2. Hola Antonio, ¿te refieres a las flechas? yo tengo estas:
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Eliminar
  35. gx a Dios que esta de vuelta y esta muy jevi el post

    ResponderEliminar
  36. gracias! me llevo el formulario estilo metalico

    ResponderEliminar
  37. muy bueno
    como siempre
    sorprendente
    Gràcias Potro!!!!

    ResponderEliminar
  38. Hola Potro !!! Tengo porblemas en el armado de mi blog. Agregué el gadget Botones de contacto y Formulario de contacto (aplicando la modificación en HTML que publicaste), pero en la barra lateral de gadget no aparece ninguno de los dos. Desde ya agradeceré tu ayuda ya que estoy experimentando po primera vez en hacer un blog. Excelentes tus consejos y gracias por compartir !!!!!

    ResponderEliminar
    Respuestas
    1. Hola, me parece que este gadget no está disponible para las Vistas Dinámicas
      :(

      Eliminar
  39. Hola Potro como puedo hacer mis entradas con esta http://oi59.tinypic.com/346qek7.jpg

    ResponderEliminar
    Respuestas
    1. Hola Zheyn Castle, hay plantillas tipo magazine que ya tienen esa característica:
      http://btemplates.com/blogger-templates/magazine/

      Eliminar
  40. alfin de regreso, que bueno todo un exito los comentarios estan lloviendo algun dia mi blog tendra tanto publico.

    ResponderEliminar
  41. Hola Potro.
    Tengo una duda con mi blog y espero que me puedas ayudar. Compré una plantilla prediseñada para mi blog, puedo cambiar todos los parámetros menos una firma del autor en el slider, o por lo menos no veo donde puedo quitarla.
    El blog es vegrados1.blogspot.com, la firma está justo en la parte derecha-abajo del slider.
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola VEINTISIETEGRADOS, no sé a qué acuerdo hayas llegado con el diseñador de la plantilla, pero si has pagado por ella puedes pedirle al autor que remueva el enlace del crédito.
      Saludos.

      Eliminar
  42. Buen Tuto y felicidades por el Blog, a ver si me voy aclarando un poquito que estoy muy verde,
    PD: les dejo el enlace de mi Blog http://dibuline.blogspot.com.es/

    ResponderEliminar
  43. Hola Potro, quisiera saber tu opinión sobre el deseño de mi pagina: jeromeguitton.org

    Saludos

    ResponderEliminar
    Respuestas
    1. En lo personal a mí ese tipo de diseños me gustan mucho :)

      Eliminar
  44. Hola Potro, quisiera saber como puedo hacer que el fondo de pantalla de una pagina del blog sea diferente al de otra pagina, Gracias

    ResponderEliminar
    Respuestas
    1. Usa condicionales, con ellas se consigue todo eso:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Eliminar
  45. Hola de nuevo Potro me alegro de tu vuelta, sabia que regresarias por eso te seguía teniendo en mi escritorio. un saludo

    ResponderEliminar
  46. Hola de nuevo Potro: te tenía en mi escritorio porque sabía que volverias, me alegro.
    un saludo

    ResponderEliminar
    Respuestas
    1. Gracias Priamo, qué gusto saber que tú también estás de vuelta por acá.

      Eliminar
  47. querido Potro, me gustaria saber si sabes como poner uno de estos formularios de contacto, para que se vean en una pagina estatica del blog (estoy empezando con este blog http://eldiariodelassumis.blogspot.com y me gustaria poner el formulario en la pestaña que dice "Cuentame" pero que quedara encima de todas las entradas con esa etiqueta... ) no se si se entiende ... Gracias por volver!

    ResponderEliminar
    Respuestas
    1. Se entiende perfectamente ;)
      Mira esta entrada de Oloblogger, ahí explica cómo poner el gadget en una página estática:
      http://www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html

      Eliminar
    2. Muchas gracias Potro... ! tus entradas siempre me resuelven las dudas :) ... deberias escribir un libro sobre blogger :)

      Eliminar
  48. Excelente post y la verdad Blogger estaba en mora de colocar el gadget referente.

    ResponderEliminar
  49. ¿Cómo hago para ponerlo en inglés? ¿O cambiará en función del sitio donde se visualice la página?

    ResponderEliminar
    Respuestas
    1. Según recuerdo el idioma de los gadgets cambia al momento que en tu Escritorio de Blogger cambias el idioma, eso se cambia en la parte superior derecha, junto al icono del engrane.

      Eliminar
  50. Pues... no me funciona. añadi el codigo (limón) guarde y el formularo sigue igual.

    http://mygymradio.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Lo que ha pasado es que al poner el código eliminaste una llave de cierre } del código que está arriba. Eso ha hecho que no funcionen estos estilos. En esta entrada hay más información sobre ello:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  51. Hola Potro, no sabia que habia formulario de blogger, está muy bien pero yo queria meterlo destro de una página llamada contacto, no como gadget.
    Como puedo hacerlo?
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Vhila, en el comentario #51.1 he dejado un enlace que explica cómo hacer lo que deseas.
      Saludos.

      Eliminar
  52. Potro, encantada de saludarte, no consigo el ]]> en el blog, me podrías ayudar, es urgente, debo mejorar el blog

    ResponderEliminar
    Respuestas
    1. Hola, da click dentro del área de los códigos, luego presiona CTRL + F y busca esa etiqueta. Pero es importante que des ese click en los códigos para que se active el buscador del editor y no el del navegador.

      Eliminar
  53. Hola potro espero me recuerdes! Se me hace que te fuiste a un crucero en tu año sabatico jejesaludos que gusto que ya andes de regreso.
    Me podrias ayudar? como le hago para poner este gadget en una página estática?
    saludos cordiales :)

    ResponderEliminar
    Respuestas
    1. Uy, qué más quisiera haberme estado en un crucero todo este tiempo, yo creo que hasta me quedaba dos años ahí :)
      Mira el comentario #51.1 ahí puse un enlace donde Oloman explica cómo hacerlo.
      Saludos!

      Eliminar
  54. Hola Potro otra vez por aquí. mi bolg es: http://odiliabendezuart.blogspot.com.es/, tengo otra consulta. He intentado agregar el gadget para correo de contacto, pero había que suscribirse a feedburner, lo hice por que no había otra opción mas, el gadget esta creado pero solo sale un un recuadro donde dice Email adress...... Submit, pero al abrir vuelve a pedir que suscriba a feedburner y nada más... parece que no está bien verdad? que hago? por favor dime. Por otro lado, en diseño de codigo HTML solo encuentro <:skin>... ó <b:template-skin...<...</b:template-skin
    no me aparecen las dos barras y tampoco las tengo en el teclado para buscarlas, mi pregunta es como soluciono lo de feedburner y en caso de solucionar eso exactamente en que lugar pegaría los códigos del estilo básico? hay que pegarlo todo lo que pones allí verdad?. Nuevamente gracias por adelantado... a ver si al menos doy un paso mas...Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Odilia. Te platico un poco sobre este tema de la suscripción al feed por correo:
      Si no tenías una cuenta de Fedburner entonces al momento de agregar el gadget se te crea una (con tu misma cuenta de Google ya que Feedburner es de Google), incluso si entras a Feedburner con tu cuenta de Google (la misma que usas para tu blog) verás que aparece un feed que es el de tu blog donde agregaste el gadget. Se supone que ya debe estar habilitada la suscripción por correo, en caso contrario sólo habilita dicha opción en las opciones de configuración.

      Ahora, el gadget ya que esté en tu blog cuando la gente ponga su dirección de correo se abrirá una ventana pop up para que confirmen que se quieren suscribir, esto es para todos. Una vez que el suscriptor confirma que quiere suscribirse a tu blog le llegará un correo de activación, realizando esa activación ya podrá recibir las actualizaciones de tu blog en su correo.

      En cuanto a la etiqueta ]]></b:skin> la puedes encontrar haciendo click a la flechita que está junto a <b:skin>...</b:skin>

      Saludos.

      Eliminar
    2. Hola Potro, perdona... he seguido todo el proceso, ya copié y pegué el código del estilo básico exactamente allí, antes de las llaves, donde indicas, pero no ha cambiado nada, es decir no aparece nada mas que la ventana de feedburner cuando introduces el correo electrónico, falla algo verdad? y por que me sale la palabra Submit (suscribirse - en inglés) como lo cambio a español...Gracias y disculpa nuevamente Ckac!!!

      Eliminar
    3. Hola de nuevo. Creo que hay una confusión. El gadget de suscripción es uno, y el gadget de contacto es otro. El de suscripción (que es el que tienes puesto) es para que los usuarios puedan recibir las entradas de tu blog en su correo. El de contacto (que es el que se menciona en este post) es para que los usuarios puedan enviarte un mail desde tu blog.

      Si quieres cambiar esos textos del inglés al español busca los textos en la plantilla y cámbialos por los que desees. Para que te sea más fácil, esos textos los encuentras después del gadget que tiene como ID 'FollowByEmail1', o bien, busca el gadget que se llama "Correo de Contacto".

      Pero repito, ese no es para ponerse en contacto contigo, sino para que se suscriban a tu blog.

      Eliminar
    4. Si, si, eso es lo que pasó, he confundido los términos, (es lo que tiene ser novata) efectivamente son cosas diferentes, gracias por aclararme, en realidad lo que quería poner es el correo electrónico, para que pudieran escribirme, y he creado el de suscripción, ya me servirás igualmente, gracias por decirme donde cambiar el texto de submit... No quisiera abusar de tu confianza pero me sería de gran ayuda si me dijeras (por favor) como enlazar la dirección de mi correo electrónico en la pagina (pestaña) que tengo creada para contacto. estuve viendo algo relacionado como lo siguiente poniendo mis datos Mi correo pero lo que no sé es donde ponerlo y donde me lo colocará una vez que lo ponga. podrías explicarme? como lo `pongo de manera que me salga en la pestaña que tengo creada como Contacto. gracias, gracias, muchas gracias por tu infinita paciencia, genio!!!

      Eliminar
    5. ¿Te refieres a poner el gadget de contacto en la pestaña "Contacto"? Puedes hacerlo siguiendo esta entrada de Oloblogger:
      http://www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html

      Si no quieres poner el gadget de Contacto también puedes optar por un sencillo botón para enviar correos, como este:
      http://ciudadblogger.com/2009/10/opcion-de-enviar-mail-con-asunto-y.html

      O algo más sencillo aun, una imagen que enlace a tu correo:
      http://ciudadblogger.com/2009/04/imagen-de-correo-personalizado.html

      Eliminar
    6. Me temo que ha creado un ícono y lo ha ubicado en la parte superior izquierda del blog, y no hay nada mas que espacio, y ahora ya no lo ubico en en HTML, como hago para cubicarlo y cambiar de lugar o corregir lo que está mal, en su defecto eliminarlo? por favor... disculpa mi torpeza, pero así estoy aprendiendo, solo espero que puedas ayudarme... gracias...

      Eliminar
    7. Es porque el código lo has puesto después de la etiqueta BODY.
      Debes poner el código donde quieras mostrarlo, ya sea en un gadget HTML/Javascript, o dentro de la página Contacto.
      También te recomiendo que si vas a usar la imagen del correo que genera ese sitio, subas la imagen tu misma a Picasaweb para que no dependas de ese servidor ya que sus imágenes se eliminan después de un rato y por eso ya no aparece más en tu blog.

      Saludos.

      Eliminar
  55. Excelente tutorial, Estoy haciendo mis pininos desde cero e inserté el código para el estilo postal en http://matematicas-amables.blogspot.mx/ el problema es que el texto "Formulario de contacto" aparece a la izquierda del blog y el formulario insertado está en el centro. ¿Así debe de ser? ¿No pueden aparecer en el mismo lado? Gracias anticipadas.

    ResponderEliminar
    Respuestas
    1. Hola, sólo agrega estos estilos en tu plantilla:

      #ContactForm1 h2 {
      text-align: center;
      }

      Saludos.

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

    ResponderEliminar
  57. Muchas gracias por esta entrada, está genial. Combinando dos tutoriales uno tuyo y otro de Oloman, conseguí algo un poco apañado, en una página estática, y me gusta mucho como queda. Un saludo Potro ;)

    ResponderEliminar
    Respuestas
    1. Qué gusto me da saberlo Maluy, que tengas buen inicio de semana!

      Eliminar
  58. Se me olvidó darte el link exacto, por si quieres verlo http://loqueheprobadohoy.blogspot.com.es/p/contacto.html

    ;)

    ResponderEliminar
  59. Mucho gusto nuevamente, ya lo he puesto en el blog: http://todoeventosgt.blogspot.com/ solo tengo una consulta: yo estoy como "administrador" y tengo otro usuario como "autor" como hago para que los correos enviados por el formulario le lleguen al autor y no al administrador. Gracias.

    ResponderEliminar
    Respuestas
    1. Me temo que no se puede modificar la dirección de envío Daniel, por defecto llega al administrador. Supongo que tendrás que crear una regla en tu gestor de correo para que todos los envíos que lleguen desde aquí se reenvíen a la cuenta del autor.

      Eliminar
  60. ¿El widget no se puede abrir en una pestaña nueva, que no sea fijo en la barra lateral, sino que la pueda vincular a un boton de mensajes?

    ResponderEliminar
    Respuestas
    1. Podrías poner el gadget en una página de tu blog (en los comentarios he puesto varias veces un enlace a ese tutorial) y luego en tu sidebar podrías poner un enlace a esa página, ya sea un enlace de texto o una imagen.

      Eliminar
  61. Y, donde puedo conseguir el código de los botones sociales que tienes en la portada...los del feed, correo, facebook....?

    ResponderEliminar
    Respuestas
    1. Más adelante lo publicaré, ya lo tengo contemplado.

      Eliminar
  62. Hola Potro, perdoname la ignorancia, pero, Cual es la funcion e importancia del formulario de contacto? No soy muy diestra en estos menesteres. Gracias. Me alegra mucho que hayas vuelto, mi blog es lo que es gracias a tus ayudas.

    ResponderEliminar
    Respuestas
    1. Gracias Coromitas Franco, los formularios de contacto tienen muchos usos según las necesidades de cada blog, algunos lo usan para que los usuarios puedan mandar sus dudas a los autores del blog, otros lo usan para que los usuarios reporten algún link roto o algún problema con el blog, otros lo usan para mandar saludos, etc.
      No todos los blogs necesitan un formulario, pero hay muchos que sí, y como te decía antes, dependiendo del blog es el tipo de uso que se les da a estos formularios.

      Saludos.

      Eliminar
    2. Muchisimas gracias Potro. Saludos para ti tambien.

      Eliminar
  63. Hola Potro, tengo un problema con el formulario de contacto. El botón para el enviar el formulario al parecer no esta cumpliendo con su función, ya que al hacer click no envía el formulario. Si te puedes dar una vuelta por mi blog, te lo agradecería. Saludos! http://fedormeinhardt.blogspot.com/p/blog-page_2.html

    ResponderEliminar
  64. Hola Potro, tengo un problema con el formulario de contacto. El botón para el enviar el formulario al parecer no esta cumpliendo con su función, ya que al hacer click no envía el formulario. Si te puedes dar una vuelta por mi blog, te lo agradecería. Saludos! http://fedormeinhardt.blogspot.com/p/blog-page_2.html

    ResponderEliminar
    Respuestas
    1. Hola, acabo de hacer una prueba y al parecer sí se ha enviado, o al menos eso dice cuando le doy click en Enviar: http://oi58.tinypic.com/13ye908.jpg

      Eliminar
    2. Hola potro, sí, ayer mismo lo pude resolver, verifique los pasos nuevamente, y me faltaba un codigo. Gracias!

      Eliminar
  65. Wow! Estan hermosos!
    Gracias por compartir!
    A ver cual escojo de todos jajaja

    ResponderEliminar
    Respuestas
    1. Qué bueno que te han gustado porque me llevó varias horas hacerlos :P

      Eliminar
  66. Me encanta el de air mail, muchas gracias por los aportes, y por ponerte a diseñar estas cosas y compartirlo con todos, que grande eres potro.
    Una pregunta, ya para rizar el rizo: se puede editar de forma que quede en dos columnas? los campos de nombre y correo a la izquierda y el campo para mensaje a la derecha, para que quede en horizontal y no en vertical. He estado buscando algo por ahí y encontré códigos pero no logro aplicarlo al de blogger... Muchas gracias

    ResponderEliminar
    Respuestas
    1. Gracias Andrea, el de air mail es mi favorito :)
      Intenta haciendo lo siguiente: localiza el código del formulario y con mucho cuidado elimina toda esta parte:
      <div class='contact-form-widget'>
      <div class='form'>
      <form name='contact-form'>
      <p/>
      <data:contactFormNameMsg/>
      <p/>
      <div style='text-align: center; max-width: 222px; width: 100%'>
      <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
      <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
      </div>
      </form>
      </div>
      </div>

      Una vez que lo has quitado pon esto en su lugar:
      <div class='contact-form-widget'>
      <div class='form'>
      <form name='contact-form'>
      <div style="float:left;">
      <p>Nombre<p>
      <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
      <p>Correo electrónico *</p>
      <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
      </div>
      <div style="float:left;">
      <p>Mensaje *</p>
      <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'/>
      <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>
      </div>

      Espero que eso dé los resultados esperados.
      Saludos.

      Eliminar
  67. Hola, gracias por compartir estas explicaciones con todos. Como soy el más torpe de por aquí, necesitaba saber cómo se implementan estos formularios. Vamos, que no creo que cogiendo el código de cualquiera de los ejemplos de arriba y poniéndolo en html de algún gadget o página funcione. Quería saber si primero quizá, hay que crear el de blogger, luego localizarlo en plantilla y cambiarlo. Y luego, decir que necesito implementarlo en una de las páginas que se crean con blogger, una que yo he llamado CONTACTO, y deseaba ponerla al final de un texto que tengo. Gracias por la paciencia

    ResponderEliminar
    Respuestas
    1. Hola lilolaleilo. Si el formulario lo quieres en la sidebar entonces sí, primero debes añadir el gadget desde la opción "Añadir un gadget" en Diseño, y después pegar el código del formulario que más te guste donde se indica. Con eso ya tendrás el formulario y con el estilo modificado.
      Ahora que, si lo quieres en una página entonces mira el comentario #51.1, ahí hay un enlace donde se explica cómo poner el formulario de contacto de Blogger en una página estática.
      Saludos.

      Eliminar
  68. Son geniales, los he probado y me funcionan sin problemas. Gracias

    ResponderEliminar
  69. Hola Porto, que tu aporte es estupendo no te lo digo que lo has oido miles de veces :)). Dime porfa como cambio los : nombre , correo electronico, enviar en otra idioma ? intento busca en el codigo y no los encuentros. Con umil respeto Valerio, blogger principiante.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Val Eriu. Mira el comentario #71.1, si sustituyes el código por ese verás esos nombres y pondrás modificarlos por los que gustes. Saludos.

      Eliminar
  70. Hola Potro, como siempre vengo a dejarte u̶n̶o̶s̶ un comentario.
    Miré la entrada que aparece en el comentario 51.1, lo intenté, pero me cuesta entender las explicaciones de Oloman, ya le mandé un comentario pidiéndole ayuda.
    Su entrada sirve para colocar el diseño que el colocó en su blog y no alguno de los tuyos (que son los que me gustan) Espero puedas ayudarme (como siempre.) Mil millones de gracias.
    P.D: ¿Puedes hablar sobre los avisos legales que circulan en las páginas web?

    ResponderEliminar
    Respuestas
    1. Hola Facu, omite el primer paso de su entrada, sólo pega el último código en tu página estática, y si lo deseas usa uno de los estilos que menciono en esta misma entrada.
      Sobre los avisos legales no tengo nada, de hecho yo no tengo uno en el mío :(

      Eliminar
    2. Agregué el gadget. Borré el codigo en gris. Y agregué el ultimo código en una página nueva. No funcionó. Qué salió mal?

      Eliminar
    3. No hay que agregar el gadget pues no lo quieres en un gadget, sólo agrega lo que indica Oloman en su entrada, agrégalo en una página.

      Eliminar
    4. Copié el ultimo código y lo pegué en una página en blanco, aquí está: http://arrobaejemplo.blogspot.com.ar/p/blog-page.html
      Se ve como un gadget, pero, no funciona.
      Por favor ayúdame, gracias Potro!

      Eliminar
    5. Ya veo :/
      Quizá debas consultarle a Oloman, seguro él te puede decir si aun funciona ese método, o si hay algo que está faltando por hacer.

      Eliminar
    6. Luego de muchos, muchos, comentarios y de que Oloman casi sufriera una crisis nerviosa, con su ayuda, he logrado que funcione. Gracias Potro!

      Eliminar
    7. Me alegro que lo hayas resuelto :)

      Eliminar
  71. hola potro
    la pregunta es adonde llegan los mensajes enviados desde estos formularios a q cuenta......

    ResponderEliminar
    Respuestas
    1. Hola, los correos llegan a tu cuenta de correo de Google, la misma que usas para ingresar a tu blog.

      Eliminar
  72. hola el potro
    muchas gracias por tu ayuda ya logre solucionar el inconveniente solo que llegaban pero se almacenaban en correos sociales y quite el filtro y listo.
    ahora tengo otras pregunta si hay posibilidad de editar este formulario cambiar tamaño y color o agregar mas campos.... te agradezco de todos modos ahora que lo tenga listo te muestro el blog principal para que le des el visto bueno...

    ResponderEliminar
    Respuestas
    1. Hola, cambiar el aspecto sí, a razón de ello es que se publicó esta entrada. Viendo los estilos podrás personalizarlo más si lo deseas. Agregar o eliminar campos es imposible por ahora.

      Eliminar
  73. Hola El Potro,
    He colocado un Formulario de contacto sencillo en mi blog, pero me gustaría saber si puedo añadir una nueva frase con casilla que ponga Asunto*, encima del mensaje, con su respectivo cajón y que sea obligatorio el ponerlo (*), como lo tengo puesto para email y mensaje.

    Ya me dirás, muchas gracias.
    Saludos.

    ResponderEliminar
    Respuestas
    1. ¿De este mismo formulario de Blogger? Imposible, por ahora no se le pueden añadir más campos que los que ofrece. :(

      Eliminar
    2. Ok, lo dejaremos así de momento. A ver si lo mejoran.
      Muchas gracias.
      Saludos.

      Eliminar
  74. Otra vez el pesado jeje Potro sabes como podemos cambiar el texto que aparece? es decir modificar el "nombre" "correo electronico" "Mensaje"... hay alguna forma de hacerlo? Muchisimas gracias

    ResponderEliminar
    Respuestas
    1. Busca estas partes en tu plantilla y cámbialos:

      <data:contactFormNameMsg/>
      <data:contactFormEmailMsg/>
      <data:contactFormMessageMsg/>

      El primero es para el "Nombre", el segundo para "Correo electrónico" y el tercero para "Mensaje".

      Eliminar
  75. Hola Potro!! Muy buenos todos los trucos y ayudas que das! Te hago una pregunta, y perdón si ya la respondiste, intente ver si alguién había preguntado pero son muchos los comentarios. Quería saber si es posible poner el formulario de contacto en una página por ejemplo, y en la página principal solamente poner un enlace al formulario. Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola :) En el comentario #51.1 hay un enlace donde se explica lo que deseas. ¡Saludos!

      Eliminar
    2. Gracias Potro!! Ya pude ponerlo en una página estática!!

      Eliminar
  76. hola como esta potros disculpa si los molesto pero estoy interesado en un formulario para ponerlo en mi pagina pero lo código me comen tu puede ayudarme hay me gusta el primero de los formulario soy novato tu puede ayudarme como poner el formulario en mi pagina web gracias que dios te bendiga

    ResponderEliminar
    Respuestas
    1. Hola Jeffrey, en la entrada se explica cómo poner el gadget y cómo poner uno de estos diseños si o deseas. Sólo hay que seguir las instrucciones, no hay que hacer nada más.

      Eliminar
  77. Muchísimas gracias! Puse esta modificación en mi Blog y quedó precioso ^^ (solo el detalle que la cinta quedó arriba de otro widget pero es un detalle y se ve mas mono jajaja)
    Saludos!

    ResponderEliminar
  78. Disculpa que moleste tanto. He puesto el formato que indicas para el Contacto, pero no puedo escribir, puedes ayudarme? http://marocuri.blogspot.com/
    Gracias y disculpa.

    ResponderEliminar
    Respuestas
    1. Es por el código que bloquea el botón derecho, ese mismo código impide que los formularios, buscadores etc. dejen de funcionar. La única forma de hacerlos funcionar es quitar ese código.

      Eliminar
  79. Buenas noches potro, tengo una consulta que hacerte, yo tengo el formulario de blogger pero lo unico que me gustaria agregarle seria un borde y cambiar el color del boton por lo demas lo dejaria como esta, ¿como tengo que agregarle solo lo que te digo?

    un saludo

    ResponderEliminar
    Respuestas
    1. Hola teo - fermi, agrega estos estilos en tu plantilla:

      .contact-form-widget {
      border: 5px solid #ccc;
      }
      .contact-form-button-submit {
      background: #28597a;
      border: none;
      color: #fff;
      }

      Saludos.

      Eliminar
    2. He puesto los estilos que me dices pero el recuadro queda abierto por arriba y el boton no cambia de color..

      Eliminar
    3. Hola, ¿me puedes mostrar en cuál blog lo has puesto?

      Eliminar
    4. holaa de nuevo, he hecho una captura para que veas como queda, si es posible me gustaria que el borde quedara un poco mas separado del formulario.
      http://i398.photobucket.com/albums/pp66/Teoferrmi1/Dibujo.png

      Eliminar
    5. Hola, es necesario que guardes los cambios para que pueda entrar a tu blog e inspeccionar el elemento.

      Eliminar
  80. Saludo!
    Desde República Dominicana.

    Colega, me gustaría saber si puedo ponerlo en una entrada.

    ResponderEliminar
    Respuestas
    1. Saludos Rafael, mira en los comentarios, en varios de ellos he dado un enlace donde encontrarás la explicación para ponerlo dentro de una página o entrada.

      Eliminar
  81. Hola Potro gracias por la atención, ya vi los mensajes.

    Otra cosa, me gusto mucho tu estilo de plantilla móvil y agradeciera si me ayudaras a adaptar la mía para móvil ya que uso una de las que trae el sistema.

    Feliz Dia!

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger