Crea formularios para tu Blog y

recibe notificaciones por

correo cuando tus usuarios te
enven sus datos. Aprovecha la
potencia de Google Drive,
Google Docs y Gmail.
Por: Miguel Garca Snchez - Colomer En: Diarios de la nube.22:34:00 En: propuestas

La creacin 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 rellena el usuario
visualmente a travs de componentes HTML, para ser enviados a un almacenamiento
donde luego podamos explotarlos segn la funcionalidad que queramos darles.

Una de los grandes problemas que hemos experimentado hasta el momento es la

notificacin por correo de la llegada de un nuevo formulario que el usuario haya

rellenado. Ahora en los Formularios

de Google Docs que guardamos en Google Drive, podemos recibir notificaciones por
correo para no tener que estar supervisando una hoja de resultados constantemente
para saber si nos han escrito o no, ahora ya podemos recibir un correo electrnico,
quieres aprender cmo?.
Por ejemplo, puede interesarnos manejar formularios para realizar una pgina de
"Contacto" en la que nuestros usuarios puedan rellenar sus datos y escribirnos dudas o
cuestiones sobre nuestro Blog. Para realizar encuestas, concursos, reservas,
promociones... cualquier tipo de informacin que deseemos recibir o proporcionar a
nuestros usuarios. Bastar con hacerles un formulario donde rellenen ciertos datos de
entrada que nosotros consideremos bsicos para luego atenderlos.

Un ejemplo de formulario, al ser demostrativo no he quitado la barra de scroll ni he

dejado que ocupe la pgina completa, pero es totalmente funcional... Pruebalo!

EJEMPLO DE FORMULARIO
INTEGRADO EN BLOG:
Si quieres hacer a tu blog ms participativo, que sea menos "plano" y tus usuarios tengan
ms posibilidades de interactuar con l (concursos, pgina de contacto, etc...) entonces
este artculo te interesa.

Consideraciones Previas - Qu
Vamos A Hacer?

Desarrollemos la utilizacin de formularios en nuestro Blog con un ejemplo en el que

Vamos a construir una pgina 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 pretendis utilizar los formularios para almacenar datos personales
importantes, datos sensibles como claves o passwords y de ms, puesto que no contis
con una tecnologa segura para el cifrado y posterior almacenamiento de los datos que os
proporcionen. Es decir, no est pensado nada ms que para tareas en las que no sea
necesaria la utilizacin de datos privados que requieran un almacenamiento seguro y
deban cumplir con la Ley de Proteccin de Datos.
La utilizacin de un formulario de contacto como el que vamos a desarrollar en el
ejemplo, facilita enormemente al usuario la comunicacin con nosotros y centraliza todas
las respuestas en un slo punto. Siendo realistas, hoy est muy de moda el botn para
ponerse en contacto con Facebook, Twitter, GMail, pero cuando el usuario quiere
escribirnos cul de todas utiliza?, no es un "caos" tener ms de tres frentes por lo que
recibir informacin de ellos?. Es mucho ms eficiente y plantea menos problemas
centralizar todas las necesidades en un slo punto, tanto para ellos como para nosotros.
Es por esto que la creacin de una pgina de contacto, no slo es un ejemplo que nos
ayude a aprender el uso de los formularios sino que adems es algo que puede
convertirse en necesario para mantener una comunicacin coherente con ellos.
Vamos a aadirle la posibilidad de recibir una notificacin en nuestro correo personal
para no tener que estar supervisando la pgina donde almacenamos los datos
constantemente.

Creando El Formulario:
El primer paso es la elaboracin 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 recuadro de aplicaciones
que he marcado en la imagen inferior con un rectngulo rojo. Selecciona "Drive" para
acceder a la herramienta donde almacenaremos los formularios y sus respuestas por
medio de Google Docs.

De la lista de iconos que aparecen al seleccionar el cuadro de aplicaciones, haz "clic" sobre
el que marco con rectngulo rojo en la imagen inferior llamado "Drive":

Creando el formulario
2) Una vez dentro de "Google Drive" pulsamos el botn "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"). Adems podrs 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 continuacin se te mostrar una pantalla en la que montars tu propio formulario.

En primer lugar aparecer el nombre que le diste al formulario. A continuacin puedes
poner la descripcin 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 cuestin, rellena el formulario y te
atender en seguida"

5) El siguiente bloque despus de la descripcin servir para configurar las preguntas y

cmo deseas que respondan a las mismas. "Question Title" te sirve para poner la
pregunta que deseas , "Help Text" utilizalo para escribir un pequeo texto de ayuda
explicativo para la pregunta. "Question Type" te proporcionar el diseo con el que
quieres presentarle al usuario la pregunta:

Multiple Choices: en forma de botones de opcin.

Text: en forma de texto corto.

Paragraph: para que pueda responderte con un texto largo.

Checkboxes: para que responda con casillas de verificacin.

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 da o la fecha que consideren (por
ejemplo un cumpleaos).

Time: para establecer un tiempo o duracin seleccionable por el usuario en

respuesta.

- Por ltimo la casilla de verificacin "Required Question", har que la pregunta que hagas

en el formulario sea de carcter obligatorio, es decir, que deba responderse para poder
procesar el formulario al destino.
- Si pulsas "Done" dejars esa primera seccin como deseas.
- Si pulsas "Add Item" aadirs una nueva pregunta con la que de nuevo puedes
configurar cmo 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 aadir la segunda pregunta, en la cual puse en "Question Title":
Introduce correo electrnico de contacto *. Le aad 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": "Indcame 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 electrnico de contacto con el que poderle
contestar.
- Que escribiera aquello por lo que deseaba contactar.
De esta forma, el formulario de contacto quedara as:

