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.

Your Challenge

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

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?