contact form using html, css and javaScript

Community feedback

• 

  

  Chamu•13,690

  @ChamuMutezvaPosted about 1 month ago

  Hi.

  HTML

  • the label element's for attribute should reference the input element that is being referenced by the label. For example the input for name has the id names - the label should then have a for attribute of names. At present the current labels are not linked to any of the input elements.
  • all the input elements and the textarea should have labels

  CSS

  • a reset stylesheet is a must in your code. That way your site is normalised across different brrowsers.
  • font sizes should not use px values as those values are not good for accessible design. Preferably use rem. The following article explains well on the issues related to px when used with font-sizes Why you shouldn't use pixels for font-size
  • using mobile first design is recommended in most cases. That is your first styles should be styles for mobile and then when necessary to add media query , do so using min-width and change only those elements and properties that needs changing.
  • apply styles using classes in most cases, id are not recommended for styling .
  • using explicit width on elements as in the example below should be avoided

  #email{
      width: 680px;
      border-radius: 15px;
      height: 50px;
      margin-top: 10px;
      padding: 20px;
      font-size: 1.2rem;
  }
  

  check how the site is displayed on mobile or any other screens that are below the explicit width 680px . There is an overflow. What you need to use usually is the min-width

  Marked as helpful

  0
• 

  Marcos Travaglini•6,210

  @BlackpachamamePosted about 1 month ago

  Hey your solution is amazing! 🤩

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
      background-color: hsl(148, 38%, 91%);
      font-family: Karla;
      font-size: 16px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  • To the label elements you must add the for attribute with the same name as the id of the input to which they refer
  • The gap: 20px property only works with display: flex or display: grid
  • You can customize the borders of your input, for example: border: 2px solid black
  • justify-content: center only works with display: flex or display: grid

  Marked as helpful

  0