International contact

Taxonomic name: M-INTERNATIONAL-CONTACT

Extension: FORMS-EXTENDED-A

v.4.0.0 - Updated 20/07/18. Archives

Molecule

International contact allows the user to select an international country code, enter a contact number in a text field and also select a preferred contact number. None of these elements are mandatory but they can be combined. Body copy can also be placed under the label of the text field.

Structure

  • Form label, dropdown & text field for the phone number
  • Use the telephone input type to invoke the numeric keyboard on touch devices that support it
  • Dropdown uses the operating systems native dropdown UI

    • International code dropdown

  • By default, the code that matches the websites market should be pre-selected and placed at the top of the dropdown list
    • Optional variant: The dropdown can be left unselected if required
  • The dropdown list can be ordered as a project needs, but we recommend ordering alphabetically (A-Z) after the prioritised country

Labels

  • Form label can be whatever label a project requires
  • Hidden descriptive form labels need to be applied to form field that inform users of screen readers what to do with each form field (see accessibility & screen readers)
  • International contact phone number input error message should be altered to make it relevant for individual forms.

Errors

  • Standard framework form field error messages displayed above the form field in error.
  • NB: A project should consider only displaying one message if both form fields are in error
  • If using in combination with preferred contact radio buttons - Only the textbox or dropdown have an inline error messages, standard framework form field error messages displayed above the form field in error.

Accessibility

  • The phone number textbox atom is combined here without a visible label. It must include a hidden label to define what the field is for. For example,
  • Form label: "Home"
    Country dropdown "Select the country and dialling code for your home number"
    Text field: "Enter your home phone number"

Use case

  • For capturing phone numbers with an international dialling code

Examples

Standard international contact pre-selected country code

International telephone number

Standard international contact unselected country code

International telephone number

Preferred international contact pre-selected country code

Preferred international contact pre-selected country code

International contact input valid

International telephone number

Country code chosen

A UK telephone number

International contact dropdown select error

International telephone number

Please select an international dialing code

International contact phone number input error

International telephone number

Please enter a full <UK> phone number, e.g. <01715 552 255>

International contact preferred radio error

Preferred international telephone number

Please select a preferred number for us to contact you on.

International contact no selection error

International telephone number

Please select your phone numbers international dialing code and enter a phone number.

PROHIBITED: International contact all inputs error

The preferred error should be suppressed if the phone number or international number is in error.

Preferred international telephone number

Please add a preferred contact number

International contact disabled

International telephone number

Notes for developers

The dropdown select can only be combined with text inputs or text inputs using combined radio buttons, see Preferred contact for more details. It can’t be paired with other form field types

An extra class of m-form-row--multiple-input is required within the m-form-row to meet the current design spacing.

Example:


<div class="m-form-row m-form-row--multiple-input">
	...
</div>

The second input label must be visually hidden using class u-hidden--visually to inform users of screen readers what to do with each form field.

Example:


<label class="a-label u-hidden--visually" for="...">...</label>

When disabling the dropdown do not solely rely on the is-disabled class, ensure that the disabled attribute is set on the select field.

If the native form validation needs to be disabled set the novalidate attribute on the form.

Important messages

To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".

Using autocomplete

Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.

Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.

Further details can be found in the developer notes on the form introduction page.

Extension component

This component forms part of the 'forms-extended-a' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:

<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a.css" rel="stylesheet" />
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a-unmq.css" rel="stylesheet" />
<![endif]-->

Notes for testers

  • In some older browsers such as IE8, when options within the dropdown list exceed the width of the dropdown, the overflowing text is truncated; check that the options would still be understandable if this occurs.
  • Not all the input types are understood by all browsers so they fall back to being a standard text input. This means that they may allow the entry of invalid characters, any invalid entries should be highlighted when the form is submitted like any other errors.
  • Ensure that all form fields have a correctly associated label. This not only provides context to each field for assistive technology users but also a larger clickable area to select the field. Clicking/pressing on a label for a single input field should cause the input to gain focus.
  • Users should be able to copy and paste if necessary.
  • If the field has been restricted in length the maximum number of characters allowed must also be restricted. Note: many browsers will not do this for number field and older browser will not do this at all.

Code Examples

Standard international contact pre-selected country code

International telephone number 

<fieldset>
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input">
		<label class="..." for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="...">
					<option selected>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox" type="tel" name="..." id="..." />
		</div>
	</div>
