This is a solution to the Contact form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: https://www.frontendmentor.io/solutions/contact-form-using-11ty-and-valibot-2qRAL1hIOd
- Live Site URL: https://contact-form-865064.netlify.app/
- Semantic HTML5 markup with
aria-live
,aria-required
, andaria-invalid
attributes - CSS custom properties for design tokens (see base.css)
- CSS layers with
@layer
(see main.css) - A (more) modern CSS reset
- 11ty - simpler static site generator
- Valibot - open source schema library for form validation
-
display: flex
doesn't work on<fieldset>
. I tried on Google Chrome and Floorp (a fork of Firefox) and I just couldn't get it to work. Apparently the<legend>
and<fieldset>
elements is a common frustration among devs. To apply spacing, I used a.flow
utility class instead. -
CSS
color-mix()
is pretty awesome. Personally, it makes it easy to translate a design I see on Figma into code. Like, this button has a hover style that applies 50% black overlay? Okay, let's mix the primary color with 50% black. No more fumbling to get a new hex code for each state. That said, it's a new-ish CSS feature so I need to use a CSS bundler with transpilation features (like Lightning CSS) but I can see myself using this a lot more in future projects.
- A Guide To Accessible Form Validation - This is my main reference for implementing the validation logic.
- A Complete Guide To Live Validation UX - Another brilliant article focusing on live validation dos and don'ts.
- Top 10 JavaScript Data Validation Libraries - This is where I discovered Valibot while scouring for the best validation library to use.
- A guide to designing accessible, WCAG-conformant focus indicators - Thanks to Sara for releasing this modified excerpt from her paid video course. This is where I got about the "Oreo-focus" indicators which I used for this challenge.
- CSS color-mix()
- CSS and JavaScript as first-class citizens in Eleventy - This inspired me to take a "first principles" approach for this challenge. I didn't use a bundler, but instead relied on the native import features of CSS and JS (ESM modules) that work in the browser.
- Frontend Mentor - @joshjavier
- Twitter - @joshjavierr
Shout out to Grace Snow for giving practical feedback on accessibility issues and how to fix them. ๐ซถ