Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

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 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).

Ideas

  • 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?

Resources