Como incorporar e personalizar o Google Forms em React ou Next.js sem iframe?
Desenvolvedores que criam em React ou Next.js e mantêm seus formulários no Google Forms batem na mesma parede: o código de embed do Google é um iframe de docs.google.com, então seu CSS e seu modo escuro nunca chegam ao formulário. O Customize theme para em uma imagem de cabeçalho, uma lista curta de fontes e duas cores e a API do Google Forms não tem nenhum estilo. Com o Formfacade, o formulário é renderizado como HTML nativo a partir de um pacote npm, então você o estiliza como o resto do seu produto, modo escuro incluído. As respostas continuam sendo coletadas no seu Google Form e sua equipe continua trabalhando no Google Forms e no Google Sheets.
Abaixo estão as duas formas reais de estilizar um Google Form em um app React ou Next.js e onde cada uma deixa a desejar.
O embed padrão do Google Forms é um iframe servido de docs.google.com, então sua folha de estilos nunca chega ao formulário e ele sempre parece do Google, não do seu produto. Este guia explica por que essa limitação existe, compara as opções reais e depois mostra como personalizar seu Google Form com o Formfacade e incorporá-lo em React ou Next.js sem iframe, incluindo modo escuro.
Por que você não consegue estilizar um Google Form incorporado com CSS
Quando você cola o código de embed do Google Forms, recebe um iframe que carrega o formulário de docs.google.com. Os navegadores aplicam restrições de origem cruzada: o CSS e o JavaScript da sua página não conseguem entrar em um frame servido de outro domínio. Sua classe .dark-mode e sua pilha de fontes param na borda do iframe.
O Google dá a você uma ferramenta de estilo, o editor de tema. Abra seu formulário e clique em Customize theme para definir uma imagem de cabeçalho, o estilo de texto dos títulos e das perguntas, uma cor de tema e uma cor de fundo.
O que ele não consegue fazer:
- Combinar com as fontes do seu site (você escolhe de uma lista curta do Google)
- Remover o layout em cartões, os destaques roxos de foco ou o rodapé do Google Forms
- Seguir o modo escuro do seu app
- Deixar o formulário com largura total e responsivo dentro do seu layout
A API do Google Forms também não ajuda. Ela lê a estrutura do formulário e os metadados das respostas, mas não tem nenhum endpoint de estilo.
Opções para personalizar o Google Forms em um app React ou Next.js
Há duas formas reais de fazer isso. A primeira é grátis e nativa, a segunda é o Formfacade.
Opção 1: iframe nativo mais o editor de tema
Use Customize theme para chegar perto das cores e depois incorpore o iframe no seu componente.
Prós:
- Grátis e oficial, nada extra para manter
- Funciona em qualquer lugar onde um iframe funciona
Contras:
- O estilo para nas cores e na imagem do cabeçalho; fontes, espaçamento e layout continuam do Google
- Iframe de altura fixa, formulários longos rolam dentro da própria caixa
- Sem sincronização do modo escuro com seu app
Opção 2: Como personalizar seu Google Form com o Formfacade
O Formfacade extrai os campos do seu formulário e permite mudar o estilo deles em um editor visual.
- Na página que abrir, dê um nome ao formulário, clique em Embed form e clique em Proceed.
- Clique na aba "Preview" para ver o formulário renderizado.
- Escolha o estilo Minimal ou Colorful e um tema como Persian indigo.
- Ajuste a cor principal, o fundo e a tipografia para combinar com seu app.
- Isso é só uma prévia. O design só é mantido se você clicar em "Apply to all forms", que muda o estilo de todos os formulários publicados da sua conta, então não clique se tiver outros formulários publicados. O embed funciona sem isso.
Como incorporar o formulário personalizado em React ou Next.js
O embed é um componente React, não um iframe, então ele herda o layout da sua página e continua responsivo.
- Clique na aba "Share"
- Clique em Embed
- Clique em "Embed in my React.js web app" e clique em Next.
- Copie o comando npm install e o trecho do componente React.
- Rode npm install @formfacade/embed-react no seu projeto.
- Substitua o bloco do iframe pelo componente de embed do Formfacade. O código já tem a URL do seu formulário.
Seu formulário vai aparecer no seu app React ou Next.js sem iframe.
Onde essa configuração funciona bem
Essa abordagem serve para qualquer lugar onde um iframe visível do Google ficaria deslocado: um cadastro de lista de espera em um site de marketing ou um formulário de feedback e contato dentro de um app Next.js. Você mantém o Google Forms como o backend que sua equipe já conhece, enquanto os visitantes veem um formulário que combina com seu design, incluindo modo escuro.
Perguntas frequentes
O modo escuro funciona com o formulário incorporado?
Sim. Defina seu próprio fundo e suas cores principais na aba Theme do Formfacade. Como o formulário é renderizado como HTML nativo em vez de um iframe, ele fica dentro do seu layout escuro sem um cartão branco do Google.
As respostas continuam indo para o Google Sheets?
Sim, com Submit to Google Forms ativado em Responses. O Formfacade envia para o seu Google Form, então as respostas aparecem na aba de respostas do formulário e na planilha vinculada do Google Sheets, como antes.
Funciona com o App Router do Next.js e a renderização no servidor?
Sim. O componente @formfacade/embed-react roda no navegador, então no App Router adicione a diretiva "use client" no topo do arquivo que o renderiza. O resto da sua página pode continuar renderizado no servidor.
Posso simplesmente usar CSS no embed padrão do Google Forms?
Não. O embed padrão é um iframe de docs.google.com e as restrições de origem cruzada impedem que seu CSS chegue dentro dele. O único estilo nativo é o editor Customize theme, que cobre cores, imagem do cabeçalho e uma lista limitada de fontes.
Resumo
Se você incorpora um Google Form em React ou Next.js com o código do Google, o iframe bloqueia seu CSS e o formulário sempre parece do Google. Com o Formfacade, você estiliza o formulário na aba Preview e o incorpora com um pacote npm, sem iframe. Crie seu formulário e siga as etapas acima. Se tiver dúvidas, escreva para o suporte.
Última atualização: