¿Cómo insertar Google Forms en tu app de React sin iframe?

Los desarrolladores de React que quieren un formulario de Google Forms en su app reciben un iframe con el código de inserción de Google: una página dentro de la página, con el aspecto de Google y su propia barra de desplazamiento, a la que los estilos de tu app no pueden llegar. Con el paquete de inserción de Formfacade, @formfacade/embed-react, el formulario se muestra como un componente de tu app, sin iframe. Sigues editando las preguntas en el editor del formulario, así que cambiar una pregunta no significa cambiar tu código y las respuestas se recopilan en tu formulario de Google Forms.

Sigue los pasos de abajo. El último necesita un formulario de Formfacade, así que crea tu formulario si todavía no tienes uno.

Requisitos previos

  • Node.js instalado en tu sistema.
  • Editor de texto o entorno de desarrollo integrado (IDE)

Crear una app de React

Si todavía no configuraste tu entorno de React, instala node.js y crea una app de React.
Paso 1: Haz clic aquí para descargar node.js
Paso 2: Instala NPX de forma global ejecutando el siguiente comando en tu terminal.
npm install -g npx
Paso 3: Genera una app de React
npx create-react-app test-react-app

Instalar Formfacade/embed-react

Formfacade/embed-react es la biblioteca de inserción de Formfacade para insertar Google Forms en tu app de React sin iframe.
En el directorio de tu app, abre la terminal e instala el paquete Formfacade Embed:
npm install @formfacade/embed-react

Insertar Google Forms en una app de React

  • En la página que se abre, ponle nombre a tu formulario, haz clic en Embed form y luego en Proceed.
  • En la pestaña Share, en Where do you want to embed this form?, selecciona Embed in my React.js web app y haz clic 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
  • Agrega la instrucción import de abajo para importar el componente Formfacade Embed en tu app de React: import FormfacadeEmbed from "@formfacade/embed-react";
  • Agrega el código de Formfacade Embed en tu app de React: <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Copia este código desde la pestaña Embed, porque tiene la URL de tu formulario en lugar de los puntos.
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 sin iframe.

Resumen

Si insertas un formulario de Google Forms en React con el código de Google, obtienes un iframe con su propio aspecto y su propia barra de desplazamiento. Con Formfacade, instalas @formfacade/embed-react y agregas el código de Formfacade Embed en tu app de React. Crea tu formulario y completa los pasos de arriba. Si tienes alguna pregunta, escribe a soporte.

Última actualización: