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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

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, and aria-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. 🫶