10 noviembre 2012

Tutorial: Publicar un formulario de Google Docs con imagenes, vídeos y/o sonidos usando Blogger.

Un lugar para publicar y modificar nuestros formularios.

Hace ya un tiempo que expuse en el tutorial: Incrustar imágenes, vídeos y sonidos en un formulario de Google Docs una forma de modificar los formularios de Google Docs para poder incluir todos aquellos aspectos que queramos. (Ver ejemplo)
Uno de los problemas más extendidos con este método es que es necesario modificar el HTML con algún programa y que, a su vez, es necesario un servidor donde colgar ese formulario.
Una opción para facilitar este trabajo (no sin algún que otro inconveniente) es usar la entrada de un blog como contenedor y usar su editor para modificar el formulario. En este tutorial me centraré en blogger por ser donde he experimentado con esta solución.
A grandes rasgos lo que hay que hacer es lo siguiente:
  1. Crear el formulario de google de la manera usual.
  2. Ver el formulario "en directo"
  3. Usar la opción de tu navegador para ver el código fuente del formulario.
  4. Seleccionar todo el código fuente y copiarlo.
  5. Crear una nueva entrada de blog y en la edición HTML pegar el código del formulario.
  6. Desde la vista normal insertar imágenes y vídeos de la manera tradicional. (Aquí nos encontraremos el primer problema)
Esto sería muy bonito si funcionase al 100% pero como lo que estamos haciendo es una pequeña chapucilla tiene sus inconvenientes y es necesario una edición del código para que todo funcione correctamente. A partir de aquí os presento como editar de forma básica del código y en tutoriales posteriores nos meteremos a una edición más detallada.
Pero antes veamos porqué esto no funciona del todo bien, para poder entender las soluciones.

¿PORQUÉ NO FUNCIONA COMO DEBERÍA?
La respuesta es evidente, porque los formularios no están pensados para copiar su código en una entrada de un blog.
El problema es que al copiar todo el código estamos incluyendo HTML pensado para funcionar solo (para entendernos). Por eso provoca errores en nuestra entrada de blog.
Para que todo funcione correctamente tendremos que borrar el código sobrante.

EDICIÓN BÁSICA DEL CÓDIGO
Vamos a ver un esquema de la estructura del código de un formulario de Google Docs:

  • Etiquetas generales de información DOCTYPE, apertura de <html>, <head> y demás...
  • Etiqueta de apertura de estilo  <style> ... código de estilo y etiqueta de cierra de estilo </style>
  • Etiqueta de cierre </head> y etiquetas de <body> y varias de <meta>
  • Comenzo del formulario con etiquetas <div>. A partir de ahí es el código del formulario.
  • Final con etiqueta de cierre <body> y <html>
Pues bien, para aclarar el tema diremos que será suficiente con dejar SOLO lo que se indica en AZUL (es decir, el código de estilo y el contenido propio del formulario) eliminando las etiquetas de body, head, html y demás, que acabarán confundiendo a nuestro blog.

Por tanto, tras copiar el código y pegarlo en el apartado HTML de la entrada del blog, eliminaremos lo que no está en azul.

Si hemos hecho esto de manera correcta, al volver a REDACTAR ya veremos nuestro formulario (sin estilos, pero los tiene). Ahora podemos añadir imágenes, vídeos y demás a través de las opciones del propio editor de Blogger.

PROBLEMA GORDO: Como la etiqueta style incluye (entre otros) fondo de pantalla, lo mínimo que deberéis hacer es eliminar del código style la parte del color de fondo y la url de la imagen de fondo (está al comienzo del style tras el body).

De momento es todo. Decir que este sistema sigue presentado algún que otro problema, pero en breve espero poder publicar otros tutoriales donde explicaré cómo lo he solucionado (incluido lo del fondo de pantalla) y también cómo personalizar el formulario.
Para los que quieran avanzar:

  • El problema de las cajas que no respetan el salto de línea lo he solucionado con código <p> de apertura y </p> de cierre. 
  • Lo del fondo del formulario, usando un blog intermedio con una template "vacía" de todo menos de las entradas y usando código iframe para incrustar luego en el blog que quiero.

Pensamiento final: Con lo fácil que sería para Google incluir un editor al estilo blog en sus formularios... incomprensible.

12 comentarios:

snif dijo...

Muchas gracias, me ha encantado el post. Muy útil. Queda perfecto.
La verdad es que cuesta comprender por qué no han hecho el esfuerzo de permitir introducir imágenes o cosas así. Supongo que será para no hacerse competencia en algún otro producto.
Felicidades ¡¡¡

Óscar Barquín dijo...

Hola Snif,
Gracias por tu comentario.
En este sistema todavía quedan algunos errores que pulir. Ya sacaré tiempo para publicar otro post (al menos) explicándolo.

Anónimo dijo...

Me ha ayudado muchísimo este post! Al final no voy a incluir las imágenes porque mi formulario es larguísimo y no puedo eliminar de forma práctica "todo lo que no es azul". Pero tus posts me han ayudado mucho, gracias, gracias!

Óscar Barquín dijo...

Gracias.
La verdad es que puede parecer algo lioso, pero sabiendo solo un poco de HTML es sencillo.
De todos modos, a ver si saco algo de tiempo y creo una nueva entrada explicando lo de la template vacía que facilita bastante las cosas.

Javier Sanz dijo...

Hola,

muchas gracias por tu respuesta en una de tus otras entradas del blog. Tengo unas nociones mínimas de html, he dejado únicamente los comentarios de style y div pero no consigo que se recojan las respuestas del formulario, en Google Drive. ¿cuales són las líneas de código clave para que se envíe el resultado en forma de hoja de cálculo?

