El formulario es simplemente un conjunto de datos de entrada, que 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.
Una de los grandes problemas que hemos experimentado hasta el momento es la notificación 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 electrónico, ¿quieres aprender cómo?.
Por ejemplo, puede interesarnos manejar formularios para realizar una página 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 información que deseemos recibir o proporcionar a nuestros usuarios. Bastará con hacerles un formulario donde rellenen ciertos datos de entrada que nosotros consideremos básicos para luego atenderlos.
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!
EJEMPLO DE FORMULARIO INTEGRADO EN BLOG:
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.
Vamos a añadirle la posibilidad de recibir una notificación en nuestro correo personal para no tener que estar supervisando la página donde almacenamos los datos constantemente.
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 recuadro de aplicaciones que he marcado en la imagen inferior con un rectángulo rojo. Selecciona "Drive" para acceder a la herramienta donde almacenaremos los formularios y sus respuestas por medio de Google Docs.
Creando el formulario
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.
<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 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.
Activando la notificación por correo cuando nuestros usuarios han enviado un formulario relleno
- Mi formulario de ejemplo es "Contacto".
- Como en el paso 9) seleccioné almacenar los datos en un "Spreadsheet" al que llamé "Contacto" también, aparecerá en la lista de mis archivos de Drive.
11) En la hoja de cálculo o "Spreadsheet" podremos ver los datos de los formularios introducidos por nuestros usuarios:
12) Para recibir notificaciones a nuestra cuenta de correo electrónico, cada vez que un usuario envíe un formulario y así ser avisados de los cambios haz "clic" dentro de la hoja de cálculo de respuestas en el menú superior en la opción "Herramientas" y después en la subopción "Reglas de notificación", tal como te remarco en la imagen inferior por medio de un rectángulo rojo:
13) Ahora configura las reglas de notificación por medio de las cuales deseas ser avisado cuando llegue un formulario de respuesta a tu "Spreadsheet" u hoja de cálculo para almacenar respuestas:
El cuadro de reglas de notificación te mostrará el mensaje en su parte superior "Enviarme una notificación a [tu dirección de Gmail] cuando..." y acto seguido activas la casilla de verificación "Un usuario envía un formulario" y en "Enviarme una notificación con..." activa la casilla de verificación "Por correo electrónico inmediatamente". Ambas opciones las he marcado con rectángulo rojo en la imagen superior.
De esta manera recibirás, pasados unos cuantos segundo, una notificación por correo electrónico de que un usuario ha enviado un formulario.
Metiendo el formulario en nuestro Blog:
14) 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".
15) Allí creo una página nueva a la que llamo "Contacto" y en en ella, al editar la entrada, pulso la opción "HTML".
16) 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.
17) 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.
Muchas gracias por la información ;)
ResponderEliminarGracias Laura,
Eliminaraquí estoy para cualquier cosa.
Encantado de ayudar vicenç macias,
ResponderEliminarcualquier cosilla por aquí ando!!
Un saludo.
Me interesa Miguel quiero aprender.Gracias
ResponderEliminarLo que necesites Rafael, pregunta lo que te haga falta, me tienes aquí para eso. Esto es muy útil. Un saludo, amigo!
EliminarMuy buen tutorial, La pena que ahora mismo Google está cambiando Google docs y no funcionan las notificaciones dentro de la hoja de cálculos.. Pero seguro que en breve vuelven a estar disponibles.
ResponderEliminarMuy buen trabajo
Hola Juan Pedro!,
Eliminara mí me siguen funcionando. ¿Has vuelto a probar desde entonces?.
Un saludo y gracias por participar.
Hola.
ResponderEliminarHe creado un formulario de reserva para conferencias que se hacen en un día a diferentes horas.
En el formulario, solicito, a parte de los datos de contacto, la hora deseada y el nº de personas que se inscriben a la vez.
Me gustaría poner alguna regla que en cuanto el nº de inscritos superara el de la capacidad de la sala ya no dejara inscribirse a nadie más en ese horario, o en su defecto, que les diera un aviso que la sala está completa.
¿Hay alguna manera de hacerlo con google forms? ¿Hay algun otro sistema?
Gracias.
Hola Fina,
Eliminardisculpa la tardanza en contestar, es que he estado con mucho trabajo.
En Google forms puedes poner reglas:
1- Cuando crees el formulario, mete un campo "tipo de pregunta": "texto" .
2- Fíjate que justo debajo pone "Validación de datos", despliégalo y selecciona "Número" "5" (puedes poner mayor o igual, menor o igual...).
Así te creará el formulario con esa regla implícita.
Si te atascas o te platea alguna duda me dices.
Un saludo!!!
Quiero hacer un formulario que sume las respuestas, como en los test de la Cosmopolitan: que sume 0,1,2,3 según la respuesta que elijas (de 9 preguntas en total). Y cuando acabe, poder dar el resultado del test al final. "Tu resultado es 9, que quiere decir blah blah blah..."
ResponderEliminar¿sabéis decirme con qué opción?
Gracias! Muy útil.
Hola,
Eliminarsólo se me ocurre llevar el sumatorio en la hoja de cálculo donde se vuelcan los resultados (como en el ejemplo de la guía).
Un saludo y gracias a ti por participar.
Muy bueno, muy útil la opción de volcar todo en una planilla de cálculos y muy claras tus explicaciones. Te hago una consulta, yo tengo una imprenta y el formulario lo utilizaré para que los clientes hagan el pedido enviando sus datos correspondientes, sucede que a veces tienen que enviarme algún logotipo, hay manera o alguna opción que les permita subir, enviar el archivo en el mismo formulario? Muchas Gracias. Saludos. Leonardo.
ResponderEliminarHola Leonardo,
EliminarEl problema es que en los formularios no hay una opción para "subir archivos" directa. Pero me parece interesante y voy a investigar en el tema para tratar de hacerlo. Creo que es difícil porque sería una "puerta abierta" para subir documentos a Drive sin validar... lo cual no creo que se pueda hacer directamente. Creo que alguna de las aplicaciones instalables en Drive como opcionales quizás lo permita, no obstante otra opción sería que el formulario te lo guarde en Drive y la imagen en otro sitio donde exista almacenamiento de imágenes permitido...
Déjame investigar y te digo algo ;)
Un saludo!!!
Muchas gracias Miguel por tu respuesta y tu tiempo dedicado a ayudarnos, aunque a veces no se le de importancia eso tiene mucho valor. Ojalá haya alguna manera de hacer lo que te comenté y quien complete el formulario y me lo envíe pueda resolver todo en un mismo lugar (datos + archivo de imagen). Sigue así que es muy bueno lo que haces, muy buen trabajo!
EliminarHola Leonardo,
Eliminartras investigar el tema, hay soluciones que usan aplicaciones de treceros para subir contenido a Drive a través de formularios... pero no lo considero fiable por haber un intermediario. A ver si encuentro alguna manera por programación, pero no creas que es sencillo porque es difícil autorizar a una web para que "mire" en el disco duro del usuario y le deje subir archivos a Drive.
Un saludo!!!
hola, agradezco tu ayuda con estas publicaciones.
ResponderEliminarQuería preguntarte si sabes cómo hacer para que pueda mandar una planilla de google drive a distintos usuarios y que las modificaciones de estos generen nuevos archivos, distintos para cada usuario, tomando como base la original que les mandé.
En realidad es un formulario, en los que deben rellenar datos numéricos y debo recolectar dichos datos para cada usuario por separado.
Espero haber sido claro.
Muchas gracis
Hola Leonardo. Drive no es una BBDD documental y esto tienes sus inconvenientes. No obstante, puedes probar a crear un formulario al que accedan todos que deje las respuestas en un sólo documento (una spreadsheet por ejemplo) y cotejar ahí los resultados. No tendrían que crearse documentos ellos y reportarían todos los datos directamente a la hoja de cálculo que pusieras en Google Drive.
EliminarAsegúrate eso sí que cumples con las políticas de Google en los datos que almacenes así como la ley de protección de datos.
Cualquier duda aquí me tienes. Un saludo y muchas gracias a ti.
Google cada vez se lo curra más, ya podemos tener formularios en Blogger ;-)
ResponderEliminarEs muy fácil desplegarlos en tu propia web. Los montas en Drive y luego los pones en tu web donde quieras. Yo los utilizo en la página de "Contacto". Un saludo!!
EliminarMuy interesante y sobretodo útil.
ResponderEliminarUna vez hecho todo el proceso tengo un problema, que no se si te ha comentado alguien más.
El formulario no se muestra cuando estoy navegando con Crhome, si funciona con Firefox, no he probado con otros navegadores. ¿Te suena?
Muchas gracias.
Hola Jordi, en Chrome si funciona, yo estoy viéndolo. Prueba a eliminar la caché y me dices. Debería salirte.
EliminarUn saludo!
Hola Miguel,
Eliminarhe limpiado la cache hasta sacarle brillo. Y no me funciona.
Otra cosa que tampoco funciona es la manera que tienes configurados los comentarios. Envío un comentario pero no se publica. Yo en mi blog he tenido que configurar los comentarios con ventana emergente o pantalla completa. Y esto he comprobado que le pasa a otras personas también. (Siempre desde Crhome)
Yo utilizo la última versión de Ubuntu no se si tendrá algo que ver. Pero lo de los comentarios también le pasa a gente con windows...(ya se que no es de esta entrada pero no he podido evitarlo...:) )
Un saludo
....bueno y ahora funciona... he ido trabajando, probando cosas.. he cambiado el ancho del formulario...(no parece que tenga nada que ver) y de repente funciona.. (lo de los comentarios no.. sigue igual )
EliminarBueno gracias de todos modos por tu atención
Un saludo
Bueno, al menos conseguiste sacarlo. Quizás tenías el frame que dibuja el formulario muy pequeño y por ello no se veía. El Frame es la "ventana que abres a Drive" para mostrar "desde allí" el formulario que compusiste pero en tu Blog.
EliminarLo de los comentarios de Blogger sucede siempre que uno no está autenticado de algún modo con un usuario Google y pulsa directamente publicar para sacar el mensaje o cuando a pesar de que se quiere dejar como anónimo el comentario, al darle directamente con el combo de "Responder como:" con la opción de cuenta de Google, al no estar autenticado no graba el mensaje.
Esto es así con los comentarios por defecto de Blogger.De todas maneras, de todos los sistemas que he probado, finalmente son los más eficientes para todo el mundo.
Cualquier duda estaré aquí.
Hola Miguel
ResponderEliminarEstoy trabajando con envío de datos a través de código HTML en web lo estoy montando en un site como un Gadget, no se si esto sea lo correcto porque me muestra correctamente los textbox pero no me envía los datos al Spreadsheet que crees que este pasando?
gracias y saludos
Mike
Hola Miguel
ResponderEliminarEstoy trabajando con envío de datos a través de código HTML en web lo estoy montando en un site como un Gadget, no se si esto sea lo correcto porque me muestra correctamente los textbox pero no me envía los datos al Spreadsheet que crees que este pasando?
gracias y saludos
Mike
Hola Miguel
ResponderEliminarEstoy trabajando con envío de datos a través de código HTML en web lo estoy montando en un site como un Gadget, no se si esto sea lo correcto porque me muestra correctamente los textbox pero no me envía los datos al Spreadsheet que crees que este pasando?
gracias y saludos
Mike
Hola Mike,
Eliminarpueden ser muchos temas. ¿Es un formulario de estos de Drive o estás mandando un formulario en HTML normal y corriente?.
Puedo establecer/configurar en un formulario creado en google drive, un tiempo máximo para responder el formulario?
ResponderEliminarHola, puedes añadir funciones condicionales... pero requiere programación. "De serie" no puedes ponerle plazos.
EliminarUn saludo.
un saludo me encanto tu post gracias
ResponderEliminarun saludo me encanto tu post gracias
ResponderEliminarme encanto tu post gracias
ResponderEliminarGracias por tu feedback. Un saludo!
EliminarHola Miguel! Excelentes todos los post. Venía bien con todo y acá tengo un problema. Seguí todos los pasos al pie de la letra. Terminé de crear la página "Contactos", pongo Vista Previa, se ve que quedó todo perfecto en el blog, aparece el formulario en el menú Contactos, pero cuando guardo los cambios y me voy al blog, no me aparece. Qué puede estar mal?
ResponderEliminar
EliminarVerifica que el tamaño del iframe donde se almacena el formulario deja que se vea correctamente en todas las resoluciones.
Comprueba que la ruta al formulario es correcta y prueba en varios navegadores (Chrome, Edge, Explorer, Firefox, etc...).
Comprueba que en el HTML de la página o la entrada estan todas las etiquetas bien cerradas, cualquier error o que falte una etiqueta HTML puede hacer que no se vea el formulario
perdon que pregunte aqui que tal vez no tiene que ver con el tema pero no lo encuentro,
ResponderEliminarveras en mi blog en la parte de contactos quiero poner una caja de texto junto con otros temas para llenar, me puedes decir el link o donde explicas como poner esta opcion asi me mandan correo directo de mi blog a mi gmail. Gracias