alirezahi / form-guideline

A guideline to have a better UX in forms

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Form Guidelines

General Rules

  • Mark required vs. optional form fields

    • place an asterisk next to your required fields.
    • write “optional” in your placeholder.
    • you can use both of the above upper options based on the form situation.
  • Errors near their fields

    • add errors near the field which has it.
  • A Single-Column Layout

    • Avoid placing questions side-by-side..
  • Example in Placeholders

    • type and example in placeholders instead of repeating the field name.
  • Colors for Validation Messages

    • Use red color for error messages and green for success messages.
  • Navigable through Tab

    • Check that it would be able to navigate through form fields using Tab
  • Multi-Step forms

About

A guideline to have a better UX in forms