Vanilla JS form



Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
View Challenge

Design Comparison




Accessibility Issues


HTML Issues

View Report

Éric Férole’s questions for the community

Im slowly improving. Any feedback would be much appreciated.

Community Feedback

Grace 18,400



Hi this is a great start. The solution looks and functions close to the design, just a few important principles to learn still

  • don’t have any text in divs or spans alone when you could use a meaningful element. That “try it free…” text should be a paragraph, or maybe even a heading element
  • inputs always need labelling. That’s essential, even if it’s not visible on the design. Read up on adding accessible visually hidden labels
  • the autocomplete value is incorrect on first name
  • the inputs and error messages need linking together for screenreaders. You do that with aria-describedby on the input pointing to the unique ID of that inputs error element
  • the error elements also need an aria live attribute so they get announced as soon as they appear

In the js a small enhancement could be to move focus to the first input with an error. That’s quite a common task we get when building forms

I hope this was helpful. Good luck





Thank you for taking the time to review my code. I found this about the input labeling. Very interesting I'll take your advises ! Much appreciated.


Give some feedback to @Eric-Ferole about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!