Web projects
Build a contact form with understandable validation
By SI100x · Published
A practice contact form teaches more than placing four fields on a page. The interesting work is helping someone correct a mistake without losing what they have already typed. Use a local exercise that does not send real messages.
Try this exercise
- Give every field a visible label and say which fields are required. Start with a name, an email address and a short message; avoid collecting information you do not need.
- Test submission with empty fields, spaces only and an invalid email address. Place useful errors beside the relevant fields and retain the other entered values.
- Show a pending state during submission and separate success from failure. In the exercise, simulate a recoverable failure and let the user retry without starting over.
Check your result
A keyboard user should be able to find each field and understand the next action. A successful-looking confirmation must correspond to the operation succeeding, not merely to clicking the button.
Explore your next step
Compare course curricula or try a free live demo to ask about prerequisites and practice work.