5 quick tips to instantly make better web forms


I know what you’re thinking: “It’s a form. How hard can it be?” But there is some things you can do to be sure you don’t loose out on business inqueries and the best part about it is, that most of them are easy to implement and you don’t have to mess with it, more than once. So it’s worth doing, now lets do it.

Use the placeholder attribute on your input fields

This will put a placeholder text in the input field which will be removed as the user types in the fields. You can style these using css. The example below will make placeholder text appear light gray and italic.

<input type=”email” name=”email” placeholder=”john@doe.com”>
::-webkit-input-placeholder { color: #999; font-style:italic;}
input:-moz-placeholder { color: #999; font-style:italic; }

Use :infocus css values

This will highlight the input field that is in focus to show which input field the user is currently filling in. This is just one of those little things which help complete a form design. Sample code below:

textarea:focus, input[type=”text”]:focus, input[type=”password”]:focus{
border-color: rgba(158, 236, 82, 0.8); outline: 0; outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(158, 236, 82, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(158, 236, 82, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(158, 236, 82, 0.6);}

Use labels with the for attribute to make them clickable

This is especially great for checkboxes and radio buttons which are, by nature, small and annoying hard to hit for the wandering minds of internet users. See the example html below:

<label for=”accept”>Accept tems</label>
<input type=”checkbox” name=”terms” id=”accept” value=”Accept” />

Remember to use input type=”tel” and  type=”email”

This will help mobile surfers, get the correct touch keyboard from the start. This will help out those poor smartphone users navigate your form with ease.

Indicate required fields clearly

Or even better remove fields that are not required. Why are you even asking for them? The more you ask for the more people will dropout half way, so ask for the absolute minimum required. This can sometimes be different in an ecommerce situation, where people might be willing to give you their cellphone number, so they can get notified of delivery. But it’s a good rule of thumb to keep things short and simple.

That’s all, now go take a look at your forms 🙂