Skip to Content
Form EditorQuestion Parts

Question Parts

Every question in your form is made up of several components that work together to create a clear and user-friendly experience. Understanding these parts helps you design better forms and provide clear guidance to your users.

Question parts diagram with numbered annotations

1. Label

The main label is the primary text that identifies what the question is asking. This is typically displayed prominently above or to the left of the input field.

Best practices:

  • Keep labels clear and concise
  • Use action-oriented language when appropriate
  • Make labels specific enough that users understand exactly what information you need

Examples:

  • “Full Name”
  • “Email Address”
  • “What is your primary goal?”
  • “How did you hear about us?“

2. Sublabel

The sublabel appears directly below the main label and provides additional context or clarification. It’s typically smaller and in a lighter color than the main label.

Use cases:

  • Clarify what format you expect
  • Provide additional context
  • Explain why you’re asking for this information
  • Give examples of acceptable responses

Examples:

  • “We’ll use this to send you important updates”
  • “Enter your full legal name as it appears on your ID”
  • “This helps us personalize your experience”
  • “e.g., john.doe@company.com”

3. Helper Text

Helper text appears below the input field and provides tips, restrictions, or additional guidance. It’s usually the smallest text on the form and often appears in a muted color.

Common uses:

  • Character limits and restrictions
  • Format requirements
  • Privacy notices
  • Additional instructions
  • Error messages (when validation fails)

Examples:

  • “Must be at least 8 characters long”
  • “Maximum 500 characters”
  • “This information will be kept confidential”
  • “Please include your area code”

4. Tooltip Text

Tooltip text appears when users hover over a small question mark icon next to the label. It provides additional information without cluttering the main form interface.

Ideal for:

  • Detailed explanations that would make the form too long
  • Privacy policy information
  • Technical explanations
  • Examples that are helpful but not essential
  • Context that some users might need but others won’t

Examples:

  • “We use this to verify your identity and prevent fraud”
  • “Your password must contain at least one uppercase letter, one lowercase letter, and one number”
  • “This helps us route your request to the right department”
  • “Optional: This helps us provide more personalized recommendations”

5. Placeholder

The placeholder text appears inside the input field when it’s empty and disappears when the user starts typing. It provides an example of what the user should enter.

Best practices:

  • Keep placeholders short and clear
  • Use examples that are realistic but not actual data
  • Don’t put critical information only in placeholders (they disappear when users start typing)
  • Use a lighter color than the actual input text

Examples:

  • “Enter your email address”
  • “e.g., 555-123-4567”
  • “Choose your preferred contact method”
  • “Start typing to search…”

How These Parts Work Together

These five components work together to create a comprehensive question experience:

  1. Label tells users what you need
  2. Sublabel provides context and motivation
  3. Helper text gives specific guidance and restrictions
  4. Tooltip offers detailed explanations for those who need them
  5. Placeholder shows an example of what to enter

When to Use Each Part

Always include:

  • Label (every question needs a clear identifier)

Use when helpful:

  • Sublabel (when you need to explain why you’re asking or provide context)
  • Helper text (when you have restrictions, requirements, or additional guidance)
  • Placeholder (when an example would help users understand what to enter)

Use sparingly:

  • Tooltip (when you have detailed information that would clutter the form but might be helpful to some users)

Accessibility Considerations

  • Labels should be properly associated with their input fields for screen readers
  • Helper text should be announced to screen readers when validation errors occur
  • Tooltips should be keyboard accessible and announced to screen readers
  • Placeholders should not contain critical information since they disappear when users start typing

Design Tips

  • Use consistent styling across all parts
  • Ensure sufficient color contrast for all text elements
  • Keep the visual hierarchy clear (label > sublabel > helper text)
  • Use appropriate spacing between elements
  • Consider mobile responsiveness for all text elements

By understanding and effectively using these question parts, you can create forms that are clear, user-friendly, and accessible to all users.

Last updated on
Question TypesHeadless Forms