Post

Four free challenges that take your form skills from basic validation to a full multi-step flow, in order:

1. Newsletter sign-up form with success message A single input, with validation and a success state. Practice semantic HTML, basic client-side validation, and DOM manipulation. www.frontendmentor.io/challenges/...

frontendmentor.ioBuild a Newsletter Signup Form | Form Validation ProjectBuild a newsletter form with validation and success state. Practice form validation and DOM manipulation with Figma designs included.

23/9/26, 9:03 am0 reposts0 likes

Frontend Mentor

@frontendmentor.io

23 Sept

2. Intro component with sign-up form Multiple input fields. Show errors when a field is empty or the email is badly formatted. www.frontendmentor.io/challenges/...

frontendmentor.ioBuild an Intro Component with Signup Form | Form ValidationBuild an intro section with signup form and client-side validation. Practice form validation with professional Figma designs included.

Frontend Mentor

@frontendmentor.io

23 Sept

3. Contact form Different input types, all with client-side validation, and a success toast message. www.frontendmentor.io/challenges/...

frontendmentor.ioBuild an Accessible Contact Form | Frontend ProjectBuild an accessible contact form with validation and screen reader support. Practice building accessible forms with Figma designs included.

Frontend Mentor

@frontendmentor.io

23 Sept

4. Multi-step form Users move between steps, go back to change their selections, and see a summary, with validation on every step. www.frontendmentor.io/challenges/...

frontendmentor.ioBuild a Multi-Step Form | JavaScript Form ProjectBuild a multi-step form with validation and order summary. Practice complex form handling and state management with Figma designs included.