What's the best way to highlight a Required field on a web form before submission?

  • This seems subjective, and it is; a client of mine would like me to highlight the required fields on the web forms in their application with a red asterisk, and I'm looking for an alternative since red asterisks usually mean there's an error to me.

    How do I let a user know which fields are required? (One per answer, please.)

    UPDATE: This is to indicate which fields are required before validation/postback occurs.

    @rick schott : wonderful! I'll just go ahead and close this now...

    Is it really the same question? This one seems to be about indicating required fields *before* validation.

    I say edit the question to be clear, then we can have before and after required field validation questions.

    @Patrick McElhaney @rick schott : Updated to make requirement clearer.

  • Since 95% of all fields are required at techinsurance.com, my decision was to simply use bold to indicate that a field is required and write the word (optional) next to the optional fields to reduce clutter.

    e.g.

    First Name

    Last Name

    Business Phone Number

    Mobile Number (optional)

    And perhaps just as important are the error messages themselves. I made them as obvious as possible...

    required field...

    alt text

    with error...

    alt text

    These decisions were made after years of having a website with the semi-traditional red asterisks to indicate a required field. These asterisks worked most of the time. The problem was when there was a validation error. Some of our pages can be pretty long and the red validation errors just wouldn't stand out on the page enough when it was already cluttered with red asterisks. I know this because occasionally people would get frustrated enough to call us about it. But all indications show that the new (above) design fixed the problem.

    Good! I was really against red as an indicator of requirement.

    +1 for not asking lots of optional questions, +1 for annotating the exceptions rather than the rule, and +1 for not shouting that something was optional.

    Using bold labels can also cause problems.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used