Responsive Contact Form using HTML, CSS, & JavaScript

Community feedback

• 

  Marzia Jalili•9,390

  @MarziaJalili

  Posted 6 months ago

  Awesome work, buddy!

  Some areas you can amend:

  • First, the message box somehow resizes the page. If you want to get rid of it you can use the position property.

  Since it positioned according to the page, you don't need to set the position: relative; on any other element for relative positioning. Just have to use absolute positioning on the box itself.

  This is how you set the property:

  .message-box {
    position: absolute;
    top: 5%;
    left: 50%; /* to center it */
    z-index: 10; /* to make it appear on the top of the form */
  }
  

  • Second, when the user tries again to provide valid data, the error states are still there. It would be better if you got rid of them using the onChange on the inputs for a more user friendly layout.

  This is how you can set the event listener for it:

  input.addEventListener('input', function() {
      console.log("error state removed!")
      // some conditions to remove the error states 
      // according to your code
  });
  

  This will log "error state removed!" to the console every time the user types into the email field. And, by having those condition, it will remove the error states, too.

  Overall, the solution is flawless!

  Keep up on building master pieces like this one!

  😎😎😎

  00

  Marked as helpful
• 

  Marzia Jalili•9,390

  @MarziaJalili

  Posted 4 months ago

  A tiny suggestion:

  I am kinda planning to create a study group on Google Chats let me know if you're interensted to be added there. Let's beat Elon Musk together.

  😂😂😂

  02
• 

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 5 months ago

  This comment was deleted 5 months ago

  01