fem-contact-form-svelte Svelte Themes

Fem Contact Form Svelte

Frontend Mentor - Contact form

This is a solution to Contact form on 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

Built with

Top categories

Loading Svelte Themes