¿Cómo insertar y personalizar Google Forms en React o Next.js sin iframe?

Los desarrolladores que trabajan en React o Next.js y tienen sus formularios en Google Forms chocan con el mismo muro: el código de inserción de Google es un iframe de docs.google.com, así que tu CSS y tu modo oscuro nunca llegan al formulario. Customize theme se limita a una imagen de encabezado, una lista corta de fuentes y dos colores. La API de Google Forms no tiene nada de estilo. Con Formfacade, el formulario se muestra como HTML nativo desde un paquete npm, así que le das estilo como al resto de tu producto, con modo oscuro incluido. Las respuestas se siguen recopilando en tu Google Form y tu equipo sigue trabajando desde Google Forms y Google Sheets.

Estas son las dos formas reales de darle estilo a un Google Form en una app de React o Next.js y dónde se queda corta cada una.

La inserción predeterminada de Google Forms es un iframe servido desde docs.google.com, así que tu hoja de estilos nunca llega al formulario y siempre se ve como Google, no como tu producto. Esta guía explica por qué existe esa limitación, compara las opciones reales y luego muestra cómo personalizar tu Google Form con Formfacade e insertarlo en React o Next.js sin iframe, con modo oscuro incluido.

Por qué no puedes darle estilo con CSS a un Google Form insertado

Cuando pegas el código de inserción de Google Forms, obtienes un iframe que carga el formulario desde docs.google.com. Los navegadores aplican restricciones de origen cruzado: el CSS y el JavaScript de tu página no pueden llegar al interior de un marco servido desde otro dominio. Tu clase .dark-mode y tu pila de fuentes se detienen en el borde del iframe.
Google te da una sola herramienta de estilo: el editor de temas. Abre tu formulario y haz clic en Customize theme para definir una imagen de encabezado, el estilo del texto de los títulos y las preguntas, un color de tema y un color de fondo.
Lo que no puede hacer:
  • Usar las fuentes de tu sitio (eliges de la lista corta de Google)
  • Quitar el diseño en tarjetas, los acentos morados de foco o el pie de página de Google Forms
  • Seguir el modo oscuro de tu app
  • Hacer que el formulario ocupe todo el ancho y sea responsive dentro de tu diseño
La API de Google Forms tampoco ayuda. Lee la estructura del formulario y los metadatos de las respuestas, pero no tiene ningún endpoint de estilo.

Opciones para personalizar Google Forms en una app de React o Next.js

Hay dos formas reales de hacerlo. La primera es gratis y nativa, la segunda es Formfacade.

Opción 1: iframe nativo más el editor de temas

Usa Customize theme para acercarte a tus colores y luego inserta el iframe en tu componente.
Ventajas:
  • Gratis y oficial, nada extra que mantener
  • Funciona en cualquier lugar donde funcione un iframe
Desventajas:
  • El estilo se limita a los colores y la imagen de encabezado; las fuentes, el espaciado y el diseño siguen siendo de Google
  • Iframe de altura fija, los formularios largos se desplazan dentro de su propio cuadro
  • Sin sincronización del modo oscuro con tu app

Opción 2: cómo personalizar tu Google Form con Formfacade

Formfacade extrae los campos de tu formulario y te permite cambiarles el estilo en un editor visual.
  • En la página que se abre, ponle nombre a tu formulario, haz clic en Embed form y luego en Proceed.
  • Haz clic en la pestaña "Preview" para ver el formulario.
  • Elige el estilo Minimal o Colorful y un tema como Persian indigo.
  • Ajusta el color principal, el fondo y la tipografía para que combinen con tu app.
  • Esto es solo una vista previa. El diseño se guarda solo si haces clic en "Apply to all forms", que cambia el estilo de todos los formularios publicados de tu cuenta, así que no lo uses si tienes otros formularios publicados. La inserción funciona sin eso.
La pestaña Theme en Preview con los ajustes Primary color, Background y Typography. Los cuadros de color están marcados

Cómo insertar el formulario personalizado en React o Next.js

La inserción es un componente de React, no un iframe, así que hereda el diseño de tu página y sigue siendo responsive.
  • Haz clic en la pestaña "Share"
  • Haz clic en Embed
Las pestañas Edit, Preview, Share y Responses, con Share marcado
  • Haz clic en "Embed in my React.js web app" y luego en Next.
La pestaña Embed en Share que pregunta Where do you want to embed this form?, con Embed, Embed in my React.js web app y Next marcados
  • Copia el comando npm install y el fragmento del componente de React.
  • Ejecuta npm install @formfacade/embed-react en tu proyecto.
  • Reemplaza tu bloque iframe por el componente de inserción de Formfacade. El código ya tiene la URL de tu formulario.
La pestaña Embed que muestra el comando npm install y el código para agregar a tu app de React
Tu formulario se mostrará en tu app de React o Next.js sin iframe.

Dónde funciona bien esta configuración

Este enfoque sirve en cualquier lugar donde un iframe de Google visible se vería fuera de lugar: un registro para una lista de espera en un sitio de marketing o un formulario de comentarios y contacto dentro de una app de Next.js. Mantienes Google Forms como el backend que tu equipo ya conoce, mientras los visitantes ven un formulario que combina con tu diseño, con modo oscuro incluido.

Preguntas frecuentes

¿El modo oscuro funciona con el formulario insertado?
Sí. Define tus propios colores de fondo y principal en la pestaña Theme de Formfacade. Como el formulario se muestra como HTML nativo en lugar de un iframe, queda dentro de tu diseño oscuro sin una tarjeta blanca de Google.
¿Las respuestas siguen llegando a Google Sheets?
Sí, con Submit to Google Forms activado en Responses. Formfacade envía las respuestas a tu Google Form, así que aparecen en la pestaña de respuestas del formulario y en la hoja de Google Sheets vinculada, igual que antes.
¿Funciona con el App Router de Next.js y el renderizado del lado del servidor?
Sí. El componente @formfacade/embed-react se ejecuta en el navegador, así que en el App Router agrega la directiva "use client" al inicio del archivo que lo renderiza. El resto de tu página puede seguir renderizándose en el servidor.
¿Puedo simplemente usar CSS en la inserción estándar de Google Forms?
No. La inserción estándar es un iframe de docs.google.com y las restricciones de origen cruzado impiden que tu CSS llegue a su interior. El único estilo nativo es el editor Customize theme, que cubre los colores, la imagen de encabezado y una lista limitada de fuentes.

Resumen

Si insertas un Google Form en React o Next.js con el código de Google, el iframe bloquea tu CSS y el formulario siempre se ve como Google. Con Formfacade, le das estilo al formulario en la pestaña Preview y lo insertas con un paquete npm, sin iframe. Crea tu formulario y sigue los pasos anteriores. Si tienes preguntas, escribe a soporte.

Última actualización: