martes, 15 de junio de 2010

Los miércoles blogueros: formulario de contacto

Estoy convencida de que mucha de la gente que contacta conmigo a través del formulario de contacto, no lo haría a través de e-mail.
Es muy cómodo poder contactar con el administrador del blog sin tener que salir de la página, rellenando sólo un par de campos y pulsando el botón de enviar.

Desde que lo puse no os podeis imaginar la cantidad de gente que se ha animado a contactar, tanto para animarme a seguir creando, como para pedir consejo o ayudarme en alguna de mis peticiones.

Así que hoy os explicaré cómo añadir un formulario de contacto sencillito a vuestro blog, sin necesidad de tener conocimiento ninguno de html.


Lo primero que haremos será ir a esta web:
http://www.response-o-matic.com/
Es una página que ofrece formularios de forma gratuita.

Pinchamos en el botón "GET STARTED" y rellenamos el formulario de inscripción. Son cuatro campos solamente, se tarda muy poquito!

Abrimos nuestro correo electrónico y veremos que la página nos ha enviado un e-mail de confirmación. Abrimos el mail y confirmamos pinchando en el enlace que nos adjuntan.


Ese enlace nos manda directamente a la página de edición de nuestro formulario.
A la izquierda de la pantalla están las opciones de edición de cada campo, a la derecha en el recuadro gris están los campos que ya tenemos en el formulario.

Por defecto incluye el campo "nombre" y el campo "e-mail", este último es imprescindible, de lo contrario no podremos contactar con la otra persona.


En mi formulario, sólo agregué un campo más, para que quién contacta me deje un comentario. Tampoco vamos a hacer un interrogatorio, lo importante es que contacten y las demás cuestiones podemos hablarlas por e-mail :) Pinchamos en "add a question"
Y entre las posibles opciones, seleccionamos "long answer"
En "enter your question" escribimos "escribe aquí tu comentario" o lo que se os ocurra!


El orden de los campos se puede cambiar, yo dejo el campo del comentario siempre al final. Lo marcamos como "required" obligatorio, para evitar despistes: Pinchando en el edit de cada campo podemos cambiar algunas cosillas. Yo lo único que hice fue traducir del inglés al castellano las palabras "name" y "e-mail adress"

Salvamos y pinchamos en "save and continue to step 2"

En el paso nº2 seleccionamos la opción "Send them back to your website" para que quién contacta vuelva a nuestro blog después de darle a enviar y también seleccionamos la opción "Receive a copy of each form submission by email" para que los datos nos lleguen a nuestro buzón de correo electrónico.



Una vez más pinchamos en "save and continue to step 3".
Lo que nos aparecerá en la pantalla será el código html de nuestro formulario.
Lo seleccionamos de principio a fin y lo copiamos.

Con el código copiado en el portapapeles, nos vamos a blogger - diseño - elementos de la página y pinchamos en "añadir un gadget" en nuestra columna lateral (o donde queramos que aparezca el formulario).

Seleccionamos HTML-JAVASCRIPT y en el título escribimos "formulario de contacto". Abajo pegamos el código de nuestro formulario.

Guardamos y previsualizamos.
Como siempre, guardamos los cambios si nos gustan o le damos a borrar cambios si no nos convence.

Editado: programé esta entrada la semana pasada y me equivoqué de día.. jeje, tendría que haberse publicado mañana, así que hoy tenemos martes bloguero :P

15 comentarios :

  1. Muchísimas gracias. No sabes las vueltas que he dado por blogs de ayuda para encontrar esto. Ya me había dado por vencida y, ahora, me encuentro con este regalo.
    Eres un sol.
    Besos,
    Concha.

    ResponderEliminar
  2. muy interesante y muy buena idea! gracias por compartirla.

    ResponderEliminar
  3. Jo Claudia me ha parecido una idea superbuena sobretodo xq no había yo pensado en eso de que así la gente se animaría más a escribir voy ha hacerme uno ;)

    ResponderEliminar
  4. MIIIIIIIIIILLLLLLLLLLLLL GRAAAAAAAACIAAAAAAAAASSSSS este lo tengo que hacer, que llevo con la idea no se cuanto tiempo ya, ahora solo falta que me salga! Bscossss

    ResponderEliminar
  5. Me parece interesante, creo que pondré uno, si me aclaro :-)
    Por cierto, cambié el look de mi blog de cine por otra plantilla, blogger ha puesto nuevas y no sabes la que se me ha liado, ahora resulta que las fotos que se pinchan para ir a enlaces no funcionan con el explorer sólo con mozilla. En fin, un desastre.
    Saludos!

    ResponderEliminar
  6. Gracias, me viene de perlas, hace un par de días o tres puse uno que encontré por ahí en internet, en mi blog y otro en la tienda y me estaban llegando correos basura y amenazantes en inglés... por lo que ayer mismo opté por quitar el de mi blog. Pero ahora gracias a tu estupendo tutorial probaré con el que recomiendas a ver qué tal...
    Gracias de nuevo.
    Un saludo.

    Anabel

    ResponderEliminar
  7. Me gusta la idea!!

    pero hoy no es martes??? :)

    ResponderEliminar
  8. Hola!!Me encantan tus miércoles blogeros, jeje, me están ayudando mucho a mejorar el blog.
    Tengo una duda con el formulario. He seguido todos tus pasos pero al poner la vista previa sale como cortado en la barra de la derecha, tanto los recuadros como las frases que he puesto. ¿Cómo lo puedo solucionar?

    ResponderEliminar
  9. Graciaaasss, ya lo he puesto en práctica y mi blog ya tiene formulario de contacto, qué ilusión!!! Aunque como a Silvia se me corta

    Besos

    ResponderEliminar
  10. Hola de nuevo!!al final me puse a jugar con el código html y cambiando los valores del ancho consegui que no quedara cortado....seguro que existe otra solución verdad??jajajaja
    Un saludito!!
    y de nuevo felicidades por esta sección aunque estoy de acuerdo con Pipi --> hoy es martes jajajaa

    ResponderEliminar
  11. No te imaginas las mejoras que le estoy haciendo a mi blog gracias a tí, muchísimas gracias!!

    ResponderEliminar
  12. Muchas gracias chicas, me alegra que os haya servido.

    En cuanto al tema del ancho, en la próxima entrada voy a intentar explicar de la forma más sencilla posible cómo se arregla eso, pero sí Silvia, jugar con los valores que hay en el código html es la manera de hacerlo!

    ResponderEliminar
  13. Muchisimas gracias!!! Iba loca buscando como hacer un formulario. Y ahora gracias a ti, ya lo tengo en mi pagina.
    Bss

    ResponderEliminar
  14. Hola Claudia!
    Gracias a tí tengo un formulario de contacto en mi blog! Miles de gracias :D
    y tu artesanía es preciosa por cierto :)
    pero tengo un problema... mi formulario se sale de mi columna lateral hacía la derecha! y odio esas cosas... me gustan las cosas bien colocaditas :(
    Por favor, si puedes ayúdame, y utliza mi formulario de contacto para ver si funciona! jajaja
    Gracias por adelantado!

    ResponderEliminar
  15. Oh Claudia! Perdona pero acabo de ver que creaste una entrada para resolver mi duda, y ya lo he resuelto! muchas gracias!

    ResponderEliminar

¿Tienes algo que decir? :-)

Follow this blog with bloglovin

Follow on Bloglovin