Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Panel
titleTable of Contents

Table of Contents

General Formatting

...

  • Use a minimum 10pt font such as Arial or Times New Roman.

  • Keep the form concise and only include fields that are needed.

  • Add a "message" to create larger headings or additional information.

  • Test forms and form actions thoroughly before publishing.

  • Use labels (displayed field names) that are complete and self-explanatory.

  • Using a CAPTCHA may help to reduce spam.

  • Use high contrast colors for foreground and background areas.

Required

...

Fields

...

  • Required fields will be indicated to the customer by a red

    asterick

    asterisk to the right of the field name.

  • It is common for customers to miss these small

    astericks

    asterisks and be unable to Submit the form.

Recommendations

...

  • At the top of the form, include a message such as "* = required field" in a large font.

  • Add the phrase "(required)" in the label.

  • Add a note at the bottom of the form near the Submit button such as "If the Submit button is unavailable, please check that all required fields were completed."

Formatted

...

Fields

...

  • Fields such as email addresses and phone numbers can be set for specific formats.

  • If the format is not followed, the customer will receive an error message.

Recommendations

...

  • Add the format to the label such as "Phone Number (NNN-NNN-NNNN format)" to help the customer get the correct format the first time.

  • Add a "help message" to clarify.

Grouping

...

Information

...

  • Use sections to group "like" information such as contact information.

  • This organizes the information for the customer and for you.

Special formatting

...

  • Custom formatting can be created for fields such as SU ID numbers.

Recommendations

...

  • Any time custom formatting is used, always put an example of the format in the label.

  • Test these formats extensively to make sure that they function correctly.

  • Add a "help message" to clarify.