O utilizador clica em enviar. O que acontece a seguir? O navegador envia os dados para o servidor. O servidor processa-os. E depois? A página recarrega? Aparece algo na página? O utilizador é redirecionado para algum lado?
O tratamento da submissão de formulários é a ponte entre o frontend e o backend. Se for mal feito, o utilizador fica confuso. Se for bem feito, a experiência parece fluida e intencional. Este artigo explica as diferentes formas de tratar submissões de formulários.
Submissão tradicional de formulários
Numa submissão tradicional, o navegador envia os dados do formulário para o servidor usando os atributos action e method do formulário.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Quando o utilizador clica no botão, o navegador codifica os dados do formulário e envia-os para /submit. O servidor processa-os e responde com uma nova página. O navegador carrega essa página. O utilizador vê um novo URL e novo conteúdo.
A submissão tradicional é simples, funciona em todo o lado e funciona sem JavaScript. A principal desvantagem é que a página recarrega, o que parece lento mesmo quando não é, faz o utilizador perder a posição de scroll e limpa os campos do formulário.
Submissão de formulários com redirecionamentos
Depois de o servidor processar um formulário, normalmente redireciona o utilizador para uma página de sucesso ou de volta ao formulário.
No servidor, depois de processar o formulário, usa return redirect('/thank-you'), que envia uma resposta de redirecionamento HTTP 303 para que o navegador siga o redirecionamento e carregue a página /thank-you, onde o utilizador vê conteúdo novo num novo URL. A vantagem é que o utilizador sabe que o formulário foi processado e uma nova página deixa claro que algo aconteceu. A desvantagem é que a página recarrega, exigindo dois pedidos ao servidor (um para a submissão do formulário, outro para o destino do redirecionamento), o que faz a experiência parecer mais lenta do que o necessário.
Submissão de formulários com AJAX
O AJAX (Asynchronous JavaScript and XML) permite enviar os dados do formulário sem recarregar a página, usando form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } });. O navegador envia os dados do formulário com _blocked_, o servidor processa-os e responde, e o JavaScript recebe a resposta e atualiza a página, sem recarregar nem redirecionar. O utilizador fica na mesma página, mas vê uma confirmação. A vantagem é que é rápido, dá uma experiência fluida, não recarrega a página e dá-te controlo total sobre o que acontece a seguir. A desvantagem é que exige JavaScript e, se o JavaScript falhar, o formulário não é submetido, o histórico não é atualizado (o URL mantém-se) e tens de tratar todo o feedback ao utilizador por ti.
Melhoria progressiva com AJAX
Melhoria progressiva significa que o formulário funciona sem JavaScript, mas funciona melhor com ele. Começa com um formulário tradicional que funciona sem JavaScript, em que o formulário é submetido e a página redireciona para um agradecimento. Depois, se o JavaScript estiver disponível, interceta o evento de submissão com addEventListener usando if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } para enviar por AJAX e mostrar uma mensagem na mesma página. Assim o formulário funciona nos dois cenários. Com JavaScript, é submetido por AJAX e o utilizador fica na página. Sem JavaScript, é submetido de forma tradicional e redireciona. A vantagem é que o formulário funciona para todos: quem tem JavaScript tem a experiência fluida e quem não tem continua a conseguir usar o formulário. A desvantagem é haver mais código, porque tens de manter os dois caminhos de submissão.
Tratar erros na submissão de formulários
Quando o servidor rejeita uma submissão (a validação falha, erro na base de dados, etc.), tens duas abordagens. Na submissão tradicional, o servidor volta a mostrar o formulário com mensagens de erro e apresenta-as ao utilizador. Na submissão AJAX, o servidor responde com um código de estado de erro (400, 422) e mensagens de erro, e o JavaScript mostra os erros na página usando _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Mostra sempre os erros junto dos campos que os causaram, em vez de os esconderes num resumo, para que o utilizador veja exatamente o que correu mal e onde corrigir.
Tratar estados de carregamento
Quando o formulário é submetido, desativa o botão de envio para que o utilizador não clique duas vezes e mostra um indicador ou uma mensagem de carregamento, usando form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; });. Desativa o botão imediatamente porque, se o pedido demorar 5 segundos, o utilizador pode clicar outra vez, a pensar que não funcionou.
O que fazer depois de uma submissão bem-sucedida
Depois de o formulário ser submetido com sucesso, tens opções. Podes limpar os campos do formulário, mostrar uma mensagem de agradecimento, redirecionar para uma página de agradecimento, enviar um email ao utilizador, devolvê-lo à página anterior, ou ficar no formulário e deixá-lo submeter outra vez. Escolhe consoante o objetivo do teu formulário. Um formulário de contacto deve mostrar uma mensagem de agradecimento, um formulário de reserva deve redirecionar para a confirmação da reserva e uma subscrição de newsletter deve devolver a pessoa à página em que estava.
Como o WEMASY trata a submissão de formulários
Os formulários do WEMASY suportam tanto a submissão tradicional como o AJAX. Configura o que acontece depois da submissão: mostrar uma mensagem, redirecionar para um URL ou enviar uma notificação por email. O WEMASY valida tanto no cliente como no servidor.
Vê as opções de submissão de formulários no teu plano WEMASY.