Ex. 6: Construa o formulário com estilização a seu critério. index.html / form1.css

Obs.: Todos os campos requeridos (exceto o campo com textarea e complemento), foco ao clicar nas entradas de dados, background no fieldset e border-radios.

Cadastro do Candidato

Informações Pessoais (fieldset)

Nome

Data de Nascimento

Idade

Sexo Biológico (com lista suspensa: Masculino; Feminino; Não especificado; Ignorado)

CPF (com placeholder 000.000.000-00)

Estado Civil (com lista suspensa: Solteiro; Casado; Viúvo; Divorciado)

Informações de Contato (fieldset)

Rua, nº

Complemento

Bairro

CEP (com placeholder 00000-000)

Uf (com lista suspensa:  SP;AC;AL;AM;AP;BA;CE;DF;ES;GO;MA;MG;MS;MT;PA;PB;PE;PI;PR;RJ;RN;RO;RR;RS;SC;SE;TO)

Celular (com placeholder 00-00000-0000)

E-mail

Comentários (textarea)

Botão: Enviar e Limpar centralizado

Tutorial Formspree

1. Criar Conta

• Acesse: https://formspree.io/

• Se for a primeira vez, clique em Começar.

• Preencha o cadastro com:

  • Nome

  • E-mail

  • Senha
    
    

• Marque a opção: Compreendo e concordo com os termos de uso e a política de privacidade.

• (Opcional) marque Por favor, envie-me atualizações ocasionais de notícias do Formspree.

• Clique em Registrar.

• Observação: confirme o e-mail recebido da plataforma para validar a conta.

2. Criar Formulário

• No menu lateral esquerdo, clique em Criar um novo formulário.

• Dê um nome para ele (exemplo: Cadastro).
  
  

3. Copiar e Usar o Código

• Após criar, copie a URL gerada pelo Formspree.
  
  

Exemplo:  https://formspree.io/f/abc123xyz

• No seu HTML, cole a URL no atributo action da tag <form>.
  
  

<form action="https://formspree.io/f/abc123xyz" method="POST">

  <!-- seus campos de formulário -->

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

</form>

Máscaras - Bibliotecas - jquery 

Para funcionar o plugin, é necessário inserir a url do jquery no elemento script

1 - Digitar no google jquery – ou https://jquery.com/

- Clicar em downloak jquary 

- Acionar o link Download the compressed production jQuery 3.x.x

2 – Copiar a url e colar no script antes do </body>

Exemplo:

<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>

3 – Digitar no google jquery mask plugin (para pegar a biblioteca)

4 – Clicar no link On github - rolar a página, ir até CDNJS – acionar link abaixo do título - copiar link e colar no script.

Exemplo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>

5 - Retornar a página, ir em DOC – copiar as máscaras e colar dentro do script. Usar classe ou id.

 No input <input type="text" id="cpf" name="cpf" placeholder="000.000.000-00">

No <script>

  $('#cpf').mask('000.000.000-00', {reverse: true});

Ou $(‘.cpf').mask('000.000.000-00', {reverse: false});

</script>