Name and address forms

Name and address fields commonly appear together and often accompany other form patterns in single or multi-step forms.

Best practices

Name inputs

  • When a name is required, remember to only ask for what’s absolutely necessary. Sometimes data requirements necessitate asking for ‘First name’ and ‘Last name’ as separate values. Where this isn’t the case, always use a combined name field (‘Full name’). This approach is culturally inclusive and makes forms usable for everyone, regardless of culture.
  • In cases where additional name data is mandatory (middle name, former last name etc.), be sure to include helper text that explains why this data is needed.
  • Name fields should always be grouped together and are typically the first inputs in a larger form.

Addresses

  • Wherever possible, integrate with a location service that enables autocompletion as a user begins entering their street address. For example; if most addresses are expected to be in Manitoba, have country and province fields preselected with the option to change.
  • Avoid using a large dropdown menu for country selection in favour of a text input with autocomplete.
  • Avoid dropdowns for selecting street type (St., Ave, Dr. etc) in favour of one text input field for street data.
  • Ensure postal code fields match the length of the expected input. Wherever possible, consider auto-completing the postal code field based on the address entered.

Do: Ensure field length matches data length

Don't: Use fields that are too long for the expected data

Example

Submit your application

We will mail your application response to the address provided below. Your phone number and email address will be kept on file in case we need to contact you while reviewing your application.

Contact information
000-000-0000
Mailing address
Enter additional address information such as unit, apartment, suite # or building name.
Attach your application

Upload your completed application. Make sure all pages are included and all applicable fields are filled.

Files must be no larger than 10MB. Accepted file types are .pdf or .docx. 


<h3>Submit your application</h3>
<p class="mt-3 mb-4">We will mail your application response to the address provided below. Your phone number and email address will be kept on file in case we need to contact you while reviewing your application.</p>
<form>
  <div >
    <fieldset>
      <legend>Contact information</legend>
      <div class="form-row">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="name">Full name</label>
            <input id="name" class="form-control">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input id="email" type="email" class="form-control">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="col-6 col-sm-3">
          <div class="form-group">
            <label for="phonenumber">Phone number</label>
            <input id="phonenumber" type="tel" class="form-control">
            <small id="passwordHelpBlock" class="form-text text-muted">
              000-000-0000
            </small>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <fieldset>
    <legend>Mailing address</legend>
    <div class="form-row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="address">Address</label>
          <input id="address" class="form-control">
        </div>
        <div class="form-group">
          <label for="address2">Address 2 (optional)</label>
          <input id="address2" aria-describedby="address2HelpBlock" class="form-control">
          <small id="address2HelpBlock" class="form-text text-muted">
          Enter additional address information such as unit, apartment, suite # or building name.
          </small>
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-sm-5">
        <div class="form-group">
          <label for="city">City</label>
          <input id="city" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="province">Province or territory</label>
          <select id="province" class="custom-select">
            <option>Select province or territory</option>
            <option value="1">Alberta</option>
            <option value="2">British Columbia</option>
            <option selected value="3">Manitoba</option>
            <option value="4">New Brunswick</option>
            <option value="5">Newfoundland and Labrador</option>
            <option value="6">Northwest Territories</option>
            <option value="7">Nova Scotia</option>
            <option value="8">Nunavut</option>
            <option value="9">Ontario</option>
            <option value="10">Prince Edward Island</option>
            <option value="11">Quebec</option>
            <option value="12">Saskatchewan</option>
            <option value="13">Yukon</option>
          </select>
        </div>
      </div>
      <div class="col-sm-3 col-6">
        <div class="form-group">
          <label for="code">Postal code</label>
          <input id="code" class="form-control">
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>Attach your application</legend>
    <p>Upload your completed application. Make sure all pages are included and all applicable fields are filled.</p>
    <div class="form-group">
      <div class="form-group">
        <label for="exampleFormControlFile1">Attach your application</label>
        <input type="file" class="form-control-file" id="exampleFormControlFile1">
        <small class="form-text text-muted">
        Files must be no larger than 10MB. Accepted file types are .pdf or .docx.
        </small>
      </div>
    </div>
  </fieldset>
  <input disabled class="btn btn-primary" type="submit" value="Apply now">
</form>