I wrote a take-home challenge for my mentee to help improve her knowledge of vanilla HTML, and thought some other junior front-end devs might enjoy it. So here's the test:

Build this working form that sends user data, using *only* HTML & CSS.

Rules:
1. No JavaScript or external images allowed - just HTML+CSS
2. Must submit user’s data to https://jsonplaceholder.typicode.com/posts 
3. Form must validate user input and prevent submission if incorrect
4. Must be fully keyboard accessible, including focus states for every field

5. Inputs should focus when you click on their label text
6. Telephone & email inputs should use the correct on-screen keyboard on mobile
7. The radio/checkbox inputs must use custom designs for their icons (not the default ones), which indicate whether they are checked

You can change the design if you want, I’ve just put together a pretty basic one but feel free to make it fancier.

Send me a link to your @CodePen, @glitch, Gist, etc when you're done!

Example form submission payload:
{
"name": "Richard Westenra",
"email": "[email protected]",
"telephone": "0987654321",
"contact": "contact-email",
"message": "Hello this is a message!",
"newsletter": "newsletter",
"id": 101
}