Responsive contact form with HTML, CSS, and JS

Community feedback

• 

  Jean Gabriel Rodrigues•330

  @theJRodrigues

  Posted 5 months ago

  Um bom código man, parabéns, só teria algumas coisas que eu mudaria no html e css.

  HTML

  1- Inputs dentro das labels: Para um bom link entre a label e o input, podemos utilizar o input já dentro da label, isso faz com que ao clicar em cima do texto da label, ele selecione o input, vou dar um exemplo no seu código.

  Seu código:

  <div class="nomes-flex__item">
     <label for="sobreNome">Last Name <span class="prefixo">*</span></label>
     <input type="text" id="sobreNome" name="ultimoNome" maxlength="15" required>
     <span class="atencao-sobreNome-vazio">This field is required</span>
  </div>
  

  Melhor:

  <label>
   <h2>Titulo da label</h2> 
   <input type="text" name="ultimoNome" maxlength="15" required>
   <span class="">This field is required</span>
  </label>
  

  Quando você utiliza o input dentro da label, não é necessário utilizar o atributo "for" nem o "id" no input para que o link funcione.

  2- Fieldset: O fieldset serve para agrupar elementos realcionados em um formulário. Como no caso dos inputs de first name e last name, onde você pode utilizar um fieldset para eles dois e depois um fieldset para o input de e-mail, conforme o código a seguir:

  <fieldset>
   <label >
  	<h2>First Name *</h2>
  	<input type="text" name="primeiroNome" maxlength="15" required>
  	<span class="atencao-nome-vazio">This field is required</span>
   </label>
  
   <label >
  	<h2>Last Name *</h2>
  	<input type="text" name="ultimoNome" maxlength="15" required>
      <span class="atencao-sobreNome-vazio">This field is required</span>
   </label>
  </fieldset>
  

  Teria mais algumas coisas para falar, mas acredito que esses são os principais pontos da parte de HTML.

  CSS

  Para o css, seria bom em pensar uma maneira de diminuir a complexidade da escrita do css, fazer em ordem, conforme no html.

  Um bom ponto também seria dar nomes as classes e inglês e ao invés de estilizar os inputs utilizando input[type=...] criar uma classe, e incluir dentro do HTML, pois ao bater o olho no HTML da pra ver que ele possuí um estilo, não sendo necessário procurar em outro arquivo.

  Um exemplo bom seria esse:

  Seu código:

  input[name=primeiroNome],
  input[name=ultimoNome],
  input[name=email] {
  ...
  }
  

  Melhor:

  .inputText{
  ...}
  

  E incluir essa classe nos inputs necessário

  Vi que você utilizou e-mails para os radio button e checkbox por conta das cores. Nesse caso não é necessário, basta apenas estilizar com accent-color: 'cor'

  Não consegui olhar seu script, portanto não conseguirei opinar. Enfim, sempre desenvolva pensando se uma pessoa leiga iria entender o seu código, não precisa ser o mais rápido, pois as vezes você pode ser rápido para escrever, mas irá perder todo o tempo que ganhou, tentando dar manutenção no código.

  Espero ter ajudado! Tmjj!

  00

  Marked as helpful
• 

  P

  Shaimaa01•200

  @Shaimaa01

  Posted 5 months ago

  use formik with yep https://formik.org/docs/tutorial#schema-validation-with-yup

  00

  Marked as helpful