Crias formulários numa ferramenta de formulários especializada. Agora precisas de pôr esse formulário no teu website. Não consegues copiar e colar o código se o teu website usar uma plataforma diferente. Incorporas. Um formulário incorporado aparece no teu site mas vive noutro lado.
Este artigo explica como incorporar formulários, como funcionam os iframes, a segurança entre domínios e os problemas comuns dos formulários incorporados.
O que é um formulário incorporado?
Um formulário incorporado é um formulário que vive num servidor mas aparece noutro website. O formulário está alojado em wemasy.pt mas é mostrado no teu site com um iframe como <iframe src="https://wemasy.com/form/abc123"></iframe>.
O iframe cria uma janela para outra página. Essa página contém o formulário. Para o utilizador, parece que o formulário está no teu site. Tecnicamente, é uma página separada dentro de um contentor.
Como funcionam os iframes
Um iframe é uma moldura em linha. Carrega uma página completamente separada dentro da tua página. Essa página separada tem o seu próprio HTML, CSS e JavaScript. Está isolada numa sandbox, o que significa que não consegue aceder à tua página nem vice-versa.
Os iframes oferecem isolamento de segurança: a ferramenta de formulários não consegue aceder aos dados da tua página, a tua página não consegue aceder aos dados do formulário e, se o formulário falhar, não faz falhar a tua página. No entanto, os iframes têm desvantagens, como a comunicação direta limitada entre a página e o formulário, o possível impacto no SEO (o Google pode não indexar o conteúdo do formulário), tempos de carregamento mais lentos e a falta de suporte para cookies entre domínios.
Incorporar um formulário com um iframe
A maioria dos criadores de formulários fornece um código de incorporação como <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Copia e cola este código no HTML do teu website para mostrar o formulário dentro do contentor. Um problema comum é a altura fixa causar problemas de deslocação. Se o formulário for mais comprido do que a altura que definiste, o formulário desloca-se dentro do iframe (má experiência). Tens de saber a altura exata do formulário, mas os formulários crescem e encolhem com a lógica condicional, por isso a altura não é fixa. A solução é usar iframes com redimensionamento automático, com postMessage para comunicar entre o iframe e a página principal. Quando o formulário muda de tamanho, avisa a página principal para redimensionar o iframe. O JavaScript da página principal escuta as mensagens do iframe com window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. O formulário dentro do iframe envia uma mensagem com a sua altura usando parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, e assim o iframe expande-se automaticamente para caber o conteúdo do formulário.
Segurança entre domínios
Os iframes ficam isolados numa sandbox por segurança. O formulário não consegue aceder aos dados da tua página. A tua página não consegue aceder aos dados do formulário. Isto é bom.
Tem cuidado com o atributo sandbox em <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. O atributo sandbox restringe o que o iframe pode fazer. O allow-same-origin deixa o iframe aceder a cookies e ao armazenamento de sessão, o allow-scripts deixa o JavaScript correr e o allow-forms deixa o formulário submeter. Ativa apenas as permissões de sandbox de que realmente precisas, porque o valor por defeito (todas as permissões negadas) é o mais seguro mas estraga a maioria dos formulários.
Submissão de formulários incorporados
Quando o utilizador submete um formulário dentro de um iframe, a submissão acontece dentro do iframe e o formulário envia os dados para o servidor do criador de formulários (não para o teu servidor). O teu servidor nunca vê os dados do formulário, porque a ferramenta de formulários os guarda e tu os recuperas mais tarde através de uma API ou de uma notificação por email. Se precisares de mais controlo, tens de intercetar a submissão. Isto exige que a ferramenta de formulários envie um postMessage à página principal com window.parent.postMessage({ type: 'submit', data: formData }, origin);, e depois a página principal pode fazer algo com os dados (enviá-los para o teu servidor, mostrar uma página de agradecimento personalizada, etc.).
Formulários incorporados no telemóvel
No telemóvel, os iframes podem ser problemáticos. O formulário é mais pequeno e mais difícil de usar. O iframe pode não se redimensionar bem se não suportar o redimensionamento automático.
Uma abordagem melhor no telemóvel é ligar a um formulário em página inteira em vez de incorporar um iframe. Deteta o tamanho da janela e mostra um botão de ligação no telemóvel, mas incorpora no computador com if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.
Impacto dos formulários incorporados no desempenho
Os iframes acrescentam peso. Cada iframe é um pedido HTTP separado. Carrega o seu próprio HTML, CSS e JavaScript. Isto atrasa a tua página.
Carrega o iframe de forma preguiçosa, não o carregando até o utilizador se aproximar dele, com <iframe data-src="https://..." style="display: none"></iframe> e window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. O iframe só carrega quando o utilizador está prestes a vê-lo.
Quando usar formulários incorporados em vez de alternativas
Usa formulários incorporados quando não consegues personalizar o teu website (por exemplo, num criador de websites alojado e fechado) ou quando queres manter a ferramenta de formulários separada do teu site.
Usa formulários nativos quando controlas o teu website e queres desempenho. Um formulário construído na tua própria tecnologia carrega mais depressa e integra-se melhor.
Usa formulários alojados (autónomos) quando queres simplicidade. Um formulário no domínio do criador é o mais fácil de configurar mas parece menos profissional.
Como a WEMASY trata os formulários incorporados
Os formulários da WEMASY podem ser incorporados em sites externos com iframes que se redimensionam automaticamente. Os formulários estão otimizados para todos os tamanhos de dispositivo. Podes receber as submissões no teu painel da WEMASY, por email ou através de webhooks.
Vê as opções de incorporação no teu plano WEMASY.