O que o Atributo Action do Formulário HTML Realmente Faz (e Por Que Isso Importa)

O atributo action de um formulário HTML diz ao navegador para onde enviar os dados do formulário quando o usuário clica em enviar. É a URL que recebe o envio do formulário, e sem ela, seus dados não têm para onde ir. Entender como funciona é a diferença entre um formulário de contato que realmente entrega mensagens e outro que silenciosamente não faz nada.

O que o atributo action realmente faz

Quando um usuário preenche um formulário e clica em enviar, o navegador empacota todos os valores dos campos do formulário em uma requisição e a envia para a URL especificada no atributo action . Essa URL é chamada de endpoint do formulário. Qualquer servidor nesse endpoint recebe os dados, processa-os e normalmente retorna uma resposta.

Aqui está o exemplo mais simples possível:

<form action="https://example.com/submit" method="POST">
  <input name="name" type="text"/>
  <button type="submit">Send</button>
</form>

Quando o usuário clica em "Enviar", o navegador envia uma requisição POST para https://example.com/submit com os dados do formulário anexados. O servidor nesse endereço cuida do resto.

Se você omitir o atributo action inteiramente, o navegador envia o formulário de volta para a URL da página atual. Isso é ocasionalmente útil para aplicativos renderizados no servidor, mas na maioria dos casos significa que seus dados não vão para lugar algum útil.

O que colocar na URL do formulário

A URL do formulário pode ser:

• Uma URL absoluta como https://api.example.com/contact . Isso envia dados para um servidor ou serviço completamente diferente.
• Uma URL relativa como /submit ou submit.php . O navegador resolve isso em relação ao domínio da página atual.
• Uma string vazia ( action="" ). Envia para a página atual, igual a omitir o atributo.

Para a maioria dos formulários de contato do mundo real, você usará uma URL absoluta apontando para seu próprio script do lado do servidor (um arquivo PHP, um endpoint Node.js, etc.) ou um serviço de backend de formulário de terceiros. O requisito chave é que algo precisa estar rodando nessa URL para receber e processar a requisição.

Por que o método é tão importante quanto a ação

O atributo method funciona junto com action para definir como os dados são enviados. Existem duas opções:

Para formulários de contato, sempre use method="POST" . Requisições GET expõem valores de campos na barra de endereço do navegador, ficam armazenadas no histórico do navegador e têm limites de comprimento que vão truncar mensagens mais longas. POST não tem nenhum desses problemas.

Por padrão, formulários HTML enviam dados como application/x-www-form-urlencoded , que codifica nomes de campos e valores em uma string estruturada. A maioria dos backends de formulário e serviços aceitam esse formato por padrão.

O problema do site estático

Aqui é onde os desenvolvedores batem numa parede. Se seu site é puramente estático (arquivos HTML simples hospedados em GitHub Pages, Cloudflare Pages ou hosts similares), não há código do lado do servidor rodando no seu domínio. Você não pode simplesmente apontar a ação do formulário para um script PHP porque não há runtime PHP para executá-lo.

Isso significa que sua URL de ação do formulário precisa apontar para outro lugar completamente. Suas opções são:

• Escrever e hospedar seu próprio backend API (Node.js, Python, etc.) em um servidor separado
• Usar uma função serverless (AWS Lambda, Cloudflare Workers)
• Usar um serviço de backend de formulário que oferece um endpoint de formulário HTML pronto para usar

A terceira opção é a mais rápida para a maioria dos projetos. Você obtém uma URL para colocar direto no seu atributo action e os envios começam a chegar na sua caixa de entrada sem nenhum código de backend. Se você está curioso sobre como isso se compara com escrever seu próprio manipulador do lado do servidor, o guia comparativo de PHP vs formulários serverless cobre bem os trade-offs.

Usando um serviço de endpoint de formulário

Um serviço de endpoint de formulário como Sendform.net funciona oferecendo uma URL única que atua como o atributo action do seu formulário. Você aponta seu formulário para lá, e o serviço encaminha os envios para seu email. Nenhum backend necessário.

Aqui está como funciona na prática:

<form action="https://sendform.net/en/!a8Kz3mXq12" method="POST">
  <input name="email" placeholder="[email protected]" required="" type="email"/>
  <textarea name="message" placeholder="Tell us more" required=""></textarea>
  <button type="submit">Send</button>
