O que acontece naquele único segundo depois de alguém clicar em enviar no teu formulário? A maioria das pessoas nunca pensa nisso. O envio de um formulário é invisível para os teus visitantes, mas é tudo para os teus sistemas. No momento em que alguém clica em enviar, começa uma cadeia de eventos que a maioria das pessoas nunca vê. Os teus dados são validados, codificados, enviados, recebidos, processados e guardados.
Se algo correr mal nesse segundo, precisas de saber onde. Este artigo percorre todos os passos do processo de envio para perceberes o que acontece depois do clique.
O que é o envio de um formulário
O envio de um formulário é o processo de recolher os dados que um visitante introduziu nos campos do teu formulário e enviá-los para um destino, para serem processados. O envio acontece quando um utilizador clica num botão de enviar (ou carrega em Enter num campo de texto), o que desencadeia um pedido HTTP que leva as respostas do visitante para o teu servidor ou para um serviço de terceiros.
O processo de envio do formulário inclui vários passos: recolha dos dados, codificação, transmissão, validação, processamento e resposta. Cada um destes passos tem de ser concluído com sucesso para o envio funcionar corretamente.
Como funciona o envio de um formulário, passo a passo
Quando um visitante carrega em enviar, desenrola-se uma sequência específica. Perceber cada passo ajuda-te a resolver problemas de integração e a configurar as automatizações corretamente.
Passo 1: O evento de envio é acionado
Quando um utilizador clica no botão de enviar ou carrega em Enter em certos campos, o formulário gera um evento de envio. Este evento indica ao navegador que deve reunir todos os dados introduzidos nos campos do formulário e prepará-los para a transmissão.
Passo 2: Os dados do formulário são recolhidos
O navegador lê todos os campos do teu formulário (campos de texto, listas pendentes, caixas de seleção, carregamento de ficheiros, etc.) e extrai os valores. Os dados de cada campo são emparelhados com o respetivo atributo name, criando pares de chave e valor. Por exemplo, se tens um campo chamado "email" com o valor "jane@example.com", o navegador regista isso como um par.
Se um campo estiver vazio ou em branco, o formulário recolhe-o na mesma (alguns sistemas ignoram campos vazios, consoante a configuração do formulário).
Passo 3: Os dados são codificados
Antes de os dados poderem viajar pela internet, têm de ser traduzidos para um formato que o servidor web entenda. Isto chama-se codificação. Os dois formatos de codificação mais comuns são:
Codificado em URL (application/x-www-form-urlencoded): Os nomes e os valores dos campos são combinados com sinais de igual e carateres &. Por exemplo: "name=Jane&email=jane@example.com&phone=555-0123". É o formato por defeito na maioria dos formulários.
Multipart/form-data: Usado quando o teu formulário inclui carregamento de ficheiros. Este formato permite enviar em conjunto texto e dados binários (como imagens).
Passo 4: Os dados viajam até ao servidor
Os dados codificados do formulário são empacotados num pedido HTTP e enviados para o local indicado no atributo action do teu formulário. Se não houver nenhum action indicado, o formulário é enviado para a mesma página onde está.
O pedido HTTP inclui o método que indicaste: GET ou POST. Os pedidos GET são visíveis no URL (usados em pesquisas e filtros). Os pedidos POST escondem os dados no corpo do pedido (usados para informação sensível, como palavras-passe ou dados de pagamento).
Se o teu formulário é enviado por HTTPS (como devem ser todos os formulários modernos), os dados são encriptados durante a transmissão. Isto protege a informação de ser intercetada.
Passo 5: O servidor recebe e valida os dados
Quando o teu servidor recebe o envio, verifica primeiro se os dados são válidos e seguros. A validação pode incluir:
Confirmar que os campos obrigatórios não estão vazios. Verificar que os endereços de email parecem endereços de email reais. Verificar que os ficheiros carregados são do tipo e tamanho corretos. Testar que os números são mesmo números e não texto.
A sanitização é o processo de remover dos dados tudo o que seja perigoso (como scripts maliciosos). Isto protege a tua base de dados e os teus sistemas de ataques.
Passo 6: O servidor processa os dados
Depois da validação e da sanitização, o servidor decide o que fazer com os dados. As ações comuns incluem:
Guardá-los numa base de dados: O envio é guardado para o poderes rever mais tarde ou integrar noutros sistemas.
Acionar automatizações: O envio pode enviar automaticamente um email de confirmação, atualizar um CRM ou acionar um webhook.
Gerar uma resposta: O servidor cria e devolve uma resposta ao navegador do visitante. Pode ser uma página de sucesso, um redirecionamento ou uma mensagem de confirmação mostrada na mesma página.
Passo 7: O visitante vê a confirmação
O passo final é o que o visitante vive. Pode ser:
Uma mensagem de sucesso mostrada na mesma página. Um redirecionamento para uma página de agradecimento. Um email de confirmação enviado para a caixa de correio. Uma janela modal ou um pop-up a confirmar que o envio foi concluído.
Este passo é fundamental porque os visitantes precisam de saber que o envio funcionou. Sem um feedback claro, podem enviar o formulário várias vezes por pensarem que não foi.
O que acontece aos dados do formulário depois do envio
Quando o envio termina, os dados vão para algum sítio. Perceber para onde é essencial para usar bem os envios de formulários.
Os dados do teu formulário podem ser guardados em vários sítios ao mesmo tempo. A maioria dos criadores de formulários guarda os envios na sua própria base de dados por defeito (onde os podes ver no painel de administração). Em simultâneo, o envio pode ser reencaminhado para serviços externos, como plataformas de email marketing, sistemas de CRM ou aplicações à medida, através de integrações e webhooks.
O fluxo é assim: Envio do formulário → O criador de formulários capta os dados → Os dados são guardados localmente e reencaminhados para as integrações → Podes aceder aos dados a partir de várias plataformas.
O papel dos campos do formulário no envio
Nem todos os campos de um formulário se comportam da mesma forma durante o envio. Perceber como funciona cada tipo ajuda-te a desenhar formulários que captam os dados certos.
Campos de texto, áreas de texto, campos de email: Enviam o valor exatamente como foi introduzido.
Listas pendentes e campos de seleção: Enviam o valor da opção escolhida, não o texto apresentado (embora possam ser iguais).
Caixas de seleção: Só enviam um valor se estiverem marcadas. As caixas desmarcadas não enviam nada.
Botões de opção: Enviam apenas o valor da opção escolhida.
Carregamento de ficheiros: Enviam o ficheiro em si, não apenas o nome. O ficheiro é incluído na codificação multipart referida antes.
Campos ocultos: Enviam o seu valor automaticamente sem o visitante os ver. São úteis para passar informação extra juntamente com os campos visíveis.
Erros que podem acontecer durante o envio do formulário
Por vezes os formulários não são enviados com sucesso. Os problemas comuns incluem:
Erros de rede: Se a ligação à internet cair durante o envio, os dados podem não chegar ao servidor. O visitante deve ver uma mensagem de erro.
Erros do servidor: Se o teu servidor estiver em baixo ou sobrecarregado, o envio não pode ser processado. Isto resulta normalmente num erro 500.
Falhas de validação: Se os campos obrigatórios estiverem vazios ou os dados não corresponderem aos formatos esperados, o formulário não deve ser enviado de todo. Um bom design de formulários evita isto, verificando antes de enviar.
Erros de tempo limite: Se o envio demorar demasiado (normalmente mais de 30 segundos), o navegador pode cancelar o pedido.
Integrações mal configuradas: Se o teu formulário está configurado para enviar dados para um serviço externo mas a ligação está interrompida, o envio pode ter sucesso no teu criador de formulários mas não chegar ao destino.
Considerações de segurança no envio de formulários
A segurança importa em todas as fases do processo de envio. Aqui estão os pontos críticos:
Usa sempre HTTPS: O teu formulário tem de estar numa página segura (HTTPS), não em HTTP. Isto encripta os dados em trânsito.
Valida nos dois lados: A validação deve acontecer no navegador (para a experiência do utilizador) e no servidor (para a segurança). Nunca confies só na validação do lado do cliente.
Sanitiza toda a entrada: Remove ou escapa quaisquer carateres que possam ser perigosos quando guardados ou apresentados.
Limita o carregamento de ficheiros: Se o teu formulário aceita ficheiros, restringe os tipos e tamanhos de ficheiro para evitar abusos.
Implementa proteção CSRF: Os formulários devem incluir um token CSRF para impedir que atacantes enviem pedidos fraudulentos em nome dos utilizadores.
Guarda os dados sensíveis em segurança: Se o teu formulário recolhe palavras-passe, dados de pagamento ou outros dados sensíveis, esses dados devem ser encriptados em repouso (guardados encriptados na tua base de dados).
Como o WEMASY trata os envios de formulários
A ferramenta de formulários do WEMASY gere todo o processo de envio por ti. Quando um visitante envia um formulário no teu website WEMASY, o envio é captado e guardado automaticamente na tua conta WEMASY. A partir daí, podes ver os envios no teu painel, exportá-los em CSV ou ligar integrações para reencaminhar os dados para o teu CRM, a tua plataforma de email ou aplicações à medida.
O WEMASY trata de toda a complexidade técnica da validação, da codificação, da transmissão segura e do armazenamento. Tu focas-te em desenhar o formulário e em definir para onde vão os dados. Vê que integrações estão disponíveis na tua conta WEMASY ou consulta a página de preços para saber que funcionalidades de formulários estão incluídas no teu plano.