Cómo incrustar un formulario dentro de Sheets para facilitar ingreso de datos

por | Mar 14, 2023 | Blog, Google Spreadsheets

Cuando varias personas colaboran en una hoja para ingresar filas nuevas, sería mejor si la experiencia fuera estandarizada para que hubiera menos riesgo de errores. Si usamos un formulario conectado a una hoja de cálculo de Google Sheets, podemos lograr que los datos se acomoden solos fácilmente. ¿Habrá forma de tener este formulario siempre presente incrustado en nuestra hoja? Sí que la hay, y es justo lo que aprenderemos a hacer hoy 😀

Preparando el formulario y la hoja

Como siempre, primero vamos a preparar los documentos que necesitaremos, empezando por crear un nuevo formulario de Google. En él, creamos las preguntas correspondientes a las columnas que queremos tener en nuestra hoja. Para nuestro ejemplo supongamos que necesitamos que funcione como un registro de participantes de un torneo deportivo entre facultades de una universidad. Para mantenerlo sencillo por ahora solo preguntamos el nombre del participante, la facultad con opción múltiple y la edad.

Marcamos todas las preguntas como obligatorias y ponemos especial atención a la pregunta de Edad, en la cual activaremos una validación de respuesta para asegurarnos de que solo se ingresen números.

Con las preguntas listas, vamos ahora a la pestaña de Respuestas, usamos la opción de Vincular a Hojas de cálculo y elegimos crear una nueva hoja.

Esto creará un documento de Google Sheets nuevo que ya estará vinculado con nuestro formulario y listo para recibir respuestas.

Crear un panel lateral dentro de Sheets

Para incrustar el formulario dentro de la hoja y activarlo cuando lo necesitemos, debemos usar las capacidades de Google Sheets y Apps Script de funcionar como página web usando el panel lateral. Requiere un poco de código, pero no te preocupes porque aquí te lo compartiré y será bastante sencillo.

Entonces vamos al menú Extensiones – Apps Script para abrir el editor de código y reemplazamos el código que vemos por este:

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu("Registros")
  .addItem("Registrar participantes", "mostrar_panel")
  .addToUi();
}

function mostrar_panel() {
 SpreadsheetApp.getUi()
  .showSidebar(
    HtmlService.createHtmlOutputFromFile("panel.html")
    .setTitle("Registrar participante")
  );
}
Lenguaje del código: JavaScript (javascript)

Lo que hicimos aquí es primero crear un menú llamado Registros, con una opción llamada Registrar participantes, que llama a la función mostrar_panel, que podemos ver un poco más abajo. Esta función de mostrar_panel muestra el sidebar, es decir, el panel lateral derecho, con la indicación de utilizar el archivo panel.html como fuente.

¿Dónde está ese archivo panel.html, te preguntarás? Bueno, apenas lo vamos a crear. Damos click en el signo de más en el apartado de Archivos y elegimos HTML. Luego, ingresamos el nombre como panel, cuidando de no agregar la extensión html, pues el editor hará eso por nosotros.

Elegimos el archivo panel.html y dentro pegamos el siguiente código. Como te puedes dar cuenta es casi igual al que viene por default, solamente con un estilo mínimo de ajuste aplicado a la etiqueta de <body>.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body style="overflow-x: hidden;margin: 0;">

  </body>
</html>
Lenguaje del código: HTML, XML (xml)

Ahora necesitamos el código que hace que funcione el formulario dentro de una página HTML. Ese código lo obtenemos fácilmente si regresamos al editor del formulario y hacemos click en el botón de Enviar. Después usamos la pestaña para incrustar o incorporar HTML. Mi recomendación en las opciones que se muestran es usar un ancho y alto de 300 x 900 px más o menos, para que se ajuste correctamente al tamaño del panel lateral.

Lo copiamos y lo pegamos dentro de la etiqueta de <body> del código que teníamos pendiente en panel.html. Se debe ver así, solamente que en el tuyo debes tener el identificador del formulario ya agregado.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body style="overflow-x: hidden;margin: 0;">
    <iframe src="https://docs.google.com/forms/d/e/ID_DE_TU_FORMULARIO/viewform?embedded=true" width="300" height="936" frameborder="0" marginheight="0" marginwidth="0">Cargando…</iframe>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

Ya casi terminamos, por ahora, guardamos el código.

Mostrar formulario incrustado dentro de Google Sheets

Regresamos a nuestra hoja de cálculo y la refrescamos para ver un menú nuevo llamado Registros, con la opción que incluimos de Registrar participantes. La intentamos ejecutar una vez para que nos pida el permiso correspondiente, y se lo damos.

Ejecutamos una vez más ese menú y ahora nos mostrará nuestro nuevo panel lateral con el formulario que creamos, listo para usarse aquí mismo, sin necesidad de abrirlo en otra pestaña. Si llenamos algo de información, veremos cómo se agrega automáticamente una fila cada vez que enviamos el formulario. ¿Está genial no?

¡Y listo! Ahora ya sabes cómo incrustar un formulario de Google dentro de una hoja de Google Sheets. Realmente este mismo procedimiento lo podrías usar para incrustar cualquier tipo de código HTML. Yo creo que podrás encontrarle un uso muy práctico a esta idea, espero que te haya gustado 😄

Guía en video

Si tienes dudas puedes ver esta misma guía explicada en video

¡Espero que te haya sido útil esta guía! No olvides seguirnos en YouTube para más tips, trucos y guías de productividad.

Si te interesa aprender más sobre Google Sheets, checa nuestro Curso: Aprende Sheets en el que podrás elevar tu aprendizaje de hojas de cálculo al nivel experto.

Aprende Sheets: Curso práctico de Hojas de cálculo de Google
Aprende Sheets: Curso práctico de Hojas de cálculo de Google

Deja un comentario