PII Scrub

Replace Personal Identifiable Information (PII) from the form flagged fields with redacted characters.

On this page

Basic example

Below is a basic example of how to implement the PII Scrub plugin.

Instructions

Fill the below fields with the following values:

  • Subject: My PRI: 012345678
  • Message: Visa: 4916 0739.3667-6891, Master: 5428735149026050, SIN: 123 123-123, Postal code: K2C 3N2, Driving Licence Nr: P12345678912345, Bank account example: 003-1234567
View code 
<form action="pii-scrub-en.html" class="wb-pii-scrub">
	<div class="form-content">
		<div class="form-group">
			<label for="subject"><span class="field-name">Subject</span></label>
			<input class="form-control" id="subject" name="subject" type="text" data-scrub-field />
		</div>
		<div class="form-group">
			<label for="message">Message</label>
			<textarea class="form-control" id="message" name="message" data-scrub-field rows="4" cols="50"></textarea>
		</div>
		<button type="submit" class="btn btn-primary" name="test" value="testValue">Submit</button>
	</div>
</form>

Example with form Postback and custom modal template

Below is an example demonstrating the implementation of the PII Scrub plugin with a form submitted with Postback. This example also demonstrates the use of the srubChar and moreInfo options.

Instructions

Only the Comments field has a data-scrub-field attribute.

Fill the Comments field with the following:
Visa: 4916 0739.3667-6891, Master: 5428735149026050, SIN: 123 123-123, Postal code: K2C 3N2, Driving Licence Nr: P12345678912345, Bank account example: 003-1234567

Thank you!

Something went wrong. Please submit your information via an alternative method.

View code 
<form action="pii-scrub-en.html" class="wb-postback wb-pii-scrub" data-wb-postback='{"success":".success-message","failure":".failure-message"}' data-wb-pii-scrub='{"scrubChar": "████████", "modalTemplate": "[data-scrub-modal]"}'>
	<template data-scrub-modal>
		<header class="modal-header">
			<h2 class="modal-title">Personal information in your comment has been removed</h2>
		</header>
		<div class="modal-body">
			<p>Comments are only used to improve our website. You will not receive a response.</p>
			<p><strong>To protect your privacy, your comment will be submitted as:</strong></p>
			<div data-scrub-modal-fields></div>
			<details class="mrgn-tp-md">
				<summary>What is considered personal information?</summary>
				<p>Certain types of information can’t be included in this feedback form, such as your:</p>
				<ul>
					<li>email address</li>
					<li>telephone number</li>
					<li>postal code</li>
					<li>passport number</li>
					<li>business number</li>
					<li>social insurance number (SIN)</li>
				</ul>
			</details>
		</div>
		<div class="modal-footer">
			<div class="row">
				<div class="col-xs-12 col-sm-6 mrgn-tp-sm"><button type="button" class="btn btn-link btn-block popup-modal-dismiss">Go back and edit comment</button></div>
				<div class="col-xs-12 col-sm-6 mrgn-tp-sm"><button type="button" class="btn btn-primary btn-block popup-modal-dismiss" data-scrub-submit>Submit comment</button></div>
			</div>
		</div>
	</template>
	<div class="form-content">
		<div class="form-group">
			<label for="firstname1"><span class="field-name">First Name</span></label>
			<input class="form-control" id="firstname1" name="firstname" type="text" />
		</div>
		<div class="form-group">
			<label for="lastname1"><span class="field-name">Last Name</span></label>
			<input class="form-control" id="lastname1" name="lastname" type="text" />
		</div>
		<div class="form-group">
			<label for="comments">Comments</label>
			<textarea class="form-control" id="comments" name="comments" data-scrub-field rows="4" cols="50"></textarea>
		</div>
		<button class="btn btn-primary" name="test" value="testValue">Submit</button>
	</div>
</form>
<p class="success-message hide">Thank you!</p>
<p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>

Example with form Form validation

Below is an example demonstrating the implementation of the PII Scrub plugin with Form validation.

Instructions

Only the Comments field has a data-scrub-field attribute.

Fill the Comments field with the following:
Visa: 4916 0739.3667-6891, Master: 5428735149026050, SIN: 123 123-123, Postal code: K2C 3N2, Driving Licence Nr: P12345678912345, Bank account example: 003-1234567

View code 
<div class="wb-frmvld mrgn-bttm-md">
		<form action="pii-scrub-en.html" class="wb-pii-scrub">
			<div class="form-content">
				<div class="form-group">
					<label for="fname1" class="required"><span class="field-name">First name</span> <strong class="required">(required)</strong></label>
					<input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" />
				</div>
				<div class="form-group">
					<label for="lname1" class="required"><span class="field-name">Last name</span> <strong class="required">(required)</strong></label>
					<input class="form-control" id="lname1" name="lname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" />
				</div>
				<div class="form-group">
					<label for="preferredNumber1">Preferred: <span class="field-name">Phone Number</span></label>
					<input class="form-control" id="preferredNumber1" name="preferredNumber" type="tel" />
				</div>
				<div class="form-group">
					<label for="comments2">Comments</label>
					<textarea class="form-control" id="comments2" name="comments2" data-scrub-field rows="4" cols="50"></textarea>
				</div>
				<button class="btn btn-primary">Submit</button>
			</div>
		</form>
	</div>

Example with form Form validation and Postback

Below is an example demonstrating the implementation of the PII Scrub plugin with Form validation and Postback.

Instructions

Only the Issue field has a data-scrub-field attribute.

Fill the Issue field with the following:
Visa: 4916 0739.3667-6891, Master: 5428735149026050, SIN: 123 123-123, Postal code: K2C 3N2, Driving Licence Nr: P12345678912345, Bank account example: 003-1234567

Thank you!

Something went wrong. Please submit your information via an alternative method.

View code 
<div class="wb-frmvld mrgn-bttm-md">
	<form action="pii-scrub-en.html" class="wb-pii-scrub wb-postback" data-wb-postback='{"success":".success-message-2","failure":".failure-message-2"}'>
		<div class="form-content">
			<div class="form-group">
				<label for="fullName" class="required"><span class="field-name">Full name</span> <strong class="required">(required)</strong></label>
				<input class="form-control" id="fullName" name="fullName" type="text" required="required" data-rule-minlength="2" />
			</div>
			<div class="form-group">
				<label for="issue">Issue</label>
				<textarea class="form-control" id="issue" name="issue" data-scrub-field rows="4" cols="50"></textarea>
			</div>
			<button class="btn btn-primary">Submit</button>
		</div>
	</form>
	<p class="success-message-2 hide">Thank you!</p>
	<p class="failure-message-2 hide">Something went wrong. Please submit your information via an alternative method.</p>
</div>
Date modified: