Você está em boa companhia com suporte incrível 🤝

Formulário de contato semântico

Formulário de contato com campos obrigatórios, labels associados e atributos de acessibilidade.

Time Full Services Time Full Services
HTML
<form action="/contato" method="post" novalidate>
  <fieldset>
    <legend>Fale conosco</legend>

    <div class="campo">
      <label for="nome">Nome completo <span aria-hidden="true">*</span></label>
      <input
        type="text" id="nome" name="nome"
        autocomplete="name"
        required aria-required="true"
        placeholder="João Silva"
      >
    </div>

    <div class="campo">
      <label for="email">E-mail <span aria-hidden="true">*</span></label>
      <input
        type="email" id="email" name="email"
        autocomplete="email"
        required aria-required="true"
        placeholder="joao@exemplo.com"
      >
    </div>

    <div class="campo">
      <label for="assunto">Assunto</label>
      <select id="assunto" name="assunto">
        <option value="">Selecione...</option>
        <option value="suporte">Suporte</option>
        <option value="comercial">Comercial</option>
        <option value="outro">Outro</option>
      </select>
    </div>

    <div class="campo">
      <label for="mensagem">Mensagem <span aria-hidden="true">*</span></label>
      <textarea
        id="mensagem" name="mensagem"
        rows="5" required aria-required="true"
        placeholder="Escreva sua mensagem..."
      ></textarea>
    </div>

    <button type="submit" class="btn btn--primario">Enviar mensagem</button>
  </fieldset>
</form>

Seja PRO.

Tenha acesso a snippets de código premium — PHP, JavaScript, CSS e HTML prontos para usar em seus projetos.

Conhecer o plano Pro →