Como criar um formulário HTML: Guia completo para iniciantes

Introdução

Formulários são elementos essenciais em qualquer site moderno. Seja para captar leads, fazer login ou coletar feedback, saber como criar um formulário em HTML é uma habilidade fundamental para desenvolvedores web. Neste guia completo, você aprenderá desde os conceitos básicos até as melhores práticas para criar formulários profissionais e funcionais.

O que é um formulário HTML?

Um formulário HTML é uma estrutura que permite aos usuários enviar dados para um servidor. Ele é composto por vários elementos, como campos de texto, botões e caixas de seleção. Vamos explorar os principais campos que você pode incluir em seu formulário.

Por que formulários são importantes?

• Captação de leads qualificados

• Interação com usuários

• Coleta de dados importantes

• Ferramenta essencial para marketing digital

  
  

Estrutura básica de um formulário HTML

Vamos começar criando a estrutura básica de um formulário HTML:

<form action="#" method="POST">
  <label for="name">Digite seu nome</label>
  <input type="text" id="name" name="name" placeholder="Nome" required>

  <label for="email">Digite seu e-mail</label>
  <input type="email" id="email" name="email" placeholder="Email" required>

  <label for="tel">Digite seu telefone</label>
  <input type="tel" id="tel" name="phone" placeholder="Telefone">

  <label for="company">Digite sua empresa</label>
  <input type="text" id="company" name="company" placeholder="Empresa">

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

  <input type="submit" value="Enviar">
</form>

Atributos importantes do form:

• action: Define para onde os dados serão enviados

• method: Especifica o método HTTP (geralmente POST para formulários)

• enctype: Necessário quando o formulário inclui upload de arquivos

  
  

Boas práticas ao criar formulários

1. Use rótulos (labels): Sempre associe rótulos aos campos usando o atributo for, isso melhora a acessibilidade.

2. Validação de campos: Utilize atributos como required para garantir que os campos obrigatórios sejam preenchidos.

3. Placeholder informativo: Use placeholders para dar dicas sobre o que deve ser inserido em cada campo.

4. Feedback visual: Considere adicionar estilos CSS para indicar se os campos foram preenchidos corretamente.

Principais campos de formulário

1. Campo de Nome

htmlCopy<div class="form-group">
    <label for="nome">Nome completo:</label>
    <input type="text" id="nome" name="nome" required
           minlength="2" maxlength="100"
           placeholder="Digite seu nome completo">
</div>

2. Campo de Email

htmlCopy<div class="form-group">
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required
           placeholder="seu@email.com"
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
</div>

3. Campo de Telefone

htmlCopy<div class="form-group">
    <label for="telefone">Telefone:</label>
    <input type="tel" id="telefone" name="telefone"
           placeholder="(00) 00000-0000"
           pattern="\([0-9]{2}\) [0-9]{5}-[0-9]{4}">
</div>

4. Campo de Empresa

htmlCopy<div class="form-group">
    <label for="empresa">Empresa:</label>
    <input type="text" id="empresa" name="empresa"
           placeholder="Nome da sua empresa">
</div>

5. Campo de Mensagem

htmlCopy<div class="form-group">
    <label for="mensagem">Sua mensagem:</label>
    <textarea id="mensagem" name="mensagem"
              rows="4" maxlength="500"
              placeholder="Digite sua mensagem aqui"></textarea>
</div>

Validação de cada campo

A validação é crucial para garantir que os dados recebidos sejam válidos e seguros. Aqui estão algumas dicas sobre como validar cada campo:

• Nome: Utilize o atributo required e limite o número de caracteres se necessário.

<input type="text" id="name" name="name" placeholder="Nome" required minlength="2">

• E-mail: O campo deve ser do tipo email, que já possui validação embutida no navegador.

<input type="email" id="email" name="email" placeholder="Email" required>

• Telefone: Use o tipo tel e considere adicionar uma máscara de entrada para facilitar a digitação.

<input type="tel" id="tel" name="phone" placeholder="Telefone">

• Mensagem: O campo textarea deve ser obrigatório se você deseja coletar feedback.

<textarea id="message" name="message" placeholder="Sua mensagem aqui..." required></textarea>

Ficou com dúvidas? Leia a documentação oficial da MDN:

https://developer.mozilla.org/pt-BR/docs/Learn/Forms/Your_first_form

Integrando seu formulário ao backend com Hubform

Se não possui uma conta Grátis na Hubform Crie agora!

Acesse sua conta e crie seu primeiro formulário. Após isso copie o URL de Formulário Hubform.

A URL deve ser semelhante a essa:

https://app.hubform.com.br/f/SsMq8LlhAdwaLTkEy

1. Altere o atributo action do seu formulário para o seu endpoint do Hubform:

<form action="https://app.hubform.com.br/f/id-do-formulario-hubform" method="POST">

2. Dê um atributo name a cada input do formulário:

<input type="email" name="email">

Essa etapa é super importante para que a Hubform identifique os envios corretamente.

3. Pronto! Seu formulário está pronto para uso! Experimente o código abaixo para enviar algumas submissões de teste:

   
   

   <form action="https://app.hubform.com.br/f/id-do-formulario-hubform" method="POST">
     <label for="name">Digite seu nome</label>
     <input type="text" id="name" name="name" placeholder="Nome">
   
     <label for="email">Digite seu e-mail</label>
     <input type="email" id="email" name="email" placeholder="Email">
   
     <label for="tel">Digite seu telefone</label>
     <input type="tel" id="tel" name="phone" placeholder="Telefone">
   
     <input type="submit" value="Enviar">
   </form>

Conclusão

Criar formulários HTML eficientes e profissionais requer atenção aos detalhes e boas práticas. Com este guia, você aprendeu desde os conceitos básicos até a integração com um serviço de backend. Lembre-se sempre de priorizar a experiência do usuário e a acessibilidade ao criar seus formulários.

Agora que você já sabe como criar um formulário HTML completo, que tal começar seu próximo projeto? Conecte seu formulário ao Hubform e comece a receber leads de forma profissional e automatizada!

Tags: formulário html, como criar um formulário, conecte seu formulário, backend para formulário, receba leads, desenvolvimento web, html forms, captação de leads