6 may. 2013

Aprende a utilizar formularios en tu blog

Crea concursos, página de contacto con tus usuarios, tests, promociones, votaciones... tu blog nunca ha estado tan vivo, nunca ha sido tan interactivo.


La creación de formularios que podamos utilizar en nuestro Blog puede ser toda una ventaja para suplir carencias inherentes a esta clase de publicaciones web.


El formulario es simplemente un conjunto de datos de entrada, que se rellena el usuario visualmente a través de componentes HTML, para ser enviados a un almacenamiento donde luego podamos explotarlos según la funcionalidad que queramos darles.

Por ejemplo, puede interesarnos manejar formularios para realizar una página de "Contacto" en la que nuestros usuarios puedan rellenar sus datos de contacto y escribirnos dudas o cuestiones sobre nuestro Blog. Bastará con hacerles un formulario donde rellenen ciertos datos de entrada que nosotros consideremos básicos para poderles atender.

También puede interesarnos el uso de formularios para realizar encuestas sobre nuestros contenidos, guardar valores para algún tipo de concurso o promoción, para que puedan subir contenidos a nuestro sitio previa valoración por nuestra parte de los mismos, test de cualquier tipo con sus preguntas y respuestas... las combinaciones pueden ser infinitas y todas muy provechosas.

Un ejemplo de formulario, al ser demostrativo no he quitado la barra de scroll ni he dejado que ocupe la página completa, pero es totalmente funcional... ¡Pruebalo!



Si quieres hacer a tu blog más participativo, que sea menos "plano" y tus usuarios tengan más posibilidades de interactuar con él (concursos, página de contacto, etc...) entonces este artículo te interesa.

Consideraciones previas - ¿Qué vamos a hacer?


Desarrollemos la utilización de formularios en nuestro Blog con un ejemplo en el que Vamos a construir una página de contacto para nuestros clientes donde puedan exponernos sus dudas, comentarios, etc... Este ejemplo es traspasable a otras diferentes actividades que requieren datos de nuestros usuarios para poder trabajar con ellos.

Es importante que no pretendáis utilizar los formularios para almacenar datos personales importantes, datos sensibles como claves o passwords y de más, puesto que no contáis con una tecnología segura para el cifrado y posterior almacenamiento de los datos que os proporcionen. Es decir, no está pensado nada más que para tareas en las que no sea necesaria la utilización de datos privados que requieran un almacenamiento seguro y deban cumplir con la Ley de Protección de Datos.

La utilización de un formulario de contacto como el que vamos a desarrollar en el ejemplo, facilita enormemente al usuario la comunicación con nosotros y centraliza todas las respuestas en un sólo punto. Siendo realistas, hoy está muy de moda el botón para ponerse en contacto con Facebook, Twitter, GMail, pero cuando el usuario quiere escribirnos ¿cuál de todas utiliza?, ¿no es un "caos" tener más de tres frentes por lo que recibir información de ellos?. Es mucho más eficiente y plantea menos problemas centralizar todas las necesidades en un sólo punto, tanto para ellos como para nosotros. Es por esto que la creación de una página de contacto, no sólo es un ejemplo que nos ayude a aprender el uso de los formularios sino que además es algo que puede convertirse en necesario para mantener una comunicación coherente con ellos.

Creando el Formulario:


El primer paso es la elaboración del formulario fuera de Blogger. Utilizaremos "Google Docs" que se integra con "Google Drive" para brindarnos la posibilidad de construir y posteriormente almacenar el formulario que expondremos a nuestros clientes así como para guardar las respuestas que ellos rellenen en el mismo.

1) Una vez autenticados con un usuario Google (de GMAIL, BLogger, GTalk, etc..) nos conectamos normalmente a www.google.es y nos fijamos en el menú superior que ofrece el buscador, donde aparece la opción "Drive" para acceder a la citada herramienta.



2) Una vez dentro de "Google Drive" pulsamos el botón "Create" y entre las opciones disponibles en el menú desplegable que nos sale, seleccionamos "Form" para crear el formulario.


3) Te saldrá una pantalla donde puedes introducir el nombre del formulario (yo para el ejemplo le he llamado "Contacto"). Además podrás seleccionar unos pocos "Themes" o temas disponibles para ponerle algo de color al cuestionario que crees. Yo para mi blog seleccioné el Theme "Espresso".



