Newsletter sign-up form with success message

Community feedback

• 

  P

  Amy Spencer•360

  @amyspencerproject

  Posted almost 2 years ago

  Hi Airus,

  Nice work!

  A few things you might want to look into. You used a form but then used a "click" for your event listener. Try using "submit" instead. This makes the form accessible for keyboard commands not just a mouse click. You would put a type=submit on the button and then have the event listener on the <form> div.

  Your error message is not the custom one in the design but the one provided by the browser. To use a custom message you would want to add a "nonvalidate" attribute to your <form> div and then you would be able to add the color changes to the input field and have a custom message pop up in UI. When you do a custom error message you should also add accessibility attributes to the <p> div. So adding role="alert" and aria-live="polite" makes your error message much better for screen readers.

  I noticed you don't use a CSS reset. It is a good idea to use one especially when you start customizing the UI. Andy Bell has a good, https://andy-bell.co.uk/a-modern-css-reset/

  Hope this helps you on your coding journey!

  11

  Marked as helpful