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
Standard international contact unselected country code
Preferred international contact pre-selected country code
International contact input valid
International contact dropdown select error
International contact phone number input error
International contact preferred radio error
International contact no selection error
PROHIBITED: International contact all inputs error
The preferred error should be suppressed if the phone number or international number is in error.
International contact disabled
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.
Input types
Care should be taken when choosing input field types for various uses, particularly with regard to number entry, as making the wrong selection could prevent users from inputting the required details into a form. For further information, see the form introduction page.
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:
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a.css" rel="stylesheet" />
<!--<![endif]-->
<!--[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
<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
<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
<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
<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
<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
<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
<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
<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.