Como incorporar o Google Forms no seu app React sem iframe?

Desenvolvedores React que querem um formulário do Google Forms no app recebem um iframe do código de incorporação do Google: uma página dentro da página, com o visual do Google e barra de rolagem própria, que os estilos do seu app não alcançam. Com o pacote de incorporação do Formfacade, @formfacade/embed-react, o formulário aparece como um componente no seu app, sem iframe. Você continua editando as perguntas no editor do formulário, então mudar uma pergunta não significa mudar o seu código, e as respostas são coletadas no seu Google Form.

Siga os passos abaixo. O último precisa de um formulário do Formfacade, então crie seu formulário se ainda não tiver um.

Pré-requisitos

  • Node.js instalado no seu computador.
  • Editor de texto ou ambiente de desenvolvimento integrado (IDE)

Crie um app React

Se você ainda não configurou seu ambiente React, instale o node.js e crie um app React.
Passo 1: clique aqui para baixar o node.js
Passo 2: instale o NPX globalmente executando o comando abaixo no seu terminal.
npm install -g npx
Passo 3: gere um app React
npx create-react-app test-react-app

Instale o Formfacade/embed-react

Formfacade/embed-react é a biblioteca de incorporação do Formfacade para incorporar o Google Forms no seu app React sem iframe.
Na pasta do seu app, abra o terminal e instale o pacote Formfacade Embed:
npm install @formfacade/embed-react

Incorpore o Google Forms no app React

  • Na página que abrir, dê um nome ao seu formulário, clique em Embed form e clique em Proceed.
  • Na aba Share, em Where do you want to embed this form?, selecione Embed in my React.js web app e clique em Next.
A aba Embed em Share perguntando Where do you want to embed this form?, com Embed, Embed in my React.js web app e Next destacados
  • Inclua a instrução de import abaixo para importar o componente Formfacade Embed no seu app React: import FormfacadeEmbed from "@formfacade/embed-react";
  • Adicione o código do Formfacade Embed no seu app React: <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Copie este código da aba Embed, pois ele tem a URL do seu formulário no lugar dos pontos.
A aba Embed mostrando o comando npm install e o código para adicionar ao seu app React
Seu formulário vai aparecer no seu app React sem iframe.

Resumo

Se você incorpora um formulário do Google Forms no React com o código do Google, recebe um iframe com visual e barra de rolagem próprios. Com o Formfacade, você instala o @formfacade/embed-react e adiciona o código do Formfacade Embed no seu app React. Crie seu formulário e siga os passos acima. Se tiver qualquer dúvida, escreva para o suporte.

Última atualização: