There are two kinds of designers in the world. The kind that likes styling forms, and the kind that doesn’t. Just kidding there a millions of kinds of designers, that just felt cool to say.
Forms can be challenging though! There is a good amount of state to consider (think hover, focus, required, invalid, etc). There is cross-browser stuff to test. There is responsive design to finagle. And the most important: UX. If your form is important to your site (it is), you gotta get it right. Let’s practice! Or at least have some fun.
Create a great web form! Here’s a Pen you can start with, or feel free to play with forms however you want to.
July’s Challenge Sponsor: HelloSign
Everything IT requires and developers love. The HelloSign API allows you to collect legally binding signatures from your own app. Learn more at HelloSign.com.
How to Participate
Create a Pen and tag it
codepenchallenge and the weekly tag: cpc-forms. We’ll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
- Make the simplest, cleanest, most obvious, most user-friendly dang form this world has ever seen.
- Make the weirdest, wackiest, boldest, most unusual and surprising dang form this world has ever seen.
- Take a crack at UX by helping the user fill out the form in new ways. Can you pull info from a social media auth? Can you offer to generate a secure password? Can you use machine learning for something? Can you incentivize the user through fun and games?
- CodePen has loads of form examples for inspiration, like the official Collection, tag, and search.
- Jonathan Harrell has a good article on styling forms with modern tech and, unsurprisingly, MDN has a weath of information.
- Check out Boilerform, a project for cleanly structured HTML and BEM-based CSS to start forms with. And here’s an interesting walkthrough of styling a form using the atomic CSS framework Tailwind.