Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Ask users for Names

Overview

Use the names pattern to ask users for their name.

Open this example in a new tab (Example Name Single Input Field)

Example Name Single Input Field contents

Nunjucks

{% from "components/input/_macro.njk" import onsInput %}
{% from "components/question/_macro.njk" import onsQuestion %}

{% block main %}
    {%
        call onsQuestion({
            "title": "What is your name?",
            "legendIsQuestionTitle": true,
            "submitButton": true
        })
    %}
        <form action="#0">
            {{
                onsInput({
                    "id": "fullname-example-input",
                    "type": "full-name",
                    "autocomplete": "full-name",
                    "label": {
                        "text": "Full name"
                    }
                })
            }}
        </form>
    {% endcall %}
{% endblock %}

HTML

<div class="ons-question ons-u-mb-xl">
  <div class="ons-question__answer ons-u-mb-l">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">What is your name?</h1>
      </legend>
      <form action="#0">
        <div class="ons-field">
          <label class="ons-label" for="fullname-example-input">Full name</label>
          <input type="full-name" id="fullname-example-input" class="ons-input ons-input--text ons-input-type__input"
            autocomplete="full-name" />
        </div>
      </form>
    </fieldset>
  </div>
</div>
<button type="submit" class="ons-btn">
  <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span></span>
</button>

When not to use this pattern

Do not ask for a user’s name if it is not essential to your service.

How to use this pattern

This pattern uses the input component.

If you are using one input field, you should use the label: “Full name”.

Make sure that the input field is long enough for users to enter their full name. You can make sure of this by using population data or any data available about your existing users.

It should be clear to the user whether they need to enter their legal name or common name.

Do not ask for the user’s title unless it is essential. This will reveal their gender and marital status, which they may not want to share.

If you are storing a user’s name, there should be a mechanism for them to change it if needed.

Do not use spellcheck on name fields. If you are using the spellcheck attribute, set this to "false".

Multiple input fields

Important information:

You should use a single input field where possible as some names do not fit the “first name”, “last name” format.

Open this example in a new tab (Example Name Multiple Input Field)

Example Name Multiple Input Field contents

Nunjucks

{% from "components/input/_macro.njk" import onsInput %}
{% from "components/question/_macro.njk" import onsQuestion %}

{% block main %}
    {%
        call onsQuestion({
            "title": "What is your name?",
            "legendIsQuestionTitle": true,
            "submitButton": true
        })
    %}
        <form action="#0">
            {{
                onsInput({
                    "id": "first-name",
                    "name": "first-name",
                    "label": {
                        "text": "First name"
                    }
                })
            }}
            {{
                onsInput({
                    "id": "middle-names",
                    "type": "middle-names",
                    "label": {
                        "text": "Middle names"
                    }
                })
            }}
            {{
                onsInput({
                    "id": "last-name",
                    "name": "last-name",
                    "label": {
                        "text": "Last name"
                    }
                })
            }}
        </form>
    {% endcall %}
{% endblock %}

HTML

<div class="ons-question ons-u-mb-xl">
  <div class="ons-question__answer ons-u-mb-l">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">What is your name?</h1>
      </legend>
      <form action="#0">
        <div class="ons-field">
          <label class="ons-label" for="first-name">First name</label>
          <input type="text" id="first-name" class="ons-input ons-input--text ons-input-type__input"
            name="first-name" />
        </div>
        <div class="ons-field">
          <label class="ons-label" for="middle-names">Middle names</label>
          <input type="middle-names" id="middle-names" class="ons-input ons-input--text ons-input-type__input" />
        </div>
        <div class="ons-field">
          <label class="ons-label" for="last-name">Last name</label>
          <input type="text" id="last-name" class="ons-input ons-input--text ons-input-type__input" name="last-name" />
        </div>
      </form>
    </fieldset>
  </div>
</div>
<button type="submit" class="ons-btn">
  <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span></span>
</button>

If you need to use multiple name fields:

  • for downstream data processing reasons
  • so that users can be linked using last names
  • so that you can pipe in the first name later on in a service

You should use the labels: “First name”, “Middle names” and “Last name”.

Do not include “(optional)” after “Middle names”, users will skip this field if they do not have a middle name.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab) 

Back to top