---
{
	"title": "Feedback form",
	"language": "en",
	"category": "Other",
	"description": "Allows users to submit feedback for a specific Web page or Web site.",
	"tag": "feedback",
	"parentdir": "feedback",
	"altLangPrefix": "feedback",
	"css": ["demo/feedback"],
	"js": ["demo/feedback"],
	"dateModified": "2015-03-06"
}
---
<div class="wb-frmvld wb-fdbck nojs-hide">
	<p>If you have difficulty with the following form, you can use any of our <a href="#osc-avs">other service channels</a> to contact us.</p>
	<form action="#" method="get" id="fdbck-frm">
		<input type="hidden" name="language" value="en" />
		<div id="type">
			<div class="form-group">
				<label for="fbrsn" class="required"><span class="field-name">Reason for contacting us</span> <strong class="required">(required)</strong></label>
				<select class="form-control" name="fbrsn" id="fbrsn" required="required">
					<option value="">Select a reason</option>
					<option value="web">Critical problem with the website</option>
					<option value="improvement">Suggested improvement for the website</option>
					<option value="subject1">Question/comment about subject 1</option>
					<option value="subject2">Question/comment about subject 2</option>
					<option value="subject3">Question/comment about subject 3</option>
					<option value="other">Other</option>
				</select>
			</div>
			<div class="form-group">
				<label for="fbsbj"><span class="field-name">Subject</span></label>
				<input class="form-control" type="text" id="fbsbj" name="fbsbj" size="45" maxlength="60" />
			</div>
			<div class="form-group">
				<label for="fbmsg" class="required"><span class="field-name">Message</span> <strong class="required">(required)</strong></label>
				<textarea class="form-control" id="fbmsg" name="fbmsg" rows="5" cols="45" required="required"></textarea>
			</div>
		</div>

		<section id="fbweb">
			<h2>Website issues</h2>
			<a class="wb-show-onfocus" href="#fbcntc">Skip to Contact Information</a>
			<div class="form-group">
				<label for="fbpg"><span class="field-name">What page address (URL) or page description?</span></label>
				<input class="form-control" type="text" id="fbpg" name="fbpg" size="80" maxlength="400" />
			</div>
			<div class="form-group">
				<label for="fbprb">What were you trying to do when you encountered the problem?</label>
				<textarea class="form-control" id="fbprb" name="fbprb" rows="5" cols="45"></textarea>
			</div>
			<fieldset>
				<legend>What were the problems?</legend>
				<div class="checkbox">
					<label for="fbq1"><input class="problems" type="checkbox" name="problems[]" id="fbq1" value="small font that can't be adjusted" /> small font that can't be adjusted</label>
				</div>
				<div class="checkbox">
					<label for="fbq2"><input class="problems" type="checkbox" name="problems[]" id="fbq2" value="poor colour contrast" /> poor colour contrast</label>
				</div>
				<div class="checkbox">
					<label for="fbq3"><input class="problems" type="checkbox" name="problems[]" id="fbq3" value="unclear information, typos or poor grammar" /> unclear information, typos or poor grammar</label>
				</div>
				<div class="checkbox">
					<label for="fbq4"><input class="problems" type="checkbox" name="problems[]" id="fbq4" value="acronym or jargon not explained" /> acronym or jargon not explained</label>
				</div>
				<div class="checkbox">
					<label for="fbq5"><input class="problems" type="checkbox" name="problems[]" id="fbq5" value="confusing search results" /> confusing search results</label>
				</div>
				<div class="checkbox">
					<label for="fbq6"><input class="problems" type="checkbox" name="problems[]" id="fbq6" value="poor keyboard navigation" /> poor keyboard navigation</label>
				</div>
				<div class="checkbox">
					<label for="fbq7"><input class="problems" type="checkbox" name="problems[]" id="fbq7" value="some elements are too small to click on" /> some elements are too small to click on</label>
				</div>
				<div class="checkbox">
					<label for="fbq8"><input class="problems" type="checkbox" name="problems[]" id="fbq8" value="images with no text alternative provided" /> images with no text alternative provided</label>
				</div>
				<div class="checkbox">
					<label for="fbq9"><input class="problems" type="checkbox" name="problems[]" id="fbq9" value="multimedia without captions or text equivalent" /> multimedia without captions or text equivalent</label>
				</div>
				<div class="checkbox">
					<label for="fbq10"><input class="problems" type="checkbox" name="problems[]" id="fbq10" value="moving or flashing object that can’t be controlled" /> moving or flashing object that can’t be controlled</label>
				</div>
				<div class="checkbox">
					<label for="fbq11"><input class="problems" type="checkbox" name="problems[]" id="fbq11" value="incomplete or non-existent page (for example, “Page not found” error)" /> incomplete or non-existent page (for example, “Page not found” error)</label>
				</div>
				<div class="checkbox">
					<label for="fbq12"><input class="problems" type="checkbox" name="problems[]" id="fbq12" value="error notification is confusing or no error notification" /> error notification is confusing or no error notification</label>
				</div>
				<div class="form-group">
					<label for="fbop">Other problem</label>
					<input class="form-control problems" type="text" id="fbop" name="fbop" size="45" maxlength="60" />
				</div>
			</fieldset>

			<div class="form-group">
				<label for="fbaxs">How were you accessing the Web site today?</label>
				<select class="form-control" name="fbaxs" id="fbaxs">
					<option value="desktop">Desktop computer</option>
					<option value="laptop">Laptop</option>
					<option value="mobile">Mobile device</option>
				</select>
			</div>

			<section id="fbcomp">
				<h3>Desktop &amp; laptop information</h3>
				<fieldset>
					<legend>Please include the version and other clarifying details</legend>
					<div class="form-group">
						<label for="fbos">Operating system</label>
						<input class="form-control" type="text" id="fbos" name="fbos" size="20" maxlength="100" />
					</div>
					<div class="form-group">
						<label for="fbdbrwsr">Browser</label>
						<input class="form-control" type="text" id="fbdbrwsr" name="fbdbrwsr" size="20" maxlength="100" />
					</div>
					<div class="form-group">
						<label for="fbdaad">Adaptive or assistive device</label>
						<input class="form-control" type="text" id="fbdaad" name="fbdaad" size="20" maxlength="100" />
					</div>
				</fieldset>
			</section>

			<section id="fbmob">
				<h3>Mobile Information</h3>
				<fieldset>
					<legend>Please include the version and other clarifying details</legend>
					<div class="form-group">
						<label for="fbsphn">Smartphone type</label>
						<input class="form-control" type="text" id="fbsphn" name="fbsphn" size="20" maxlength="100" />
					</div>
					<div class="form-group">
						<label for="fbmbrwsr">Browser</label>
						<input class="form-control" type="text" id="fbmbrwsr" name="fbmbrwsr" size="20" maxlength="100" />
					</div>
					<div class="form-group">
						<label for="fbmaad">Adaptive or assistive device</label>
						<input class="form-control" type="text" id="fbmaad" name="fbmaad" size="20" maxlength="100" />
					</div>
				</fieldset>
			</section>
		</section>

		<section id="fbcntc">
			<h2 class="wb-inv">Follow-up</h2>
			<div class="checkbox">
				<label for="fbcntc1"><input type="checkbox" name="fbcntc1" id="fbcntc1" value="yes" /> Please contact me if you require further details.</label>
			</div>
			<div class="checkbox">
				<label for="fbcntc2"><input type="checkbox" name="fbcntc2" id="fbcntc2" value="yes" /> Send me a response.</label>
			</div>

			<section id="fbinfo">
				<h3>Contact Information</h3>
				<fieldset>
					<legend>Please provide information that we could use to contact you</legend>
					<div class="form-group">
						<label for="fbnm"><span class="field-name">Name</span></label>
						<input class="form-control" type="text" id="fbnm" name="fbnm" size="45" maxlength="45" pattern=".{2,}" data-rule-minlength="2" />
					</div>
					<div class="form-group">
						<label for="fbeml" class="required"><span class="field-name">E-mail address</span> <strong class="required">(required)</strong></label>
						<input class="form-control" type="email" id="fbeml" name="fbeml" size="45" maxlength="60" required="required" />
					</div>
					<div class="form-group">
						<label for="fbhphn"><span class="field-name">Home phone number</span> including area code (for example, 999-999-9999)</label>
						<input class="form-control" type="tel" id="fbhphn" name="fbhphn" size="12" maxlength="12" data-rule-phoneUS="true" />
					</div>
					<div class="form-group">
						<label for="fbwphn"><span class="field-name">Work phone number</span> including area code (for example, 999-999-9999)</label>
						<input class="form-control" type="tel" id="fbwphn" name="fbwphn" size="12" maxlength="12" data-rule-phoneUS="true" />
					</div>
					<div class="form-group">
						<label for="fbwphnxt"><span class="field-name">Work phone number extension</span></label>
						<input class="form-control" type="text" id="fbwphnxt" name="fbwphnxt" size="8" maxlength="8" />
					</div>
				</fieldset>
			</section>
		</section>

		<input type="submit" name="fbsbmt" id="fbsbmt" value="Submit feedback" class="btn btn-primary" /> <input type="reset" value="Reset" class="btn btn-default" />
	</form>

	<section>
		<h2 id="osc-avs">Other service channels</h2>
		<address>
			<dl>
				<dt><strong>By telephone:</strong></dt>
				<dd><em>[telephone number]</em></dd>
				<dt><strong>By mail:</strong></dt>
				<dd><em>[mailing address]</em></dd>
				<dt><strong>In person at:</strong></dt>
				<dd><em>[building address]</em></dd>
				<dt><strong>Teletypewriter:</strong></dt>
				<dd><em>[teletypewriter number]</em></dd>
			</dl>
		</address>
	</section>
</div>

<div class="nojs-show">
	<p>You may use one of the following methods to contact us:</p>
	<address>
		<dl>
			<dt><strong>By e-mail:</strong></dt>
			<dd><em>[e-mail address]</em></dd>
			<dt><strong>By telephone:</strong></dt>
			<dd><em>[telephone number]</em></dd>
			<dt><strong>By mail:</strong></dt>
			<dd><em>[mailing address]</em></dd>
			<dt><strong>In person at:</strong></dt>
			<dd><em>[building address]</em></dd>
			<dt><strong>Teletypewriter:</strong></dt>
			<dd><em>[teletypewriter number]</em></dd>
		</dl>
	</address>
</div>