Forms

An interactive part of the interface that allows users to enter, edit, or configure information and save it in the system.

Design considerations

Keep the form as short as possible
Each extra field in a form impacts completion rate. Try to ask only what is required, and rethink whether optional fields are necessary.

Keep labels and additional text concise
Be as concise as possible. Eliminate extra words where possible, as long as you are being clear.

Think of your form as a conversation
Imagine the natural flow of a conversation, and let your form mimic the flow by keeping related fields together and grouping information into logical chunks.


Tips for reducing friction

  • Avoid asking for unnecessary information
  • Pre-fill values when possible
  • Use progressive disclosure (show only what’s needed at the time)

 

General principles

Grouping and section headers

  • Use section titles to organize the form logically
    Guest information / Payment details
    🚫 Form section 1
  • Add short summaries if needed to explain what a section is for

Tone and consistency

  • Write for clarity and speed — users scan forms
  • Use consistent terminology across labels, options, and buttons
    If the section is called Guest details, the button shouldn’t say Save customer info.

Field labels

  • Use clear, descriptive nouns or short phrases
    Guest name
    Payment method
    🚫 Enter your name here
  • Use sentence case with no punctuation
    Email address
    🚫 Email Address: / Email Address.
  • Avoid placeholder-only labels — always provide a visible label for accessibility.

Helper text

  • Use only when needed to clarify format, constraints, or expectations
    Include country code
    Guests won’t see this message
  • Keep helper text short — 1 line if possible
  • Don’t repeat what’s already clear from the label or placeholder

Action buttons

  • Use action-specific button labels
    Save changes / Create booking
    🚫 Submit / OK
  • For multi-step forms, use buttons that reflect the flow
    Continue / Back / Finish

Error messages

  • Be specific and helpful
    Card number must be 16 digits
    🚫 Invalid input
  • Keep tone neutral and supportive
    Please enter a valid email address
    🚫 Oops! You messed that up.
  • Place error messages close to the related field