<div>
    <label for="email">E-mail</label>
    <input
      id="email"
      name="email"
      type="email"
      placeholder="[email protected]"
      required
      autocomplete="email"
    />
  </div>

  <div>
    <label for="subject">Assunto</label>
    <input
      id="subject"
      name="subject"
      type="text"
      placeholder="Sobre o que é?"
    />
  </div>

  <div>
    <label for="message">Mensagem</label>
    <textarea
      id="message"
      name="message"
      rows="6"
      placeholder="Sua mensagem..."
      required
    ></textarea>
  </div>

  <button type="submit">Enviar Mensagem</button>
</form>

Detalhes Importantes

• Labels com for/id: Essenciais para acessibilidade, descrevendo os campos para leitores de tela e ampliando a área clicável em dispositivos móveis.
• type="email": Valida o formato do e-mail no navegador e exibe um teclado numérico em dispositivos móveis.
• required: Impede o envio do formulário com campos obrigatórios vazios.
• autocomplete: Ajuda o navegador (e gerenciadores de senha) a preencher os campos automaticamente.

Obtendo um Endpoint para o Formulário

Você precisa de uma URL para onde enviar os dados do formulário. As opções são:

• Criar seu próprio backend.
• Usar uma função serverless.
• Utilizar um serviço de backend de formulários.

Com plataformas como a Toolzz Bots, você pode obter instantaneamente um endpoint para receber os dados do seu formulário, além de notificações por e-mail e proteção contra spam.

Redirecionamento Após o Envio

Após o envio bem-sucedido, é uma boa prática redirecionar o usuário para uma página de confirmação:

html

Boas Práticas para Formulários

• Use <label> em vez de placeholder para rótulos.
• Agrupe campos relacionados com <fieldset> e <legend>.
• Não desabilite o botão de envio sem feedback visual.
• Use novalidate se estiver gerenciando a validação com JavaScript.

Protegendo Contra Spam

Formulários públicos atraem spam. Considere usar CAPTCHAs (com moderação), rate limiting, honeypots ou serviços de detecção de spam.

Testando o Formulário

Antes de publicar:

• Preencha todos os campos e envie.
• Verifique se a submissão aparece no seu painel de controle.
• Confirme se você recebeu uma notificação por e-mail.
• Teste com campos obrigatórios vazios.
• Teste com um e-mail inválido.

Em resumo, formulários HTML são apenas a interface. Um backend robusto é essencial para garantir que suas mensagens cheguem ao destino. Com a Toolzz Bots, você pode simplificar esse processo e focar no que realmente importa: seus clientes.