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.