Form Design Rules of Thumb

Form Design Rules of Thumb

Effective Date: February 1, 2026   Last Updated: February 1, 2026

When building custom forms in Hibu One Smart Sites, the following UX (user experience) and design guidelines should be followed to ensure forms are easy to use, accessible, and function correctly.

General Options (Most Field Types)

  • Required Fields:
  • If left blank, a red box will appear around the field.
  • No automatic indicator (e.g., asterisk) is added — builders should manually add “*” or text like “(required)” in the Field Label or Placeholder.
  • Start New Line:
  • Use this option to force a field to display on its own line.
  • Field Size:
  • Adjust width to improve layout and responsiveness.

Specific Field Considerations

  • Radio Buttons & Checkboxes:
  • Images can be added to display as option choices.
  • Images will not appear in the email submission.
  • The selected label will still appear in the email (even if hidden on the site).
  • Time Field:
  • The “Use 24-hour clock” toggle only affects how submissions display.
  • The time picker shown to visitors depends on their browser settings.
  • File Attachment Field:
  • File name must not include spaces.
  • File size limit: 10MB.
  • Only one file per attachment field (add multiple File Attachment Fields if needed).
  • Supported formats:
  • Documents: .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .xml, .odt, .ott
  • Images: .png, .jpg, .jpeg, .gif, .svg
  • Fonts: .ttf, .otf, .woff, .eot
  • Code: .js, .css
  • Other: .zip, .rar, .psd, .mp3, plus all video formats
  • Files are not added to the Media Manager.
  • Phone Number Field:
  • Validation checks for proper formatting.
  • Valid characters: numbers, spaces, +, -, and periods.
  • At least one number must be present.

reCAPTCHA

  • Added by default to all forms to protect against spam and speed up the submission process.
  • The reCAPTCHA icon appears in the bottom-left corner only when a visitor interacts with the form (clicks into a field).
  • The icon disappears after submission or page refresh.
  • reCAPTCHA cannot be disabled.


Best Practices for Form Design

To maximize usability and conversion rates, follow these guidelines when building forms:

  • Keep it short: Fewer fields = more submissions. Only ask for information that’s necessary at the first touch.
  • Group related fields together: Improves readability and makes forms feel less overwhelming.
  • Avoid unnecessary long-text fields: Use sparingly; these fields slow users down and reduce completion rates.
  • Label clearly: Use plain, descriptive field labels (e.g., “Phone Number” instead of “Best contact method”).
  • Use required fields strategically: Mark only essential fields as required to reduce friction.
  • Prioritize mobile experience: Review all forms on mobile devices to ensure spacing, field size, and button placement work well.

< Older Post

 Newer Post >