When designing your form fields, it’s always a good idea to let users know exactly which form field they’re filling out. It’s a form of instantaneous feedback that saves the user precious seconds and avoids a fair bit of confusion.

The active field should be highlighted in a color that sets it apart from the background and the surrounding fields. Most form fields usually have gray or black borders. To make yours stand out, use blue, orange, or whatever color fits your brand’s palette to define the borders of an active field.

You should be careful to avoid using red or green, however. Save red for form fields with erroneous data— say for example an incorrect credit card number. You should save green to highlight fields that have been properly filled.

These practices are not only good for usability but are just plain elegant. Gray for unfilled form fields, green for correctly filled form fields, red for incorrectly filled fields, and blue or another color of your choice for active form fields.

Other form design best practices

  1. Enable autofill
  2. Have as few form fields as possible— usually no more than five. Filling out a form with 20 fields feels like work. You can start with simple things like merging name fields. You don’t need a “First Name” and a “Last Name” field. Merge them into a single “Name” field. If you can’t cut your form field’s down to five for whatever reason, split the form into two or more parts.
  3. Add inline validation to your forms – This is a simple but powerful addition. You don’t want your users filling out an entire form and then being told that their email address is incorrect. Inline validation helps users catch simple mistakes like a missing “@” when typing their email address.
  4. Introduce input masks – Take a credit card number for example. It’s sixteen digits long but it’s written on the card in groups of four: 1234-5678-9101… You should apply this same format when a user types the number. You shouldn’t merge it into 123456789101… The four-number grouping makes the number easier to read which makes checking for mistakes easy as well. Checking typing mistakes in a single continuously long number can be hard and needlessly frustrating. Input masks are a great way to reduce input mistakes when typing in card numbers or phone numbers.