Belmond - Forms Restructure Toolkit Container

Input

Input (not validated)

Input (validated with default form error)

Input (validated with bespoke error)

Select

Select (not validated)

Select (validated with default form error)

Select (validated with bespoke error)

Select (not validated)

Select (validated with default form error)

Select (validated with bespoke error)

Textarea

Textarea (not validated)

Textarea (validated with default form error)

Textarea (validated with bespoke error)

Radio

Standard (not validated)

01 radio one

01 radio two

01 radio three

Validated (validated with default form error)

02 radio one

02 radio two

02 radio three

Validated (validated with bespoke error)

03 radio one

03 radio two

03 radio three

Checkbox

Standard (not validated)

Check one

Check two

Validated (validated with default form error)

Check three

Check four

Validated (validated with bespoke error)

Check five

Check six

Nested checkboxes

Standard (not validated)

Check one

Check two

Validated (validated with default form error)

Check one

Check three

Check four

Validated (validated with bespoke error)

Check one

Check five

Check six

Linked elements

Standard (not validated)

Shows additional field

Hides/ignores additional field

Additional info

Validated (validated with default form error)

Shows additional field

Hides/ignores additional field

Additional info

Validated (validated with bespoke error)

Shows additional field

Hides/ignores additional field

Additional info

Confirmation / matching fields

Email

Confirm email

Password

Confirm password

Password with strength check

Password Password strength:

Confirm password

Data / text

Data

Confirm data

Calendar - future dates only

Standard (not validated)

Check-in 01

Validated (validated with default form error)

Check-in 02

Validated (validated with bespoke error)

Check-in 03

Calendar - past dates only

Standard (not validated)

Check-in 04

Validated (validated with default form error)

Check-in 05

Validated (validated with bespoke error)

Check-in 06

Calendar - all dates

Standard (not validated)

Check-in 07

Validated (validated with default form error)

Check-in 08

Validated (validated with bespoke error)

Check-in 09

International Phone Numbers

Telephone*

Mobile*

Phone (non-mandatory)

Autocomplete - see autocomplete="" value attribute on each form element (all validated with bespoke error)

Name (autocomplete="name")

First Name (autocomplete="given-name")

Middle Name (autocomplete="additional-name")

Last Name (autocomplete="family-name")

Email (autocomplete="email")

Address single line (autocomplete="street-address")

Address Line 1 - Shipping (autocomplete="shipping address-line1")

Address Line 1 - Billing (autocomplete="billing address-line1")

Address Line 2 (autocomplete="address-line2")

Address State/Province (autocomplete="address-level1")

Address City (autocomplete="address-level2")

Address Postcode (autocomplete="postal-code")

Address Country (autocomplete="country")

Telephone (autocomplete="tel")

Credit Card - Name on card (autocomplete="cc-name")

Credit Card - CC Number (autocomplete="cc-number")

Credit Card - CVC (autocomplete="cc-csc")

Credit Card - Expiry (format = MM-YYYY) (autocomplete="cc-exp")

Hidden Input. NOTE: in this case, <form id="uniqueId01"> - that's important when it comes to the >input id=""> attr

Hidden Input for non-user-entered form data

INSPECT ME!

CODE: <input type="hidden" id="uniqueId01-input-hidden" name="inputHidden" value="form data value">

Hidden Input for Newsletter Preference

INSPECT ME!

CODE: <input type="hidden" id="uniqueId01-preferenceType" name="preferenceType" value="NWL">

IMPORTANT: when using the hidden input for newsletter "preferenceType", the <FORM> 'action' attribute determines which preference is being added:
eg: action="/crm/signup-newsletter-submit/VSO", where VSO is the productId being added as a preference