Create Your Account

Code (Heading)

					
<h2 class="formHeading">Form Heading</h2>
					
				

Code (Sub Heading)

					
<h3 class="formSubHeading" >Email and Password</h3>
					
				

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>
					
				

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>
					
				

Code

					
<p class="reqdHint">Starred(*) fields are required.</p>
					
				

					
<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>
					
				

Code

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

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>
					
				

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>
					
				

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>
					
				

Code

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

Code

					
helpers.ShowSuccessStatus("Your form has submitted successfully.");