Ir al contenido principal

Contacto con Google Forms (III)

Punto final de nuestro cuasi-tutorial que trata sobre la creación de una página de Contacto en Blogger, usando un formulario desarrollado con Google Forms.
Todo el trabajo hasta el momento fue realizado y guardado en Google Drive… llega el momento de regresar al trabajo sobre nuestro blog.

Terminamos la segunda parte con la obtención de un código, que es el que debemos insertar en nuestro blog para poder acceder al formulario.
Dicho código tenía la forma:
<iframe src="https://docs.google.com/forms/d/XX-XXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Cargando...</iframe> 

Vamos a explicar rápidamente de que se trata tanta cosa rara…

La etiqueta IFRAME

Si buscás en la web por etiqueta iframe html te podés encontrar con medio millón de resultados… para nuestros fines al menos debés conocer:
  • los documentos HTML (páginas) se construyen usando etiquetas de diversa índole (posicionales, semánticos, funcionales, etc.), normalmente no visibles al lector. Suelen trabajar de a pares apertura-cierre.
  • las etiquetas <iframe> permiten abrir un cuadro (o ventana) dentro de una página web para mostrar otra página web, generalmente de un sitio externo, posiblemente para mostrar un servicio, un video, etc.
En nuestro caso, con el código anterior estaremos colocando (incrustando) una ventana o marco en donde se verá un documento tipo formulario, cargado desde docs.google.com.

Link de interés

  • LibrosWeb > Introducción a XHTML > Otras etiquetas importantes > 11.4. Iframes

Luego de esta inevitable digresión, seguimos con la secuencia del trabajo desde donde dejamos en el post anterior.

Paso 10:  crear la página de Contacto y vincularla al menú principal

Si venís leyendo los contenidos de este blog, sabrás que el tema creación de páginas ya está cubierto en la entrada Crear (y vincular) una página…sino ahora te estás enterando. Los detalles los podés encontrar allí.
  •  Creé una página (no una entrada) de nombre Contacto ► el sistema automáticamente le asigna un nombre (que no se puede cambiar).
  • Usando el modo de edición HTML, copié el código  <iframe ... del que venimos hablando, en área de redacción del contenido de la página. Opcionalmente puede estar precedido de un texto explicativo.
Queda algo así:
  • Antes de crear un vínculo a esta página en el menú principal, visualicé los resultados, muy parecidos a lo que ves aquí : Contacto 2  —recordemos que estamos usando la nueva versión de Google Forms—. Es buen momento que veas como quedó antes de seguir.
NOTA: para probar los resultados con el nuevo Google Forms, creé una página Contacto 2, con un formulario alojado en otra cuenta de Google...
NOTA 2: hice algunos cambios en el ancho (width) y altura (height) del iframe, para que se adapte algo mejor a mi blog.

Trabajo ¿terminado?

Desde el punto de vista funcional, el formulario cumple las espectativas básicas.
Desde el punto de vista de como el formulario se integra visualmente a nuestro blog, yo no estoy conforme: se ve todo un espacio vertical  inutilizado, y hay que bajar demasiado para llegar al primer campo a rellenar (Nombre).

La pregunta sería: ¿no se puede arreglar?

Para llegar a dar una respuesta hay que recordar que, por estar incrustado a través de etiquetas <iframe>,  estamos viendo un contenido no generado desde Blogger, sino una página HTML donde se incluye el formulario, que está generada por el sistema de Google Forms.
Y al momento de escribir esto —mayo de 2016— las nuevas Google Forms no dan opciones de configuración que nos ayuden sobre esta cuestión.
Pero las Google Forms están en continuo desarrollo, y quizás permitan en un futuro la personalización de los contenidos que vayan a ser insertados en sitios web (usando hojas de estilo CSS o algo similar); hoy por hoy no parece posible.

Ir un paso atrás es una solución

¿Me leí tres post sólo para ésto?  Casi puedo leer tu mente. Pero yo empecé estos relatos diciendo que iba a hacer una reconstrucción de mi experiencia, así que…

Reconstrucción de los hechos (final)

Luego de un primer resultado para mi gusto decepcionante, se me ocurrió reintentar la creación del formulario, pero esta vez cambiando a las Google Forms en su versión anterior¡y la magia sucedió! (la perseverancia rinde sus frutos).
  • el formulario antes realizado fue reconvertido a la versión anterior de Forms sin mayores problemas, es decir, lo trabajado hasta aquí seguía teniendo validez.
  • la visualización en vista previa de mi formulario reconvertido a la versión previa de Forms me mostró algo interesante: es visualmente más aceptable si se lo piensa como algo que va a ser incrustado en una página web , usando etiquetas iframe).
  • la versión anterior de Google Forms me deja personalizar en parte el formulario de contacto… yo cambié más que nada las tipografías.
De hecho, es el formulario que podés ver en mi página de Contacto actual (y que no pienso cambiar hasta que alguna razón de peso lo amerite).

Conclusión

Las Google Forms son una manera funcionalmente aceptable de incluir formularios de Contacto en una página web específica, para un blog que trabaje con Blogger.
De cualquier manera, si en el blog no se espera otro uso de formulario que en la página de contacto (una situación bastante normal) me parece que acceder a servicios externos como los que ya mencionamos (Wufoo, JotForm, EmailMeForm, etc.) es una mejor solución:
  • los formularios de servicios externos son más configurables/personalizables.
  • los mensajes enviados desde el sitio nos llegan directamente a nuestra casilla de email.
  • son más simples de implementar.
End of transmission. Chau

Comentarios

Entradas más populares de este blog

Notable Ep. One > Epilogue

La utilización de una plantilla oficial para el diseño de un blog en la plataforma Blogger siempre presentó una ventaja para quienes quieran personalizarlas sin tener grandes conocimientos de diseño web: esto se sigue manteniendo para los cuatro nuevos themes responsives presentados en 2017, incluyendo al theme Notable que estamos analizando. En la presente entrada vamos a hablar de cómo personalizar el tamaño de la tipografía en dicho theme para un rango de visualización intermedio (680 a 968px). NOTA: en este blog han sido tratados, en post escritos en junio de 2016   , cuestiones vinculadas a ajustes de las plantillas oficiales en uso en ese momento, plantillas que no generaban layouts de tipo responsive como las nuevas. En lo que sigue nos concentraremos en los procedimientos a aplicar en un theme del 2017 específico, el theme Notable. Una breve recapitulación Estuvimos tratando en el post anterior cuestiones que tienen que ver con el tamaño con que se muestra el texto pr

Ajustes finos en la plantilla Blogger (III)

Hacer ajustes de diseño en la plantilla Blogger es un proceso que implica una serie de pasos, de los cuales vimos los vinculados a la identificación de las etiquetas HTML a las que se les aplicarán los cambios de estilo CSS. Efectuar esos cambios desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger es relativamente sencillo (para quien cuenta con conocimientos en CSS), quizás con una única excepción: cuando queremos emplear una tipografía desde servicios de fuentes online…

Configuración del Blog: ¿público o privado? (II)

En la entrada anterior hablamos rápidamente sobre la clasificación de los usuarios de un blog en Blogger según su rol (administrador, autor y visitante/lector). También (y como el título de estas entradas lo sugiere) hay otra clasificación —esta vez de los blogs— según un aspecto funcional básico: públicos o privados. Nos centraremos a continuación en hablar sobre los blogs privados y, especialmente, en su utilidad dentro del ámbito educacional.