</fieldset>

Standard international contact unselected country code

International telephone number 

<fieldset>
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input">
		<label class="..." for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="...">
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox" type="tel" name="..." id="..." />
		</div>
	</div>
</fieldset>

Preferred international contact pre-selected country code

See Preferred contact for more details

Preferred international contact pre-selected country code 

<fieldset class="m-preferred-contact">
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input">
		<label class="a-label" for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="...">
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<div class="m-preferred-contact-item">
				<div class="m-preferred-contact-item__textbox">
					<input class="a-textbox" type="tel" name="..." id="..." />
				</div>
				<div class="m-preferred-contact-item__radio">
					<label class="a-radio" for="...">
						<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
						<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
						<span class="a-radio__ui"></span>
					</label>
				</div>
			</div>
		</div>
	</div>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input">
		<label class="a-label" for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="...">
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<div class="m-preferred-contact-item">
				<div class="m-preferred-contact-item__textbox">
					<input class="a-textbox" type="tel" name="..." id="..." />
				</div>
				<div class="m-preferred-contact-item__radio">
					<label class="a-radio" for="...">
						<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
						<span class="a-radio__label"><span class="a-radio__label-inner">...<span class="u-hidden--visually">...</span></span></span>
						<span class="a-radio__ui"></span>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>

International contact input valid

International telephone number

Country code chosen

A UK telephone number


<fieldset>
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input is-valid">
		<label class="..." for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="..." aria-invalid="false" >
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox" type="tel" name="..." id="..." aria-invalid="false" />
		</div>
	</div>
</fieldset>

International contact dropdown select error

International telephone number

Please select an international dialing code


<fieldset>
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input is-error">
		<label class="..." for="...">...</label>
		<div class="m-form-row__content">
			<p class="m-form-row__error-message">Please select an international dialing code</p>
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="..." aria-invalid="true">
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox" type="tel" name="..." id="..." aria-invalid="false" />
		</div>
	</div>
</fieldset>

International contact phone number input error

International telephone number

Please enter a full UK phone number, eg. 01715 552 255


<fieldset>
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input is-error">
		<label class="..." for="...">...</label>
		<p class="m-form-row__error-message">Please enter a full > UK <  phone number, e.g. >01715 552 255<</p>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="..." aria-invalid="false">
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox is-error" type="tel" name="..." id="..." aria-invalid="true" />
		</div>
	</div>
</fieldset>

International contact no selection error

International telephone number

Please select a preferred number for us to contact you on.

<fieldset>
<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input is-error">
		<div class="m-card m-card-notification m-card-notification--warning" role="status">
			<div class="m-card-content">
				<p>Please select a preferred number for us to contact you on.</p>
			</div>
		</div>
		<label class="..." for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select is-error" name="..." id="..." aria-invalid="true">
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox is-error" type="tel" name="..." id="..." aria-invalid="true" />
		</div>
	</div>
</fieldset>

International contact disabled

International telephone number 

<fieldset>
	<legend class="u-hidden--visually">...</legend>
	<div class="m-form-row [ Modifier ] m-form-row--multiple-input is-disabled">
		<label class="..." for="...">...</label>
		<div class="m-form-row__content">
			<span class="a-dropdown">
				<select class="a-dropdown__select" name="..." id="..." disabled>
					<option>...</option>
					<option>...</option>
					<option>...</option>
				</select>
				<span class="a-dropdown__ui"></span>
			</span>
		</div>
		<label class="a-label u-hidden--visually" for="...">...</label>
		<div class="m-form-row__content">
			<input class="a-textbox" type="tel" name="..." id="..." disabled />
		</div>
	</div>
</fieldset>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.m-form-row--multiple-input Needed for design spacing of elements Yes .m-form-row  
.u-hidden--visually To visually hide the second form elements label Yes .a-label It is essential to only visually hide the label to inform users of screen readers what to do with each form field
.is-error To add an error state to form without needing a error message directly above the form element Yes .a-textbox, .a-dropdown__select  

Keyboard operations

TAB

Tabbing to an group of radio should make the radio option clearly visually different so that the focus point on the page is obvious to the user.

SPACE

With focus on the radio option, pressing SPACE will select/de-select the radio option.

CURSOR KEYS

With focus on the radio option, pressing any CURSOR KEY will move the focus to the next/previous option within the radio option group.