6) Una vez construdo el formulario se pulsa el botn "Send Form". Es fundamental que
en la caja de texto donde pone "Link to share" pulsemos el botn 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 cdigo del formulario tal cual lo necesitamos para incluir
posteriormente en nuestro blog. Adems podremos poner el tamao que deseamos
asignarle (Esto podemos cambiarlo despus en el cdigo igualmente cuando veamos
cmo cuadra en nuestro blog.

7) Una vez tengis el cdigo "Embed" para poner en vuestro Blog, si queris ver cmo va
a quedar el formulario al margen de vuestro sitio web, podis pulsar en el men de
opciones del creador de formularios "View live form" para ver el resultado.

Ejemplo de cdigo "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>

Preparando el almacenamiento de
los formularios:
8) Si queris que las respestas del formulario se vuelquen a una hoja de clculo o a un
documento, seleccionad del men superior la opcin "Choose responses Destination". Ah
podis poner que se guarde en un "Spreadsheet" u hoja de clculo o que se notifiquen las
respuestas en un resumen del formulario. Si lo metis en una hoja de clculo, podis
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 clculo, as que seleccion "Spreadsheet".
Pasado un tiempo, quedar la opcin "View responses" para visualizar ah las respuestas
cuando las mande el usuario.

9) Cuando cerris la edicin del formulario, os aparecer en "Google Drive" como un

documento a compartir ms. Mantenedlo en "Private" (opcin por defecto) para que
nadie ms pueda modificarlo que vosotros mismos. As mismo, si decidisteis crear
"Spreadsheet" os aparecer la hoja de clculo que guardar las respuestas de vuestros
usuarios. Siempre que queris consultar los datos las tendris disponibles en "Google
Drive" para poderlos ver.

Activando la notificacin por correo

cuando nuestros usuarios han
enviado un formulario relleno
10) Si elegiste un Spreadsheet para almacenar las preguntas, ste aparecer despus
en la lista de archivos de Google Drive como se muestra en la pantalla inferior marcado
con un rectngulo rojo:

Mi formulario de ejemplo es "Contacto".

Como en el paso 9) seleccion almacenar los datos en un "Spreadsheet" al que

llam "Contacto" tambin, aparecer en la lista de mis archivos de Drive.

11) En la hoja de clculo o "Spreadsheet" podremos ver los datos de los formularios
introducidos por nuestros usuarios:

12) Para recibir notificaciones a nuestra cuenta de correo electrnico, cada vez
que un usuario enve un formulario y as ser avisados de los cambios haz "clic"
dentro de la hoja de clculo de respuestas en el men superior en la opcin
"Herramientas" y despus en la subopcin "Reglas de notificacin", tal como te
remarco en la imagen inferior por medio de un rectngulo rojo:

13) Ahora configura las reglas de notificacin por medio de las cuales deseas ser
avisado cuando llegue un formulario de respuesta a tu "Spreadsheet" u hoja de clculo
para almacenar respuestas:

El cuadro de reglas de notificacin te mostrar el mensaje en su parte superior "Enviarme

una notificacin a [tu direccin de Gmail] cuando..." y acto seguido activas la casilla de
verificacin "Un usuario enva un formulario" y en "Enviarme una notificacin con..." activa
la casilla de verificacin "Por correo electrnico inmediatamente". Ambas opciones las he

marcado con rectngulo rojo en la imagen superior.

De esta manera recibirs, pasados unos cuantos segundo, una notificacin por correo
electrnico de que un usuario ha enviado un formulario.

Metiendo el formulario en nuestro

Blog:
14) Como en el ejemplo vamos a crear una pgina nueva que contendr al formulario, a
la cual llamaremos despus desde el men con una opcin de "Contacto", lo primero que
hago al entrar a Blogger es ir en su men izquierdo a la opcin "Pginas".

15) All creo una pgina nueva a la que llamo "Contacto" y en en ella, al editar la
entrada, pulso la opcin "HTML".

16) En el modo HTML incorporo el cdigo fuente que obtuve al pulsar la opcin
"Embed" en la creacin del formulario (paso 6). Pego el cdigo 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 tamao en ancho y alto a las necesidades de mi Blog.

17) Finalmente, para aadir una opcin de men desde la que poder llamar a la pgina
que he creado que alberga el cuestionario, edito el men que ya desarrollamos en esta
entrada para incorporarle la opcin "Contacto":
Basado en el men de un slo nivel que ya aprendimos en guas pasadas , dentro de
Blogger, nos dirigimos al Gadget HTML/Javascript al que llam "Cabecera" y aadimos la
opcin Contacto con el siguiente cdigo:
<li><a href="http://diariosdelanube.blogspot.com/p/contacto.html">Contacto</a></li>
Donde contacto.html es la nueva pgina 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">Tecnologa</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">Opinin</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 quedara as:

Con una pgina de contacto para el usuario como esta:

Eso es todo!. Podemos colocar la opcin de llamar a la pgina de contacto donde

queramos, en opciones de men como el mo, en subopciones de mens ms
complejos o desde botones, imgenes... A partir de ahora es mucho ms sencillo
interactuar con el usuario en ciertas tareas que "a priori" parecen "no realizables" en un
Blog pero que, como vemos, se pueden hacer.