This document is intended for Web Developers. This document will be continually updated over time. The examples shown are using Hugo, Parsley.js, Tachyons, Netlify, and Netlify’s Victor-Hugo boilerplate.

Creating effective forms (Complete Guide)

Simplicity: Don’t bloat the form. Keep it as minimal as possible. Don’t ask for information you don’t need. Allow for flexibility in the responses.

Motivation: Remember that forms are literally work for your users. They need some sort of incentive to push them to fill out the form. Keep the form as short as possible. If you need it, don’t ask for it.

Layout: Keep the layout of your form components consistent. I prefer to making my forms as vertical as possible, so there’s no chance getting lost moving your eyes left to right.

Interaction: When users interact with the form, give them feedback. Show them that they’re doing the right thing, show them how much progress they’re making.

Styling: Consistency is key.

Consider your input types: The input should be a vehicle to handle the information. Consider what type of input will make sense to the user.

Labels, Placeholders, & Icons: Be sure to clearly differentiate between optional & required fields.

Pre-fill data whenever possible: When asking what state they live in, give them a drop-down menu to choose from, etc. Use proper markup to conform to autofill programs, screen readers, etc.

Errors & Validation: Display useful error messages, in the right location. Use color and perhaps a slight movement, or scroll, to indicate where the issue occurred. Make sure your description of the error is descriptive: Don’t use a one-size-fits-all message like “Please give a valid answer.” Explain the issue that occurred, and offer a solution. Validate before submitting with JS whenever possible.

Submission:

Mobile Optimizations: Enter as tab, screen real estate

Form Principles

Inputs:

• Inputs without a name attribute will not be submitted.

Labels:

• To link a label with an input, the label’s for attribute must be equal to the input’s id attribute.

Accessibility Concerns

Labels:

• Without the for attribute, screen readers may not know which input a label is describing.