4) A continuación se te mostrará una pantalla en la que montarás tu propio formulario. En primer lugar aparecerá el nombre que le diste al formulario. A continuación puedes poner la descripción que desees para explicarle al usuario para lo que sirve el formulario. En el ejemplo para formulario de contacto, en "Description" he puesto: "Si tienes alguna duda o simplemente deseas contactar para cualquier cuestión, rellena el formulario y te atenderé en seguida"


5) El siguiente bloque después de la descripción servirá para configurar las preguntas y cómo deseas que respondan a las mismas. "Question Title" te sirve para poner la pregunta que deseas , "Help Text" utiliízalo para escribir un pequeño texto de ayuda explicativo para la pregunta. "Question Type" te proporcionará el diseño con el que quieres presentarle al usuario la pregunta:

  • Multiple Choices: en forma de botones de opción.
  • Text: en forma de texto corto.
  • Paragraph: para que pueda responderte con un texto largo.
  • Checkboxes: para que responda con casillas de verificación.
  • Choose from a List: para que le des una lista con respuestas prefijadas en lugar de texto libre.
  • Scale: para incluir una escala de respuestas posibles de texto libre.
  • Grid: para proporcionarle entradas divididas en secciones con columna y fila.
  • Date: para que puedan poner la fecha del día o la fecha que consideren (por ejemplo un cumpleaños).
  • Time: para establecer un tiempo o duración seleccionable por el usuario en respuesta.

- Por último la casilla de verificación "Required Question", hará que la pregunta que hagas en el formulario sea de carácter obligatorio, es decir, que deba responderse para poder procesar el formulario al destino.

- Si pulsas "Done" dejarás esa primera sección como deseas.

- Si pulsas "Add Item" añadirás una nueva pregunta con la que de nuevo puedes configurar cómo deseas que se presente y se responda.

Para el ejemplo del formulario de Contacto decidí que cualquier usuario que deseara contactar conmigo:

- Para ello puse en la primera pregunta en "Question Title": "Introduce el nombre y/o Alias por el que debo dirigirme a tí *". Un "Question Type" de tipo "Text" para que le apareciera una caja de texto donde rellenar el dato.

- Hice un "Add Item" para añadir la segunda pregunta, en la cual puse en "Question Title": Introduce correo electrónico de contacto *. Le añadí un "Question Type" de tipo "text" para que le apareciera una caja de texto donde rellenar el dato.

- Hice otro "Add Item" para finalmente ponerle la última pregunta, en la cual puse en "Question Title": "Indícame el motivo por el que deseas contactar *" y en "Question Type" un "Paragraph" para que pueda poner todo el texto que precise.
En "Help Text"

- Rellenara obligatoriamente el "Nombre o Alias" con el que poderme dirigir a él cuando recibiera sus datos.
- Rellenara obligatoriamente el correo electrónico de contacto con el que poderle contestar.
- Que escribiera aquello por lo que deseaba contactar.

De esta forma, el formulario de contacto quedaría así:


6) Una vez construído el formulario se pulsa el botón "Send Form". Es fundamental que en la caja de texto donde pone "Link to share" pulsemos el botón a la derecha de la caja de texto con el enlace a compartir llamado "Embed". De esta forma, una vez dejemos preparado el formulario en Google Drive para recibir datos, con el texto que aparece en Embed, dispongamos del código del formulario tal cual lo necesitamos para incluir posteriormente en nuestro blog. Además podremos poner el tamaño que deseamos asignarle (Esto podemos cambiarlo después en el código igualmente cuando veamos cómo cuadra en nuestro blog.



7) Una vez tengáis el código "Embed" para poner en vuestro Blog, si queréis ver cómo va a quedar el formulario al margen de vuestro sitio web, podéis pulsar en el menú de opciones del creador de formularios "View live form" para ver el resultado.

Ejemplo de código "Embed" para el formulario creado:
<iframe src="https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXXXXX/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

8) Si queréis que las respùestas del formulario se vuelquen a una hoja de cálculo o a un documento, seleccionad del menú superior la opción "Choose responses Destination". Ahí podéis poner que se guarde en un "Spreadsheet" u hoja de cálculo o que se notifiquen las respuestas en un resumen del formulario. Si lo metéis en una hoja de cálculo, podéis obtener la ventaja de realizar funciones de suma o media sobre alguna de las respuestas que vuestros usuarios hagan.

En el ejemplo yo vuelco los datos a una hoja de cálculo, así que seleccioné "Spreadsheet". Pasado un tiempo, quedará la opción "View responses" para visualizar ahí las respuestas cuando las mande el usuario.


