Chat wizard
Need translation
Below is the code to achieve the demo on this page with an HTML form.
<section class="provisional 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>Détails de la page
- Date de modification :