</form>

A configuração é simples:

1. Faça login no Sendform.net e crie um formulário para obter sua URL de endpoint pessoal.
2. Abra a aba Integração e copie o endpoint.
3. Cole como o atributo action do seu formulário com method="POST" .
4. Certifique-se de que seu formulário tem um <input/> com name="email" e um <textarea> </textarea> com name="message" .
5. Implante seu site. Os envios chegam na sua caixa de entrada de notificações.

Sendform também tem um Construtor de Snippet na aba Integração. Selecione "HTML" no seletor de framework, opcionalmente defina uma URL de redirecionamento para uma página de agradecimento personalizada, e ative um campo honeypot para proteção básica contra spam. Ele gera o snippet de formulário completo pronto para copiar.

O atributo formaction em botões

Existe um primo menos conhecido do atributo action do formulário: formaction em botões de envio individuais. Ele substitui o action do formulário apenas para esse botão específico.

<form action="/default-endpoint" method="POST">
  <input name="query" type="text">
  <button type="submit">Save</button>
  <button formaction="/preview-endpoint" type="submit">Preview</button>
</input></form>

Clicar em "Salvar" envia dados para /default-endpoint . Clicar em "Visualizar" envia os mesmos dados para /preview-endpoint em vez disso. O atributo HTML formaction é suportado em todos os navegadores modernos e está definido no padrão HTML vivo do WHATWG.

Isso é útil para formulários com múltiplas ações (salvar vs. publicar, salvar vs. deletar) sem precisar de JavaScript para trocar a ação do formulário dinamicamente.

O que acontece após o envio

Depois que o navegador envia a requisição para a URL de ação do formulário, a resposta do servidor determina o que o usuário vê a seguir:

• Resposta de redirecionamento (HTTP 302/303): O servidor envia o navegador para uma nova URL. Padrão comum para mostrar uma página de "obrigado".
• Resposta HTML: O servidor retorna uma página diretamente, que substitui a página atual no navegador.
• Nenhum redirecionamento configurado: Com Sendform, se você não definiu uma URL de redirecionamento, o serviço retorna sua própria página de confirmação.

Se você quer manter o usuário no seu site após o envio, configure uma URL de redirecionamento apontando para sua página de agradecimento. No Sendform, você define isso no Construtor de Snippet ou nas configurações do formulário. O navegador vai pousar na sua página em vez da tela de confirmação padrão do serviço.

Para desenvolvedores que querem lidar com envios sem um recarregamento completo da página, você pode interceptar o envio do formulário com JavaScript, enviar os dados via fetch() , e atualizar a interface você mesmo. Nesse caso, o atributo action ainda serve como um fallback útil para usuários com JavaScript desativado.

Erros comuns

• Usar GET em vez de POST para formulários de contato. Valores de campos, incluindo endereços de email, acabam em logs de servidor e histórico do navegador.
• Apontar a ação para um arquivo estático. Arquivos HTML e CSS não podem processar envios de formulário. A URL de ação precisa de um servidor ou serviço por trás dela.
• Esquecer o atributo action inteiramente. O formulário envia de volta para a página atual, o que normalmente apenas a recarrega sem efeito.
• Nomes de campos não correspondentes. Se o endpoint espera name="email" e seu input tem name="Email" , o envio falha na validação silenciosamente no lado do servidor.
• Usar uma URL relativa para um endpoint de origem cruzada. Se seu backend de formulário vive em um domínio diferente, você precisa da URL absoluta completa incluindo o protocolo.

Para usuários do Webflow especificamente, a configuração da ação do formulário tem algumas peculiaridades específicas da plataforma que valem a pena conhecer. O guia de formulário de contato do Webflow cobre como apontar um formulário do Webflow para um endpoint externo sem escrever código do lado do servidor.

Obtenha uma URL real de ação de formulário HTML em menos de um minuto

Sendform.net oferece um endpoint de formulário HTML pronto para usar que você pode colocar direto no atributo action do seu formulário. Sem backend, sem JavaScript necessário. Aponte seu formulário de site estático para seu endpoint pessoal e os envios chegam na sua caixa de entrada instantaneamente.

Criar Seu Endpoint de Formulário →