Ask users for... Names

Open this "Names" example in a new window
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="full-name">
    Full name
  </label>
  <input class="govuk-input" id="full-name" name="full-name" type="text">
</div>
Nunjucks
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Full name"
  },
  id: "full-name",
  name: "full-name"
}) }}

When to use this pattern

You should follow this pattern whenever you need to ask for a user’s name as part of your service. Only ask for people’s names if you need that information to deliver a service.

How it works

Make it as easy as possible for a user to enter their name.

Open this "Names" example in a new window
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="full-name">
    Full name
  </label>
  <input class="govuk-input" id="full-name" name="full-name" type="text">
</div>
Nunjucks
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Full name"
  },
  id: "full-name",
  name: "full-name"
}) }}

Make sure the fields work for most of your users

Fields must be long enough to accommodate the names of your users. You should use population data or data about your existing users to do this.

Support all the characters users may need to enter, including numbers and symbols.

Single or multiple name fields

Use single or multiple fields depending on your user’s needs. Not everyone’s name fits the first-name, last-name format. Using multiple name fields mean there’s more risk that a person’s name won’t fit the format you’ve chosen and that it is entered incorrectly.

A single name field can accommodate the broadest range of name types, but means you can’t reliably extract parts of a name.

Labelling name fields

Label single name fields ‘Full name’.

For multiple name fields, use:

  • ‘First name’
  • ‘Last name’

If users aren’t from the UK, use the labels:

  • ‘Given names’
  • ‘Family name’

Make middle names optional.

Make it clear whether you need someone’s common name or their full legal name.

Avoid asking for a person’s title

Avoid asking users for their title.

It’s extra work for them and you’re asking them to potentially reveal their gender and marital status, which they may not want to do.

It’s also hard to predict the range of titles your users will have. If you have to ask for someone’s title, use an optional text input not a select.

Remember to correctly use people’s names in any resulting correspondence.

Research on this pattern

If you’ve used this pattern, get in touch to share your user research findings.

You can also read these articles to learn more about asking for users’ names:

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Names’ on GitHub