Otra pregunta: ¿es posible poner claves para acceder a las entradas del blog?

Muchas gracias y enhorabuena de nuevo por tu post.

Óscar Barquín dijo...

Hola Javier
Debes dejar todo lo que va entre -style- y -/style-. (Esta etiqueta ni siquiera es obligatoria, la podrías quitar también, pero quedará el formulario "plano", sin estilos)


Además de lo anterior hay que dejar todo lo referente al formulario (yo te recomiendo desde la etiqueta que dice: -div class="ss-form-container"- (incluida) hasta el final.
El resto lo quitas. Además borra también las dos etiquetas finales body y html.
Prueba con eso a ver.
En cuanto al blog, puedes definir quién quieres que tenga acceso al mismo (todo el mundo, solo algunos con lo que deberán introducir su nombre de usurio y contraseña de gmail). Esto se hace en la pestaña de configuración del blog, en los permisos.

Javier Sanz dijo...

Hola Óscar,

gracias de nuevo por tu rápida respuesta. Llevo varias horas haciendo cambios varios sobre una encuesta muy sencilla. He quitado todo el apartado de head, así como las etiquetas meta, html y body.
Siento tener que poner el código pero quizás es la única forma de aclararme. De style solo veo una línea, que está dentro de meta. div class="ss-form-container" parece no estar. ¿Da lugar a confusión al blog o falta algo en este código? Sigue sin enviarse la respuesta al formulario de Google Drive y no aparece el mensaje de confirmación de envío ¿por qué es ahí donde tengo que verlo, no? He visto que después de ver el blog el código html cambia un poco respecto al que escribo yo. Sale así (Sustituyo <> por () ):

(style type="text/css")(/style)
(br /)
(div class="ss-form")
(form action="https://docs.google.com/forms/LOCALIZACIONFORMULARIO/formResponse" id="ss-form" method="post" target="_self")
(div class="ss-form-entry")
(label class="ss-q-item-label" for="entry_NUMEROS")(/label)
(/div)
(div class="ss-q-title")
Escala de valoración 1
(/div)
(/form)
(/div)
(input class="ss-q-short" id="entry_NUMEROS" name="entry.NUMEROS" /)
(br /)
(div class="ss-form-entry")
(label class="ss-q-item-label" for="entry_NUMEROS")(/label)
(/div)
(div class="ss-q-title")
Escala de valoración 2
(/div)
(input class="ss-q-short" id="entry_NUMEROS" name="entry.NUMEROS" /)(input name="draftResponse" type="hidden" value="[]
" /)(input name="pageHistory" type="hidden" value="0" /)
(br /)
(div class="ss-form-entry")
(input id="ss-submit" name="submit" type="submit" value="Enviar" /)
(/div)
(script src="/static/forms/client/js/NUMEROS-formviewer_prd.js" type="text/javascript")(/script)
(script type="text/javascript")(/script)


Muchas gracias

Óscar Barquín dijo...

Hola Javier,
El style le tendrás vacío porque no has puesto un tema en el formulario. Habrás seleccionado el plain.
Comprueba que has elegido también la forma en que se recogerán las respuestas dentro del formulario (esto es nuevo de la última actualización)
Veo un form cerrándose en el medio... no sé. Te recomendaría que volvieses a realizar el proceso de copiar y pegar el código fuente.

Javier Sanz dijo...

Hola,

Sigo sin conseguir que se envíe.

He visto que ese form que se cierra corresponde a cerrar esto(form action="https://docs.google.com/forms/LOCALIZACIONFORMULARIO/formResponse" id="ss-form" method="post" target="_self").


En cuanto a lo de elegir cómo se responden las respuestas solo he he elegido que se guarden en una hoja de cálculo y la he creado. El formulario va bien si lo ejecuto directamente de Google.

¿Será algún problema del botón enviar? No sé en html dónde se hace referencia a cómo enviar.
Veo (div class="ss-form-entry")
(input id="ss-submit" name="submit" type="submit" value="Enviar" /)
(/div) y arriba en el (form action) que he escrito antes parece que esté el link donde se ha de enviar, pero no sé cómo está conectado.

¿Alguna idea más?

Muchas gracias!!

Óscar Barquín dijo...

Vamos a hacer una pequeña prueba.
1.- Crearemos un formulario básico dejando la única pregunta que nos da de ejemplo (Pregunta sin título) con respuesta Opción 1. Sin tocar nada, vamos.
2.- Le decimos que envíe las respuestas a una nueva hoja de calculo.
3.- Vemos el formulario publicado.
4.- Ahora observaremos el código fuente del formulario y vamos a copiar todo el código que se encuentra entre estas etiquetas (incluidas):
-div class="ss-form-container"- -div class="ss-top-of-page"-
...
...
...
-script type="text/javascript"-_initFormViewer();-/script-

Este código lo pegamos en la parte HTML del blog.
No debería darte problemas.
Ahora intenta aplicarlo al formulario que tu quieres usar.
Cuando crees formularios con plantillas, el código style también deberás copiarlo porque es donde dice las imágenes, colores y demás del formulario.

Miguel de la Sierra Cortés dijo...

Muy útil Óscar. Siempre me quedaba la duda de que partes eliminar del código del formulario.

Un saludo.

Óscar Barquín dijo...

Hola Miguel,
Ahora ya es posible incluir imágenes y vídeos desde el propio editor del formularios, lo que facilita esta labor enormemente.