- Taxonomic name: M-INTERNATIONAL-CONTACT
- Extension: FORMS-EXTENDED-A
- Added on: v3.3.0 (27/04/18)
- Updated on: v5.5.0 (23/03/21)
International contact
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.
Design and usage
Structure
- Form label, dropdown and 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 and 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" - Aria-invalid must be used to indicate when an error has occurred with this element
- Aria-describedby must be used to link any help, instructional and/or error text with the element/form fields
Use case
- For capturing phone numbers with an international dialling code
Interactive examples
Standard international contact pre-selected country code
Interactive example
Code example
<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
Interactive example
Code example
<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
See Preferred contact for more details
Interactive example
Code example
<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
Interactive example
Code example
<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="...">
<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>International contact dropdown select error
Interactive example
Code example
<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="form-row__error-message" id="..."><span class="u-hidden--visually">Error: </span>Please select an international dialing code</p>
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="..." aria-invalid="true" aria-describedby="...">
<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>International contact phone number input error
Interactive example
Code example
<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" id="..."><span class="u-hidden--visually">Error: </span>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="...">
<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" aria-describedby="int5-error" />
</div>
</div>
</fieldset>International contact preferred radio error
Interactive example
Code example
<fieldset aria-describedby="..." aria-invalid="true">
<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" id="...">
<div class="m-card-content">
<div class="m-card-content__inner">
<p>Please select a preferred number for us to contact you on.</p>
</div>
</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="...">
<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="..." />
</div>
</div>
</fieldset>International contact no selection error
Interactive example
Code example
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
Interactive example
Code example
<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>Code examples
Development and test
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.
Aria usage for errors and help text
To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.
All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby. This ensures that the help text is read out immediately on focus of the form input/fieldset. When there is more that one item that requires referencing within the aria-describedby attribute the id values must be supplied in the form of a space separated list. For example if there is an error with id of 'err1' and help text with id of 'help1' the value for the aria-describedby attribute would be 'err1 help1'.
All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.
All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true" set on them, ensuring that when a user focus' on an errored form field, the field will be announced as invalid, so the user is then aware that there in an issue that requires fixing.
When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.
- Single form field - All attributes should be applied directly to that form field
- Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
- Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)
There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.
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 an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/forms_extended_a.css" rel="stylesheet" />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.
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.
Component releases
- Added on: v3.3.0 (27/04/18)
- Updated on: v5.5.0 (23/03/21)
Latest update:
- updated: Additional aria attributes are now recommended to be applied across all form fields/rows so as to aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occurred.