Forms

Forms

Thank you, for reaching out to us!

We've sent an email to your inbox to confirm you'd like to receive communications from us.

*Required Fields

Radio Group

Checkbox Group

<div class="form-wrap"><!--.form-wrap gets dynamically inserted when using Cascade DO NOT COPY-->
<div class="au-form"><!--.au-form gets dynamically inserted when using Cascade DO NOT COPY-->
<form id="" class="au-form zero-top" name="anyname">
<div id="thank-you">
<div class="msg success">
<span class="fa fa-check-circle" aria-hidden="true">&nbsp;</span>
<!--Set the aria-level on the heading depending on your HTML structure. If your last heading was an <h2> you would use aria-level="3"-->
<strong role="heading" aria-level="3">Thank you, for reaching out to us!</strong>
<p>We've sent an email to your inbox to confirm you'd like to receive communications from us.</p>
</div>
</div>
<input name="source" type="hidden" value="www.athabascau.ca/discover/" />
<input name="verified" type="hidden" value="" />
<div class="req-msg">*Required Fields</div>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<input id="fname" class="required" autocomplete="off" name="fname" type="text" aria-required="true" />
<label for="fname">
<span class="req-asterisk" aria-hidden="true">* </span>Your First Name
</label>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<input id="lname" class="required" autocomplete="off" name="lname" type="text" aria-required="true" />
<label for="lname">
<span class="req-asterisk" aria-hidden="true">* </span>Your Last Name
</label>
</div>
</div>
</div>
<div class="input-group">
<label id="form-select" class="screenreader" for="form-select">Select</label>
<select id="form-select">
<option disabled="disabled" selected="selected">Choose Option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
</div>
<div class="input-group multi">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select id="exampleFormControlSelect2" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<input id="email" autocomplete="off" name="email" type="email" />
<label for="email">
<span class="req-asterisk" aria-hidden="true">* </span>Your Email Address
</label>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<label class="screenreader" for="date">Example date</label>
<input id="date" type="date" />
</div>
</div>
</div>
<div class="input-group">
<textarea id="textarea" name="textarea"></textarea>
<label for="textarea">
<span class="req-asterisk" aria-hidden="true">* </span>Insert Comments Here
</label>
</div>
<div class="radio-group">
<p id="radio-header-id" class="group-title">
<span class="req-asterisk" aria-hidden="true">* </span>Radio Group
</p>
<!--Play close attention in including role="radiogroup" and aria-labelledby for accessibilty. Aria-labelledby uses the paragraph above to identify the group. Each group must have a unique id-->
<div class="radio-group-inner" role="radiogroup" aria-labelledby="radio-header-id">
<div class="radio" role="radio">
<input id="radio1" tabindex="0" name="radio" required="" type="radio" aria-checked="false" data-msg="Please make a selection" />
<label for="radio1"> Radio 1 </label>
</div>
<div class="radio" role="radio">
<input id="radio2" tabindex="0" name="radio" type="radio" aria-checked="false" />
<label for="radio2"> Radio 2 </label>
</div>
<div class="radio" role="radio">
<input id="radio3" tabindex="0" name="radio" type="radio" aria-checked="false" />
<label for="radio3"> Radio 3 </label>
</div>
</div>
</div>
<div class="checkbox-group">
<p class="group-title">
<span class="req-asterisk" aria-hidden="true">* </span>Checkbox Group
</p>
<div class="radio-group-inner">
<div class="checkbox" role="group">
<input id="checkbox1" tabindex="0" name="checkbox1" type="checkbox" value="" aria-checked="false" />
<label for="checkbox1"> Checkbox 1 </label>
</div>
<div class="checkbox" role="group">
<input id="checkbox2" tabindex="0" name="checkbox2" type="checkbox" value="" aria-checked="false" />
<label for="checkbox2"> Checkbox 2 </label>
</div>
<div class="checkbox" role="group">
<input id="checkbox3" tabindex="0" name="checkbox3" type="checkbox" value="" aria-checked="false" />
<label for="checkbox3"> Checkbox 3 </label>
</div>
</div>
</div>
<!--Display validation errors-->
<div id="form-error" class="msg error" role="alert" aria-live="assertive">
<span class="fa fa-exclamation-triangle" aria-hidden="true">&#160;</span>
<!--Set the aria-level on the heading depending on your HTML structure. If your last heading was an <h2> you would use aria-level="3"-->
<strong role="heading" aria-level="3">Please correct the following errors and try again:</strong>
</div>
<div class="submit">
<button id="submit" class="btn btn-lg btn-full btn-primary" name="submit" type="submit" value="Submit">Submit</button>
</div>
</form>
</div>
</div>
view raw forms.html hosted with ❤ by GitHub
 

Fieldsets

Personal Information
Go Back
Continue
<form id="fieldset-demo" class="au-form" method="post" novalidate="novalidate">
<fieldset>
<legend>Personal Information</legend>
<div class="input-group">
<input id="fullname" name="fullname" class="text" maxlength="255" size="40" value="" required="" data-msg="Please enter your name" aria-required="true">
<label for="nominator">Full Name*</label>
</div>
<div class="input-group">
<input id="address" name="address" class="text" value="" type="text">
<label for="address">Address</label>
</div>
<div class="input-group">
<input id="city" name="city" class="text" value="" type="text">
<label for="city">City</label>
</div>
<div class="input-group">
<input id="province" name="province" class="text" value="" type="text">
<label for="province">Province</label>
</div>
<div class="input-group">
<input id="postal" name="Postal" class="text" maxlength="15" value="" type="text">
<label for="postal">Postal Code</label>
</div>
<div class="input-group">
<input id="day-phone" name="day-phone" type="text" class="text" size="35" value="">
<label for="day-phone"> Phone (daytime)</label>
</div>
<div class="input-group">
<input id="evening-phone" name="evening-phone" type="text" class="text" size="35" value="">
<label for="evening-phone"> Phone (evening/weekend)</label>
</div>
<div class="input-group">
<input id="email" name="email" type="email" class="text" maxlength="255" value="" required="" data-msg="Please enter your email" aria-required="true">
<label for="email">Email* </label>
</div>
<div class="row">
<div class="col-xs-6 d-flex col-sm-6 align-self-center" >
<a class="btn btn-md btn-secondary" href="#">Go Back</a>
</div>
<div class="col-sm-6 d-flex align-self-center justify-content-end">
<a class="btn btn-md btn-primary" href="#">Continue</a>
</div>
</div>
</fieldset>
</form>
view raw fieldset-demo.html hosted with ❤ by GitHub

Updated August 12, 2024 by Digital & Web Operations (web_services@athabascau.ca)