Contact Form

Community feedback

• 

  André Miranda•420

  @codi-Andre

  Posted 4 months ago

  It looks great, very close to the design, on mobile screens I think you use too much "white space" around the edges.

  Since you are using pure CSS, it will be better to use class name conventions like BEM for example, to avoid collision with class names, and to have better readability and maintainability or you can use CSS modules to scope the styles.

  Keep your CSS organized, may I suggest alphabetical order and group related properties together to avoid these mistakes:

  .submit-msg-box {
  
      display: block; # you set display property here
  
      position: absolute;
      background-color:  hsl(187, 24%, 22%);
      color: hsl(0, 0%, 100%);
      padding: 1rem;
      border-radius: 12px;
      transform: translate(50%);
      right: 50%;
      top: 2%;
      opacity: 1;
      visibility: visible;
  
      display: flex; # you set display property here too
  
      flex-direction: column;
      gap: 0.57rem;
  }
  

  Following what I suggested(the comments are not necessary):

  .submit-msg-box {
      # layout
  
      display: flex;
      flex-direction: column;
  
      position: absolute;
      right: 50%;
      top: 2%;
  
      transform: translate(50%);
  
      # dimensions
  
      border-radius: 12px;
      gap: 0.57rem;
      padding: 1rem;
      
      # visuals
  
      background-color:  hsl(187, 24%, 22%);
      color: hsl(0, 0%, 100%);
      
      opacity: 1;
      visibility: visible;
  
     # fonts...    
  }
  

  Do not put your clean up functions inside conditionals:

  useEffect(() => {
          setIsVisible(true);
          if (formData) {
              const timer = setTimeout(() => {
                  setIsVisible(false);
                  onClose()
              }, 5000);
              return () => clearTimeout(timer);
          }
      }, [formData, onClose]); 
  

  May I suggest this way:

  useEffect(() => {
          let timer;
          setIsVisible(true);
          if (formData) {
              timer = setTimeout(() => {
                  setIsVisible(false);
                  onClose()
              }, 5000);            
          }
  
          return () => clearTimeout(timer);
      }, [formData, onClose]); 
  

  11

  Marked as helpful