Language selection

Search

wb5-click postback converter

Adapter to convert the deprecated code of the data-wb5-click="postback" plugin massively used for the feature "Report a problem or mistake on this page".

Recommendation

Use the wet-boew plugin Postback (Envoie via Ajax). For example:

<div class="gc-rprt-prblm">
	<div class="gc-rprt-prblm-frm">
			<form id="gc-rprt-prblm-form" action="wb5-click-postback-en.html" method="post" class="wb-postback" data-wb-postback='{"success":".gc-rprt-prblm-thnk","failure":".gc-rprt-prblm-thnk"}'>
			<fieldset>
				<legend><span class="field-name">Please select all that apply:</span></legend>
				<div class="checkbox">
					<label for="problem1"><input name="problem1" id="problem1" type="checkbox" value="Yes">A link, button or video is not working</label>
				</div>
				<div class="checkbox">
					<label for="problem2"><input name="problem2" id="problem2" type="checkbox" value="Yes">It has a spelling mistake</label>
				</div>
				<div class="checkbox">
					<label for="problem3"><input name="problem3" id="problem3" type="checkbox" value="Yes">Information is missing</label>
				</div>
				<div class="checkbox">
					<label for="problem4"><input name="problem4" id="problem4" type="checkbox" value="Yes">Information is outdated or wrong</label>
				</div>
				<div class="checkbox">
					<label for="problem5"><input name="problem5" id="problem5" type="checkbox" value="Yes">Login error when trying to access an account (e.g. My Service Canada Account)</label>
				</div>
				<div class="checkbox">
					<label for="problem11"><input name="problem11" id="problem11" type="checkbox" value="Yes">I can't find what I'm looking for</label>
				</div>
				<div class="checkbox">
					<label for="problem12"><input name="problem12" id="problem12" type="checkbox" value="Yes">Other issue not in this list</label>
				</div>
			</fieldset>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
	<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide">
		<h3>Thank you for your help!</h3>
		<p>You will not receive a reply. For enquiries,&nbsp;<a href="https://www.canada.ca/en/contact/index.html">contact us</a>.</p>
	</div>
</div>

Conversion from a deprecated code

Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, contact us.

Expected result

When the form is submitted, it need to be hidden and a "Thank you" message is shown on success or on fail. The CSS class started with gc-rprt-prblm must not be re-used ouside the report a problem context because it might apply undesirable style.

Example with wb-postback

Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, contact us.

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: