Contact form using tailwind and react

Community feedback

• 

  P

  Carl•1,135

  @CarlHummPosted 4 days ago

  Hey there

  I may be wrong but it looks like the img element is sitting above the hidden input so the event listener isn't getting fired other than via the linked label. When you change the z-index in the browser dev tools you can click both the checkbox and label.

  Update: Contain input fields inside a form and use single onChange

  Just some extra advice. The consent checkbox, submit button and input fields in most situations should be contained within a <form> element and inside the <main>. As you have already wrote some great logic to decipher each input type in handleChange, you can nest the input fields and buttons within a form element and place a single eventListener on the form element itself, like <form onChange={handleChange}> this should work fine due to eventBubbling and the use of target instead of currentTarget.

  Good luck on implementing the fix, and on your future projects

  Marked as helpful

  1

  ---

  

  P

  Suraj Khatri•380

  @SurajCaseyPosted 4 days ago

  @CarlHumm Thanks I will try to fix it.

  1
• 

  Czipa Szilárd•80

  @CleshyPosted 4 days ago

  Hi! 👋

  May I ask why the img element is necessary within the Checkbox? Is it part of the task description, or did you try to solve something this way?

  I haven't started this project yet, but I’m happy to help if I can. 💓

  1

  ---

  

  P

  Suraj Khatri•380

  @SurajCaseyPosted 4 days ago

  @Cleshy It is part of task description.

  0