Viewed: 4139

Three free form styles

Design in one minute

This is one of the first things; I’ve worked on aside from what’s posts, to give away. It’s quite difficult to figure out what to design to give away, without just adding to the masses of things out there already. I’ve decided to code up some form styles. So you should be able to grab their styles and apply them right away to your forms. There are three variations.

Style one

See the Pen Dimensional form style by Steve (@stevemckinney) on CodePen.

Style two

See the Pen Flat form style by Steve (@stevemckinney) on CodePen.

Style three

See the Pen Bulky form style by Steve (@stevemckinney) on CodePen.


Each element requires the .input-base class. This applies a reset, that I have wrote about previously.

Text fields (text, email, textarea, etc)

These require the .input-text class. The only difference between these is I’ve applied a min-height to the textarea.

Select field

These require the .input-select class.


These require the .input-checkbox class.


These require the .input-radio class.

Submit button

These require the .button class.

If you have any trouble using them, or any suggestions for what would help you, feel free to contact me or tweet.

If you found this article useful or it’s saved you time, I would be grateful for your support.

Next to read

How to consistently style form elements

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.