Incorporar Google Forms, Calendly e Typeform no seu site
Incorporar Google Forms, Calendly e Typeform
Incorporar Google Forms, Calendly e Typeform em um site | We.Inc
Onde achar o código de incorporação no Google Forms, Calendly e Typeform, como fazer cada um caber no celular e um gerador que arruma o código para você.
Cada serviço oferece um trecho de código para colar na sua página. O Google Forms entrega um iframe pela opção Incorporar HTML; o Calendly fornece uma div mais um script em Adicionar ao site; o Typeform fornece uma div com data-tf-widget mais o script de incorporação. Defina uma altura adequada, um título e largura de 100% para que caiba no celular.
Onde fica cada código de incorporação (em outubro de 2026)
Serviço
Onde clicar
O que você cola
Google Forms
Menu Mais (três pontos) > Incorporar HTML > Copiar
Um iframe
Calendly
Página de agendamento > três pontos > Adicionar ao site
Uma div e uma tag script
Typeform
As opções de incorporação nas configurações de compartilhamento do formulário
Uma div com data-tf-widget e uma tag script
Copiar o código é a parte fácil. Os problemas aparecem depois: um formulário cortado no celular, uma barra de rolagem dupla, um iframe sem título para leitores de tela ou um widget de agendamento que deixa a página lenta. Este guia mostra onde fica cada código e como fazer ele se comportar.
Escolha o serviço no gerador abaixo.
Cole o que o serviço forneceu: o código iframe do Google, o seu link do Calendly ou o link do seu typeform.
Defina a altura e um título curto que descreva o formulário, e ative o carregamento lento se o formulário ficar abaixo da dobra.
Copie o código limpo para um bloco HTML ou de incorporação no seu site e teste em um celular.
Dê um título a cada iframe, como Formulário de contato ou Agende uma conversa. Quem usa leitor de tela ouve esse título antes de decidir se entra.
Adicione loading="lazy" aos iframes que ficam mais abaixo na página, para que o formulário só carregue quando o visitante rolar até ele.
Defina a largura como 100% e limite com max-width em vez de uma largura fixa em pixels, senão o formulário vai transbordar em telas pequenas.
Faça um envio de verdade depois de incorporar. Um formulário que parece certo ainda pode enviar para a conta errada ou para uma versão de rascunho.
Perguntas frequentes
Por que o meu Google Form incorporado tem duas barras de rolagem?
O iframe é mais baixo que o formulário, então o formulário rola dentro dele enquanto a página também rola. Aumente o atributo height até o formulário inteiro caber, e confira de novo depois de adicionar perguntas, porque o quadro não cresce sozinho.
Posso estilizar um Google Form incorporado com o meu próprio CSS?
Não. O formulário é uma página servida pelo Google dentro de um quadro, e a sua folha de estilos não consegue alcançá-lo. Você pode mudar o tema dentro do Google Forms ou criar o seu próprio formulário que envia para outro lugar.
Como evito que o widget inline do Calendly fique cortado?
O próprio código do Calendly define uma largura mínima de 320px e uma altura fixa. Aumente a altura se o seu evento faz perguntas extras, ou use as opções de texto pop-up ou widget pop-up para que o agendador abra por cima da página.
Qual incorporação do Typeform devo usar?
O Typeform oferece incorporações inline, página inteira, pop-up, slider, popover e aba lateral. Use inline quando o formulário é o objetivo da página, e pop-up ou slider quando ele é uma ação secundária ao lado de outro conteúdo.
Essas incorporações funcionam em um site criado com o We.Inc?
Sim. Adicione o código em um bloco HTML ou de incorporação, ou peça ao editor para colocar o formulário em uma seção. O código é HTML comum, então se comporta igual em qualquer outro site.
Google Forms
Abra o formulário, escolha o menu Mais no canto superior direito, selecione Incorporar HTML e clique em Copiar. A página de ajuda do Google lista esses passos. O resultado é um único iframe apontando para o seu formulário.
O iframe copiado tem dimensões fixas em pixels. Troque a largura por 100% com um max-width para que ele encolha no celular, mantenha a altura grande o bastante para a versão mais longa do formulário e adicione um título.
Calendly
Na sua página de agendamento, abra o menu de três pontos ao lado do evento e escolha Adicionar ao site. O Calendly então oferece três estilos: incorporação inline, widget pop-up (um botão flutuante) e texto pop-up (um link). Você também pode ocultar a sua foto ou os detalhes do evento antes de copiar.
O código inline é uma div com a classe calendly-inline-widget, o seu link em data-url e um script de assets.calendly.com. Carregue esse script uma vez por página, mesmo que mostre vários widgets.
Typeform
A biblioteca de incorporação do Typeform lê qualquer elemento com data-tf-widget e o transforma no formulário, então o código é uma div mais um script. O id do formulário é a última parte do endereço do seu typeform, depois de /to/.
Para um botão que abre o formulário em um pop-up, a biblioteca expõe window.tf.createPopup, que retorna as funções open, close e toggle, que você pode ligar ao seu próprio botão.
Velocidade e privacidade
Toda incorporação carrega código de outro site e pode gravar cookies desse site, então cite os serviços na sua política de privacidade. Se um formulário está bem abaixo na página, o carregamento lento ou um botão que o abre mantém a primeira visualização rápida.
Os três comparados
Estilos de incorporação de cada serviço (segundo a documentação de ajuda, outubro de 2026)
Serviço
Estilos de incorporação
Ajusta o tamanho sozinho?
Google Forms
Iframe inline
Não, você define a altura
Calendly
Inline, widget pop-up, texto pop-up
A altura inline é fixa, a menos que você use a incorporação avançada em JavaScript com redimensionamento
Typeform
Inline, página inteira, pop-up, slider, popover, aba lateral
O inline preenche a caixa que você der a ele
Códigos limpos para começar
Substitua os endereços de exemplo pelos seus. Cada um está dimensionado para caber no celular.
Google Form, largura total com título
Mantenha o src que o Google fornece; só mudam o tamanho, o título e o carregamento lento.
Agendador inline do Calendly
O formato da incorporação inline do Calendly: uma div com o seu link e um script.
Typeform inline
Troque abc123 pelo id do seu formulário. O script estiliza o widget sozinho.
Escolha Google Forms, Calendly ou Typeform, cole o código ou o link que o serviço forneceu e receba um código com título, largura adequada para celular e a altura que você definir. O gerador só reescreve texto; ele não carrega o formulário.
Cole o código iframe de Incorporar HTML
Cole o seu link de agendamento
Cole o link do seu typeform ou o id do formulário
Cole o código iframe do Google Forms (ele aponta para docs.google.com/forms).
Cole o seu link de agendamento do Calendly, por exemplo https://calendly.com/your-name/30min.
Cole o link do seu typeform, por exemplo https://form.typeform.com/to/abc123, ou só o id do formulário.