Contact Form from Frontend Mentor
The challenge
Your challenge is to build out this contact form and get it looking as close to the design as possible. Pay particular attention to making this form accessible. Building accessible forms is a key skill for front-end developers. So this is a perfect challenge to practice.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
Complete the form and see a success toast message upon successful submission
Receive form validation messages if:
A required field has been missed
The email address is not formatted correctly
Complete the form only using their keyboard
Have inputs, error messages, and the success message announced on their screen reader
View the optimal layout for the interface depending on their device's screen size
See hover and focus states for all interactive elements on the page
Tools used to build this website
- HTML, CSS, and JS
I am proficient in HTML and CSS because they are easy to learn. I used flexbox to be able to create the card and then used flex to be able to get the text and other elements in a column. I used media query to be able to make the website responsive.
Challenges I faced:
I learned how to use JS/HTML DOM elements to be able to add functionality to the website. This allowed me to be able to check if the form has any errors or doesn't match. If the user enters the correct information then a message would appear for 5s.
Top comments (0)