Chat wizard working example with HTML form

• Edit this page
• Revision history
• Questions or comments?

Below is the code to achieve the demo on this page with an HTML form.

	
	<section class="wb-chtwzrd hidden">
		<h2 data-wb-chtwzrd-replace="I can help you find the information you need">Help us help you</h2>
		<form class="mrgn-bttm-xl" action="https://google.ca" method="GET">
			<p class="wb-chtwzrd-greetings">Hi! I can help you find resources that are available to help you in your quest to find information.</p>
			<p>If you just want to surf the internet, go to <a href="https://google.ca">Google search</a></p>
			<fieldset id="q1">
				<legend>It would help me out if I knew a little more about you. Are you ready?</legend>
				<ul class="list-unstyled mrgn-tp-md">
					<li>
						<label>
							<input type="radio" name="ask" value="yes" data-wb-chtwzrd-next="q2" />
							<span>Yes</span>
						</label>
					</li>
					<li>
						<label>
							<input type="radio" name="ask" value="no" data-wb-chtwzrd-next="none" />
							<span>No</span>
						</label>
					</li>
					<li>
						<label>
							<input type="radio" name="ask" value="skip" data-wb-chtwzrd-next="q3" />
							<span>Go straight to the point</span>
						</label>
					</li>
				</ul>
			</fieldset>
			<fieldset id="q2">
				<legend>Do you have a preferred language?</legend>
				<ul class="list-unstyled mrgn-tp-md">
					<li>
						<label>
							<input type="radio" name="preference" value="yes" data-wb-chtwzrd-next="q3" />
							<span>Of course</span>
						</label>
					</li>
					<li>
						<label>
							<input type="radio" name="preference" value="" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/home.html" />
							<span>No</span>
						</label>
					</li>
				</ul>
			</fieldset>
			<fieldset id="q3">
				<legend>Which one is it?</legend>
				<ul class="list-unstyled mrgn-tp-md">
					<li>
						<label>
							<input type="radio" name="lang" value="en" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/en.html" />
							<span>English</span>
						</label>
					</li>
					<li>
						<label>
							<input type="radio" name="lang" value="fr" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/fr.html" />
							<span>Français</span>
						</label>
					</li>
				</ul>
			</fieldset>
			<p class="wb-chtwzrd-farewell wb-inv">Thank you! Your personalized results are ready for you.</p>
			<div class="mrgn-tp-md"></div>
			<button type="submit" class="btn btn-sm btn-primary" data-wb-chtwzrd-replace="Show results">Search</button>
		</form>
	</section>