Logotipo Design Interativo

Formulário responsivo com validação, máscara e calendário em HTML5


Quero deixar  uma pequena contribuição para os desenvolvedores front-end que  precisam criar os formulários, seja para contato, cadastro entre outras funcionalidades e sempre perde um bom tempo criando os inputs, inserindo JQuery com máscaras e validações de campos.

Neste formulário totalmente preparado para facilitar sua vida, ele já possui os códigos para se adaptar a todas as resoluções, possuí validação via JQuery muito fácil de personalizar, máscara para campos de telefone, CEP, CPF, data entre outros usando o JQuery maskedinput e também se for necessário o famoso calendário Datapicker.

O layout é bem clean para que não interfira no seu site, e com uma fácil customização de cores, dentre outras necessidades que possam aparecer, código em HTML 5 com inputs, textarea, checkbox, select e radio button formatados, basta apagar o que você não irá usar.

Este formulário é apenas front-end não possuindo script de envio, é apenas um “Bootstrap” de formulário para agilizar seu desenvolvimento.

Fique a vontade para fazer o download.

Demo

Link para download

Comentários
  1. Fernandes disse:

    Como faço ele fica responsivo? Vi que é normal. Obrigado.

  2. Fernando de Alice disse:

    Formulário perfeito, mas não consigo fazer o action para uma página php – Alguém poderia me ajudar?

    • wellington disse:

      Copia o conteúdo do style para o arquivo form.css Importa este estilo e aplica no form completo, depois a cada campo.
      Perfeito aqui, era exatamente o que eu procurava, valeu! Muito obrigado mesmo designinterativo. Essa forma evita que se mexa no style.css, bom não mexer no que está quieto e funcionando.

  3. jota corrêa disse:

    Olá gostei do seu trabalho.
    Vou recomendar pra outros colegas.

  4. Edinaldo disse:

    Ficou muito bom. Há bastante tempo procuro uma máscara de telefone, em que, se colocado o 9º dígito, a máscara fica 99999-9999. Parabéns pelo trabalho, e, obrigado.

  5. kleber brito disse:

    Meus parabéns!!!!!!!

  6. Fagner disse:

    Muito bom!!! parabéns pelo trabalho

  7. gostei fiz algumas mudanças e ficou legal no meu site

  8. Marcio Sousa disse:

    Olá Boa tarde tudo bem?

    Eu gostaria de uma ajuda para desenvolver os script de envio para este fomulário. poderiam me ajudar?

  9. Guilherme Reis disse:

    Muito obrigado Robson! Muito bom e direto este seu exemplo.

  10. ANDERSON disse:

    Cara, muito bom seu código, pelo menos nos testes que usei aqui funcionou de boa obrigado por compartilhar!

  11. Luiz disse:

    Muito boa a sua contribuição. Estava procurando algo para aprofundar meus estudos. Simples e direto.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade