---
title: "Three free form styles"
author: Steve McKinney
date: 2015-11-03T07:34:00+00:00
lastmod: 2016-08-28T10:49:47+00:00
categories: ["Design"]
url: https://iamsteve.me/blog/three-free-form-styles
---

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

<CodePen slug="LpjoLx" title="Dimensional form style" height={480} themeId="13022" />

## Style two

<CodePen slug="EVoeaX" title="Flat form style" height={480} themeId="13022" />

## Style three

<CodePen slug="xwpmpj" title="Bulky form style" height={480} themeId="13022" />

## Usage

Each element requires the `.input-base` class. This applies a reset, that [I have wrote about previously](https://iamsteve.me/blog/how-to-consistently-style-form-elements).

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

### Checkbox

These require the `.input-checkbox` class.

### Radio

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](https://iamsteve.me/contact) or [tweet](https://twitter.com/irsteve).