Guia · 6 min de leitura
Como incorporar um formulário no seu site
Existem várias formas de colocar um formulário no seu site, desde um trecho de código de uma linha até uma integração de API totalmente personalizada. Este guia percorre incorporações em linha, janelas modais popup, o componente web e o SDK JS, e a API REST pública, para que você escolha a abordagem que combina com o seu projeto.
Incorporação em linha
Uma incorporação em linha coloca o formulário diretamente no fluxo da sua página, de modo que ele fica entre seu outro conteúdo como qualquer outra seção. Você cola um pequeno trecho de código onde quer que o formulário apareça, e ele é renderizado no lugar, sem redirecionamento, sem página de destino separada.
A versão mais simples é um componente web: adicione a tag <yeetform-embed> com o slug do seu formulário e o formulário carrega em linha. Se preferir, o mesmo efeito está disponível por meio de uma única chamada do SDK JS que renderiza em um elemento de destino que você escolher.
Popup ou modal
Às vezes você não quer o formulário na página de forma alguma até que alguém peça por ele. Um popup ou modal mantém seu layout limpo e abre o formulário em uma sobreposição quando um visitante clica em um botão, ideal para botões de contato, widgets de feedback ou uma chamada para ação no canto da tela.
Com o SDK JS você conecta um botão a YeetForm.open(slug) e o formulário aparece em um modal centralizado sobre sua página. O visitante o preenche sem nunca sair, e a sobreposição se fecha ao enviar, então o formulário nunca disputa espaço com seu conteúdo principal.
Componente web e SDK JS
Para a maioria dos sites, o componente web e o SDK JS cobrem tudo. A tag <yeetform-embed> é a opção sem build, funciona em HTML puro, em um bloco de CMS, ou dentro de qualquer framework que permita elementos personalizados. O SDK JS oferece controle programático quando você precisa dele.
O SDK (public/sdk.js) expõe um pequeno conjunto de métodos:
- YeetForm.render(slug, target, options), incorpora o formulário em linha em um elemento que você escolher.
- YeetForm.open(slug, options), abre o formulário em um modal popup.
- YeetForm.load(slug, lang), busca o esquema do formulário sem interface, por exemplo para contar ou inspecionar campos.
- YeetForm.submit(slug, answers), envia uma resposta programaticamente a partir do seu próprio código.
API para integrações personalizadas
Quando você precisa de controle total, um front-end sob medida, um aplicativo móvel ou um fluxo no lado do servidor, use a API REST pública. Ela tem CORS habilitado, então você pode chamá-la diretamente do código do navegador, e não exige autenticação para formulários públicos, então nenhuma chave de API é necessária para carregar um esquema ou enviar uma resposta.
Uma integração típica busca o esquema do formulário com uma requisição GET, renderiza os campos como você quiser na sua própria interface, e então envia as respostas coletadas de volta com POST. Como o esquema é apenas JSON, você pode criar layouts completamente personalizados enquanto o YeetForm continua cuidando do armazenamento, das notificações e da análise nos bastidores.