Forms

Forms

An example of what our forms should look like.

Example

Create Your Account

Email and Password

Starred(*) fields are required.

Password Requirements:

  • Minimum 8 characters
  • Cannot be well-known commonly used password
  • Must meet 3 of the 4 following criteria:
    • At least one lowercase letter [a-z]
    • At least one uppercase letter [A-Z]
    • At least one number [0-9]
    • At least one symbol [!@#^&*()+_,.{}?~]

Contact Information

Starred(*) fields are required.

Please enter an address.
Code
Notes

Add form2018 class to form element.

To make form full width, also add fullForm class.

Include credit card images of accepted payment types on any form asking for credit card information.

Resources

Sass File(s) /sass/components/_flexform2018.scss
JS File(s) /library/forms2021.js
JS Functions Form Javascript
Locale Keys /ecommerce/forms
/secure/registration/creditcard

Accessibility

None at this time.

Form Heading & Sub Headings

Forms need a main heading and some use a sub-heading but is not required.

Example

This is a Form Heading

This is a Sub Heading

Code (Heading)
					
<h2 class="formHeading">Form Heading</h2>
Code (Sub Heading)
					
<h3 class="formSubHeading" >Email and Password</h3>
Notes

Main form heading must use the formHeading class.

formHeading class is required for error box addition into the HTML.

Subheadings must use the formSubHeading class.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Be sure to use proper heading structure for your form.

Inputs & Labels

All inputs on a form will need a label associated with them.

Example

Code
					
<div class="form-group">
	<label for="Email">Email* ([email protected])</label>
	<input id="Email" class="txtReq input-control FormAbandonmnetLog" name="Email" title="Please enter a valid email." autocomplete="email" aria-required="true" type="email" >
	<span class="errorMessage hide"></span>
</div>
Code
					
<div class="form-group">
	<label for="CardCCV">Security Code*</label>
	<div class="form-input-tip">
		<div>
			<input type="text" id="CardCCV" name="CardCCV" class="txtReq input-control FormAbandonmnetLog txtReq input-control" data-val="true" data-val-required="Please enter a valid security code." aria-required="true" autocomplete="cc-csc" inputmode="numeric" data-val-regex="Please enter a valid security code." data-val-regex-pattern="^\d{3,4}$" title="Please enter a valid security code." value="">
			<span class="errorMessage hide"></span>
		</div>
		<div class="tooltipWrapper inlineMiddle textCenter">
			<button class="tooltipTrigger alignRight btnToHyp darkestLink padding10" aria-expanded="false" aria-describedby="cvvTooltip">
				<svg class="show" height="25px" width="25px" focusable="false" role="img" aria-label="CVV Tooltip"><title>CVV Tooltip</title><use xlink:href="#svgIcon-tooltip"></use></svg>
			</button>
			<div role="tooltip" id="cvvTooltip" aria-hidden="true">
					<p>This is the 3-4 digit number on the back or front of your card.</p>
				</div>
			</div>
	</div>
</div>
Notes

Left aligned single column unless short and/or logically related.

Wrap label and input in a div with form-group class.

Labels are title case.

Labels should contain tips such as 'Carrier text messaging charges will apply.'

Span element can be left blank; JS will automatically insert the error message based on the data-val* attribute or the input element title

Must specify the correct type attribute on the input (type="email", type="tel").

Numeric inputs without number type (credit card, ccv, zip code[US only]) must have inputmode="numeric".

To log when a user leaves the form add FormAbandonmentLog class to input.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

The input id and label for attributes must match.

Keyboard users must be able to logically tab through the fields in the correct order.

Related labels/fields: wrapper div must have aria-labelledby that matches the id of the heading of the group.

Logically Related Fields

There are times when two fields should be side by side due to their relation to each other.

Example

Code
					
<div class="form-group-multi">
	<div class="form-group">
		<label class="formField-third-2 formFieldLeft" for="State">State*</label>
		<select id="State" class="FormSelect txtReq input-control FormAbandonmnetLog" title="Please select a state." name="State" autocomplete="address-level1" aria-required="true">
	 		<option value="">Select </option>
			<option value="AK">AK </option>
			<option value="AL">AL </option>
		</select>
		<span class="errorMessage hide"></span>
	</div>
	<div class="form-group">
		<label for="ZipCode">Zip Code*</label>
		<input id="ZipCode" class="txtReq input-control FormAbandonmnetLog" title="Please enter a zip code." name="ZipCode" autocomplete="postal-code" type="text" aria-required="true">
		<span class="errorMessage hide"></span>
	</div>
</div>
Notes

Examples of uses:

  • First Name & Last Name
  • State & Zip Code
  • Phone Number & Extension
  • Credit Card Number & CVV

Wrap fields within a div using form-group-multi class.

Wrap Credit Card Number and CVV fields within a div using form-group-creditcard form-group-multi classes.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

None at this time

Required Fields

When an input is required it will need special markup.

Example

Form Heading

Starred(*) fields are required.

Please enter a valid email.
Code
					
<p class="reqdHint">Starred(*) fields are required.</p>
Code
					
<div class="form-group">
	<label for="Email">Email* ([email protected])</label>
	<input id="Email" class="txtReq input-control" name="Email" title="Please enter a valid email." autocomplete="email" aria-required="true" type="email" >
	<span class="errorMessage hide"></span>
</div>
Notes

Must note at top of form that Starred(*) fields are required; Use reqdHint class.

Label must be marked with an asterisk(*).

Input must use txtReq class.

After the input is an empty span element with errorMessage hide classes.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Input must have aria-required="true"

Optional Fields

When an input is required it will need special markup.

Example

Code
					
<div class="form-group">
	<label for="Notes">Notes (optional)</label>
	<textarea id="Notes" name="Notes"> </textarea>
</div>
Notes

Label must include "(optional)" text displayed at the end.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

None at this time

Password Fields

Requirements for choosing a password must be clearly communicated.

Example

Password Requirements:

  • Minimum 8 characters
  • Cannot be well-known commonly used password
  • Must meet 3 of the 4 following criteria:
    • At least one lowercase letter [a-z]
    • At least one uppercase letter [A-Z]
    • At least one number [0-9]
    • At least one symbol [!@#^&*()+_,.{}?~]
Please enter a password.
Please confirm your password.
Code
					
<p id="passwordHints" class="textDkGray textSemiBold text14">Password Requirements:</p>
<ul class="paddingLeft15 text14 textDkGray">
	<li>Minimum 8 characters</li>
	<li>Cannot be well-known commonly used password</li>
	<li>Must meet 3 of the 4 following criteria:
		<ul>
			<li>At least one lowercase letter [a-z]</li>
			<li>At least one uppercase letter [A-Z]</li>
			<li>At least one number [0-9]</li>
			<li>At least one symbol [!@#^&*()+_,.{}?~]</li>
		</ul>
	</li>
</ul>
<div class="form-group posRelative">
	<label for="Password">Password* (6 character minimum)</label>
	<input id="Password" class="txtReq input-control FormAbandonmnetLog" name="Password" title="Password must be at least 6 characters long." autocomplete="password" aria-required="true" type="password" data-val-length-max="50" data-val-length-min="6">
	<button type="button" aria-label="Show/Hide Password" aria-pressed="false" toggle="Password" class="pointer eyeIcon field-icon toggle-password"></button>
	<span class="errorMessage hide">Please enter a password.</span>
</div>
<div class="form-group posRelative">
	<label for="ConfirmPassword">Confirm Password*</label>
	<input id="ConfirmPassword" class="txtReq input-control FormAbandonmnetLog" name="ConfirmPassword" title="Please confirm your password." autocomplete="new-password" aria-required="true" type="password" data-val-length-max="50" data-val-length-min="6">
	<button type="button" aria-label="Show/Hide Confirm Password" aria-pressed="false" toggle="ConfirmPassword" class="pointer eyeIcon field-icon toggle-password"></button>
	<span class="errorMessage hide">Please confirm your password.</span>
</div>
Notes

Toggle button must include toggle attribute, using the id of the input you want to toggle.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Password requirements must be listed before the password fields.

Toggle button must include aria-pressed="false" aria-label="Show/Hide Password".

Radio Buttons

Used when forcing a singular selection.

Example

Radio Button Options
Disabled Radio Button Options
Code
					
<fieldset class="marginBtm15">
	<legend>Radio Button Options</legend>
	<input class="rdbReq" id="yes" type="radio" name="radioExample" value="Yes">
	<label for="yes">Yes</label>
			
	<input class="rdbReq" id="no" type="radio" name="radioExample" value="No">
	<label for="no">No</label>
</fieldset>
<fieldset class="marginBtm15">
	<legend>Disabled Radio Button Options</legend>
	<input class="rdbReq" id="disabled" type="radio" name="radioExampleDisabled" value="Disabled" disabled>
	<label for="disabled">Disabled</label>
			
	<input class="rdbReq" id="checkDisabled" type="radio" name="radioExampleDisabled" value="Checked and Disabled" disabled checked>
	<label for="checkDisabled">Checked + Disabled</label>
</fieldset>
Notes

If more than 5 options, display in columns.

Add rdbReq class to input element to make required.

If the label and radio button are not lining up, wrap them in a div with disconnectedLabel class.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Group related radio buttons within fieldset, using the legend element to set the label.

Checkboxes

Allows users to select more than one option.

Example

Checkbox Options
Disabled Checkbox Options
Code
					
<fieldset class="marginBtm15">
	<legend>Checkbox Options</legend>
	<input id="one" type="checkbox" name="one">
	<label for="one">One</label>
				
	<input id="two" type="checkbox" name="two">
	<label for="two">Two</label>
				
	<input id="three" type="checkbox" name="three">
	<label for="three">Three<label>
</fieldset>
<fieldset class="marginBtm15">
	<legend>Disabled Checkbox Options</legend>
	<input id="disabledCheckBox" type="checkbox" name="disabledCheckBox" disabled>
	<label for="disabledCheckBox">Disabled</label>
				
	<input id="disabledCheckCheckBox" type="checkbox" name="disabledCheckCheckBox" checked disabled>
	<label for="disabledCheckCheckBox">Checked + Disabled</label>
</fieldset>
Notes

If more than 5 options, display in columns.

Add rdbReq class to input element to make required.

If the label and checkbox are not lining up, try wrapping them in a div with disconnectedLabel class.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Group related checkboxes within fieldset, using the legend element to set the label.

Form Buttons

This button gives users error feedback and submits the form.

Example

 
Code
					
<button id="btnExample" class="button-lg text16 bkgdBlue" type="button">Create Account</button>
Notes

Use either button or input element.

To disable the button, add disabledBtn class.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)>/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Disabled buttons MUST remain clickable and relay any errors when clicked.

Success Message

Always alert users when a form has been submitted successfully.

Example

Code
					
<p role="alert" aria-atomic="true">
	<svg class="textDarkestGray roundCorners5 bkgdGreen inlineMiddle" height="30px" width="30px" aria-hidden="true" focusable="false"><use xlink:href="#svgIcon-checkMark"></use></svg>
	<span class="inlineMiddle textSemiBold textBlue text18">Your form submitted successfully!</span>
</p>
Notes

When possible, hide the form and insert message via javascript.

Otherwise the message must be inserted after the submit button.

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js
JS FunctionsForm Javascript
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

Must have role="alert" aria-atomic="true" added to the element.

To Top