CodePen Challenge #2: Style a Signup Form

It’s time for another CodePen Challenge! This time I want you to show us what you can do to a signup form; the kind you might use with a MailChimp or Campaign Monitor mailing list. That’s all. The best examples will be showcased in a week or so!

The Challenge

We want you to make this form look amazing. It’s a form element which wraps a label, an email input and a submit button (also an input)–typical of the kind of form you’d embed on your website to collect subscribers for a mailing list. Do anything you want: change the layout, refine the typography, add animation, make it pink, as long as whatever you do happens within the realms of the CSS tab.

Over to You

Here’s what you need to do, in a few dead easy steps.

Step 1

Firstly, head on over to the demo on CodePen. This is what it looks like:

Step 2

Hit the Fork button to create your own copy of it, then make as many changes as you want to the CSS.

Step 3 (Optional)

If you’re signed into CodePen you can edit the description by hitting the Info button. Use this to give folks an idea of what you’ve done.

Step 4

Hit Save, you’re done. Be sure to let us know in the comments when you’ve finished–and feel free to let us know by tweeting us @wdtuts as well.

That’s it! All entries will be added to this collection on CodePen and the best examples will be showcased on Tuts+ in a week or so!

Good luck and don’t forget to follow Tuts+ on Codepen!