9) Cuando cerréis la edición del formulario, os aparecerá en "Google Drive" como un documento a compartir más. Mantenedlo en "Private" (opción por defecto) para que nadie más pueda modificarlo que vosotros mismos. Así mismo, si decidisteis crear "Spreadsheet" os aparecerá la hoja de cálculo que guardará las respuestas de vuestros usuarios. Siempre que queráis consultar los datos las tendréis disponibles en "Google Drive" para poderlos ver.

Metiendo el formulario en nuestro Blog:

10) Como en el ejemplo vamos a crear una página nueva que contendrá al formulario, a la cual llamaremos después desde el menú con una opción de "Contacto", lo primero que hago al entrar a Blogger es ir en su menú izquierdo a la opción "Páginas".



11) Allí creo una página nueva a la que llamo "Contacto" y en en ella, al editar la entrada, pulso la opción "HTML".



12) En el modo HTML incorporo el código fuente que obtuve al pulsar la opción "Embed" en la creación del formulario (paso 6). Pego el código del formulario que realicé:

<iframe frameborder="0" height="640" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform?embedded=false" width="590">Loading...</iframe>

Adapto el tamaño en ancho y alto a las necesidades de mi Blog.

13) Finalmente, para añadir una opción de menú desde la que poder llamar a la página que he creado que alberga el cuestionario, edito el menú que ya desarrollamos en esta entrada para incorporarle la opción "Contacto":

Basado en el menú de un sólo nivel que ya aprendimos en guías pasadas , dentro de Blogger, nos dirigimos al Gadget HTML/Javascript al que llamé "Cabecera" y añadimos la opción Contacto con el siguiente código:

<li><a href="http://diariosdelanube.blogspot.com/p/contacto.html">Contacto</a></li>

Donde contacto.html es la nueva página que me creé para albergar el formulario de contacto.

El menú finalmente con todas sus opciones quedaba así:

<ul id="menu">
<li><a href="http://diariosdelanube.blogspot.com/">Principal</a></li>
<li><a href="http://diariosdelanube.blogspot.com/search/label/tecnologia">Tecnología</a></li>
<li><a href="http://diariosdelanube.blogspot.com/search/label/SEO">Blogger</a></li>
<li><a href="http://diariosdelanube.blogspot.com/search/label/ocio">Ocio</a></li>
<li><a href="http://diariosdelanube.blogspot.com/search/label/opinion">Opinión</a></li>
<li><a href="http://diariosdelanube.blogspot.com/search/label/consumo">Consumo</a></li>
<li><a href="http://diariosdelanube.blogspot.com/p/contacto.html">Contacto</a></li>
</ul>

El menú quedaría así:


Con una página de contacto para el usuario como esta:



¡Eso es todo!. Podemos colocar la opción de llamar a la página de contacto donde queramos, en opciones de menú como el mío, en subopciones de menús más complejos o desde botones, imágenes... A partir de ahora es mucho más sencillo interactuar con el usuario en ciertas tareas que "a priori" parecen "no realizables" en un Blog pero que, como vemos, se pueden hacer.

Cualquier duda podéis disponéis de los comentarios como siempre.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

