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!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post