34comentarios:

  1. miguel, necesitamos un artículo para que la gente quite el catch up de los comentarios :)

    Saludos.

    ResponderEliminar
    Respuestas
    1. ¡Hola!, lo he vuelto a publicar para que lo puedas utilizar. La URL es esta: http://diariosdelanube.blogspot.com.es/2013/05/aprende-configurar-los-comentarios-en.html en el paso 5).

      Cualquier cosa que necesites para el blog, pedídmela y veo cómo poder sacarla. Un saludo!

      Eliminar
  2. buen dato :) siempre me ha parecido genial (y abrumador al tiempo) que con los productos de google se puedan manejar tantas cosas! yo, abusando de este espacio, suelo usar algo que me funciona bien y es jotforms, tiene formularios ya pre-establecidos y también puedes crear el tuyo propio, aunque por ser en inglés no a todos les guste ;)

    ResponderEliminar
    Respuestas
    1. Cierto, opciones ha muchas, hasta podemos hacernos nosotros mismos los nuestros y volcarlos en una BBDD con un servidor Apache. Al final, ofrecí Google porque la mayor parte de los Bloggers es lo que utilizan. Pero bienvenidas sean otras propuestas. Un saludo!

      Eliminar
  3. Miguel, gracias por toda esta información.
    Tengo un formulario hecho y la tabla de respuestas, co el nomre, apellido, e-mail, etc.. ¿Podría enviar un mensaje de respuesta a la columna de los e-mails? ¿ Dandole un número? Esto es por que es una inscripción a un concurso

    ResponderEliminar
    Respuestas
    1. Automáticamente me temo que no. Sólo puedes ver los resultados en el spreadshet para luego enviarlo directamente tú mismo.

      De todas formas, mira en las funciones del spreadshet por si hay alguna que sea e-mail to y el código de columna y fila. Aunque supongo que no estará disponible.

      Aquí ya entra un poco la programación y eso es más costoso en esta clase de formularios.

      Mándales la respuesta manualmente, diles en qué fecha se les va a pasar el código para el concurso y en esa fecha se lo pasas.

      Si no, hay una última opción (investigaré para futuras guías)en tu hoja de cálculo ve a Tools --> Script Gallery y busca entre los scripts predefinidos alguno que haga lo que necesitas (hay uno que se llama "Postponed Mail" que lo mismo podría venirte bien).

      Esto es investigar.

      Un saludo!

      Eliminar
    2. Hola Pascual, ahora con notificación por correo electrónico a tu cuenta de correo:

      http://diariosdelanube.blogspot.com.es/2013/10/crea-formularios-para-tu-blog-y-recibe.html

      Espero que te pueda servir. ¡Un saludo!.

      Eliminar
  4. Hola miguel, he seguido todos los pasos aca descritos con el formulario y todo me sale bien, hasta cuando voy a insertar en mi blog el codigo emnled. lo coloco tal cual como tu explicas pero cuando voy a ver el blog y le doy clic en contacto me sale que la pagina que estaba buscando en este blog no existe.

    ResponderEliminar
  5. 1) Realiza los pasos desde el título "METIENDO EL FORMULARIO EN NUESTRO BLOG". ¿Has creado una página que guardará el formulario y has puesto un enlace desde el menú que llame a dicha página?. Revisa el paso 13 para asegurarte de que has hecho lo del menú.

    2) Si no lo ves claro, mándame el enlace a tu sitio web y dime cómo llamaste a tu página de contacto o donde hayas puesto el formulario para ver qué se puede hacer.

    ¡Ánimo que al final sale!

    ResponderEliminar
  6. Hola, muy buen post. Tengo una pregunta, una vez que ya haya realizado todo, ¿se me notifica de algún modo que han rellenado un formulario?

    Gracias

    ResponderEliminar
    Respuestas
    1. Te lo puede dejar en una "Excel" o spreadsheet de Drive en la quepodrís meter que te avise. Pero POR FIN Blogger ha metido un gadget para hacer la función de contacto. Si quieres puede copiar su código fuente en una página a parte y ese sí te avisa al correo sin problemas. Si tienes dudas, te monto una miniguía en otra entrada, lo que me digas.

      Un saludo!.

      Eliminar
    2. Ahora con notificación por correo electrónico a tu cuenta de correo:

      http://diariosdelanube.blogspot.com.es/2013/10/crea-formularios-para-tu-blog-y-recibe.html

      Espero que te pueda servir. ¡Un saludo!.

      Eliminar
  7. Oído, va genial tus tutoriales. Pude introducir un formulario en mi blog.
    Muchas gracias!!!!
    Iré revisando el resto de publicaciones por que tengo algunas dudas entre pestañas y páginas para los menus.
    Donde encuentro éstos temas?
    gracias de nuevo

    Ethel

    ResponderEliminar
    Respuestas
    1. Gracias Ethel!.

      Para menús ejecuta este: http://diariosdelanube.blogspot.com.es/2013/04/aprende-crear-un-menu-sencillo-con.html

      y este para uno con subopciones:
      http://diariosdelanube.blogspot.com.es/2013/04/crea-un-menu-con-subopciones-en-blogger.html

      Eliminar
  8. Hola, Miguel, muy útil tu blog. Acabo de crear un blog, y quisiera saber como un enlace que abriera el gestor de correo predeterminado y en el cuerpo del mensaje apareciera un formulario predefinido, en el que se tuviera que rellenar unos datos.No neccesito almacenar los formularios recibidos, ya que la única necesidad que tengo es que el correo que reciba tenga un formato determinado. Gracias por tu tiempo.

    ResponderEliminar
    Respuestas
    1. hola Patrick!,

      este enlace te viene de perlas para lo que quieres: http://www.forosdelweb.com/f4/enlace-mailto-como-poner-asunto-200120/

      Un saludo!

      Eliminar
    2. Gracias Miguel.
      He consultado el enlace, y me sirve a medias, Ok para el envío del mensaje por mail, pero necesito que los datos introducidos tengan un formato concreto, es decir que se pre-validen. por ejemplo necesito que me seleccionen un código, de entre una lista pre-definida.Y un teléfono por ejemplo, y validar que sea numérico. Supongo se trata de hacer un formulario en html y luego copiar el código, pero no se muy bien como.

      Eliminar
    3. Hola Patrick,
      lo que quieres hacer es más complejo, necesitas un formulario (puede ser HTML o uno de Drive) y meterle o validaciones javascript o programar las reglas de validación que Drive trae para los formularios. Luego en el onSubmit() haces la llamada que te he pasado para enviar el correo formateado y con esa información.

      Lo que quiero decir es que no es simplemente utilizar formularios.

      Si quieres me apunto un tutorial con el tema que planteas y me veo qué se puede hacer. Un saludo!

      Eliminar
    4. Con notificación por correo electrónico:

      http://diariosdelanube.blogspot.com.es/2013/10/crea-formularios-para-tu-blog-y-recibe.html

      Espero que te pueda servir. ¡Un saludo!.

      Eliminar
  9. Muchas gracias, tus tutoriales son muy buenos y para los que tenemos poca idea y estamos empezando con nuestro "proyecto de blog" estan muy bien explicados. Tienes un seguidor más.

    Aquí algunos resultados:
    http://yoestolohago.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. ¡Pues es una pasada tu Blog!, te está quedando genial. Enhorabuena.

      Eliminar
  10. Respuestas
    1. ¡Me alegro mucho Mafer!, cualquier cosa aquí estoy. Un saludo.

      Eliminar
    2. Ahora con notificación por correo electrónico:

      http://diariosdelanube.blogspot.com.es/2013/10/crea-formularios-para-tu-blog-y-recibe.html

      Espero que te pueda servir. ¡Un saludo!.

      Eliminar
  11. hola graciasss,estoy un poco verde en esto aver si me puedes ayudar.
    todo bien colocado en mi blog,¿pero como hago que cuando rellenen el formulario este sea enviado a mi correo de gmail?¿o de lo contrario si no se puediera,a donde se envia dicho formulario por mis lectores?

    ResponderEliminar
    Respuestas
    1. ¡Ya tengo la respuesta!, lo tienes en este tutorial: http://diariosdelanube.blogspot.com.es/2013/10/crea-formularios-para-tu-blog-y-recibe.html

      Espero que te pueda servir. ¡Un saludo!.

      Eliminar
  12. Necesito saber como se coloca un tiempo descendente a mi formulario y al finalizar dicho tiempo se bloquee el formulario. Para aquellos que envié el formulario.

    ResponderEliminar
    Respuestas
    1. Puedes utilizar los scripts de Google Docs para realizar esa clase de tareas. Lo que pasa es que necesitarás programar. Intentaré ver si veo algo por el foro, pero no dudes en meterte en los grupos de Google Docs y solicitar ayuda, allí la gente es majísima.

      Eliminar
  13. Muy interesante todo lo descrito

    Del modo que indicas se recibe en gmail un mensaje que contiene solo el link para llegar a la hoja de calculo "Contacto" en Google Docs, no el contenido del formulario.

    Mi interés està en poder recibir directamente en una dirección de gmail, o cualquier otra si se puede, el contenido del formulario enviado desde el blogg

    saludos y gracias
    Pere

    ResponderEliminar
  14. Dios les bendiga. Como hago para q. los mensajes de los usuarios de mi pagina lleguen a mi correo, y no a la hoja de calculos?

    ResponderEliminar
    Respuestas
    1. Igualmente, Dios te bendiga a ti también. Por ahora, con los formularios sólo existe esa posibilidad PERO puedes recibir avisos por correo, haz esta guí que te va a venir genial para lo que necesitas (es todo como lo que ya has hecho pero en el paso :http://www.diariosdelanube.com/2013/10/crea-formularios-para-tu-blog-y-recibe.html haz especialmente los pasos 10 y 11 que están bajo el título "ACTIVANDO LA NOTIFICACIÓN POR CORREO CUANDO NUESTROS USUARIOS HAN ENVIADO UN FORMULARIO RELLENO".

      Un saludo. Si tienes cualquier problema me vuelves a escribir.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.