How to Add Toggles to Your Pardot Email Preferences Page

June 24, 2021
Email Preferences Page, Jenna Molby

Looking for a way to spice up your Pardot email preferences page? Try using toggles instead of checkboxes. In this tutorial, I’ll show you how to create a preferences page that uses toggles instead of checkboxes. With a bit of HTML and some CSS, you can transform your preferences page in four easy steps.

Demo

Here’s an example of what we’ll be creating in this tutorial.

See the Pen
Pardot Preferences Page With Toggles by Jenna Molby (@jennamolby)
on CodePen.

Step 1: Style your preference page

This post does not cover the basics of styling your Pardot preferences page. Click here to learn how to customize your page from scratch.

Step 2: Update the preferences page template

To make the toggles work, you will need to edit the form section of your layout template. Navigate to the layout template and click on the form tab. Replace the content with this HTML.

<br /><br /><br /><br /><br />
<form accept-charset=”UTF-8″ method=”post” action=”%%form-action-url%%” class=”form” id=”pardot-form”><br /><br /><br /><br /><br />
%%form-opening-general-content%%</p><br /><br /><br /><br />
<p>%%form-if-thank-you%%<br /><br /><br /><br /><br />
	%%form-javascript-focus%%<br /><br /><br /><br /><br />
	%%form-thank-you-content%%<br /><br /><br /><br /><br />
	%%form-thank-you-code%%<br /><br /><br /><br /><br />
%%form-end-if-thank-you%%</p><br /><br /><br /><br />
<p>%%form-if-display-form%%</p><br /><br /><br /><br />
<p>	%%form-before-form-content%%<br /><br /><br /><br /><br />
		%%form-if-error%%<br /><br /><br /><br /><br />
			<p class=”errors”>Please correct the errors below:</p><br /><br /><br /><br /><br />
		%%form-end-if-error%%<br /><br /><br /><br /><br />
<ol class=”switches”><br /><br /><br /><br /><br />
		%%form-start-loop-fields%%<br /><br /><br /><br /><br />
			<li class=”form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%”><br /><br /><br /><br /><br />
			%%form-if-field-label%%<br /><br /><br /><br /><br />
					<label class=”field-label” for=”%%form-field-id%%”>%%form-field-label%%</label><br /><br /><br /><br /><br />
				%%form-end-if-field-label%%<br /><br /><br /><br /><br />
				%%form-field-input%%<br /><br /><br /><br /><br />
				%%form-if-field-description%%<br /><br /><br /><br /><br />
					<span class=”description”>%%form-field-description%%</span><br /><br /><br /><br /><br />
				%%form-end-if-field-description%%</p><br /><br /><br /><br />
<p>				</li></p><br /><br /><br /><br />
<p>			<div id=”error_for_%%form-field-id%%” style=”display:none”></div><br /><br /><br /><br /><br />
			%%form-field-if-error%%<br /><br /><br /><br /><br />
				<p class=”error no-label”>%%form-field-error-message%%</p><br /><br /><br /><br /><br />
			%%form-field-end-if-error%%<br /><br /><br /><br /><br />
		%%form-end-loop-fields%%<br /><br /><br /><br /><br />
</ol><br /><br /><br /><br /><br />
		%%form-spam-trap-field%%</p><br /><br /><br /><br />
<p>		<!– forces IE5-8 to correctly submit UTF8 content  –><br /><br /><br /><br /><br />
		<input name=”_utf8″ type=”hidden” value=”&#9731;” /></p><br /><br /><br /><br />
<p>		<p class=”submit”><br /><br /><br /><br /><br />
			<input type=”submit” accesskey=”s” value=”%%form-submit-button-text%%” %%form-submit-disabled%%/><br /><br /><br /><br /><br />
		</p><br /><br /><br /><br /><br />
	%%form-after-form-content%%</p><br /><br /><br /><br />
<p>%%form-end-if-display-form%%</p><br /><br /><br /><br />
<p>%%form-javascript-link-target-top%%<br /><br /><br /><br /><br />
</form><br /><br /><br /><br /><br />
<!– Update the HTML using jQuery to create toggles –><br /><br /><br /><br /><br />
<script src=”https://code.jquery.com/jquery-latest.min.js”></script><br /><br /><br /><br /><br />
 <script type=”text/javascript”><br /><br /><br /><br /><br />
  $( document ).ready(function() {<br /><br /><br /><br /><br />
      $(‘label’).contents().each(function() {<br /><br /><br /><br /><br />
    if (this.nodeType == 3 && $.trim(this.nodeValue) != ”) {<br /><br /><br /><br /><br />
       $(this).wrap(‘<span class=”label-wrapper”></span>’);<br /><br /><br /><br /><br />
    }<br /><br /><br /><br /><br />
});<br /><br /><br /><br /><br />
$(‘.label-wrapper’).after(‘<span></span>’);<br /><br /><br /><br /><br />
});<br /><br /><br /><br /><br />
</script>

%%form–opening–general–content%%

%%form–if–thank–you%%

%%form–javascript–focus%%

%%form–thank–you–content%%

%%form–thank–you–code%%

%%form–end–if–thank–you%%

%%form–if–display–form%%

%%form–before–form–content%%

%%form–if–error%%

<p class=“errors”>Please correct the errors below:</p>

%%form–end–if–error%%

%%form–start–loop–fields%%

%%form–if–field–label%%

<label class=“field-label” for=“%%form-field-id%%”>%%form–field–label%%</label>

%%form–end–if–field–label%%

%%form–field–input%%

%%form–if–field–description%%

<span class=“description”>%%form–field–description%%</span>

%%form–end–if–field–description%%

%%form–field–if–error%%

<p class=“error no-label”>%%form–field–error–message%%</p>

%%form–field–end–if–error%%

%%form–end–loop–fields%%

%%form–spam–trap–field%%

<!— forces IE5–8 to correctly submit UTF8 content —>

%%form–after–form–content%%

%%form–end–if–display–form%%

%%form–javascript–link–target–top%%

<!— Update the HTML using jQuery to create toggles —>

$( document ).ready(function() {

$(‘label’).contents().each(function() {

if (this.nodeType == 3 && $.trim(this.nodeValue) != ”) {

$(this).wrap(‘<span class=”label-wrapper”></span>’);

$(‘.label-wrapper’).after(‘<span></span>’);

What’s changed?

Instead of placing the form fields in a paragraph, the form fields are placed in an ordered list with a class named “switches”.
Some jQuery is added to update the HTML markup of the preferences form.

Step 3: Upload icons into Pardot

There are two icons that will need to be uploaded in Pardot, a checkmark icon and a “x” icon. Download the images and then upload the images into the content library within Pardot.

Step 4: Add the CSS for the toggles

Add this CSS to your layout template. Update the first couple of lines to include the image paths to the icons you uploaded in step 4.

<br /><br /><br /><br /><br />
/* Update this line with the URL of your checkbox image */<br /><br /><br /><br /><br />
.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child::after {<br /><br /><br /><br /><br />
  background-image: url(https://);<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
/* Update this line with the URL of your “X” image */<br /><br /><br /><br /><br />
.switches .pd-checkbox span:last-child::after {<br /><br /><br /><br /><br />
  background: url(https://);<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
* {<br /><br /><br /><br /><br />
  padding: 0;<br /><br /><br /><br /><br />
  margin: 0;<br /><br /><br /><br /><br />
  box-sizing: border-box;<br /><br /><br /><br /><br />
}</p><br /><br /><br /><br />
<p>ol {<br /><br /><br /><br /><br />
  list-style: none;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
label {<br /><br /><br /><br /><br />
  cursor: pointer;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form p {<br /><br /><br /><br /><br />
  margin-left:0;<br /><br /><br /><br /><br />
  padding-left:0;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
/* hide the checkbox */<br /><br /><br /><br /><br />
[type=”checkbox”] {<br /><br /><br /><br /><br />
  position: absolute;<br /><br /><br /><br /><br />
  left: -9999px;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
/* Position the checkbox label */<br /><br /><br /><br /><br />
.switches .pd-checkbox label {<br /><br /><br /><br /><br />
  display: flex;<br /><br /><br /><br /><br />
  align-items: center;<br /><br /><br /><br /><br />
  justify-content: space-between;</p><br /><br /><br /><br />
<p>}<br /><br /><br /><br /><br />
/* Style the switch */<br /><br /><br /><br /><br />
.switches .pd-checkbox label.inline span:last-child {<br /><br /><br /><br /><br />
  position: relative;<br /><br /><br /><br /><br />
  width: 50px;<br /><br /><br /><br /><br />
  height: 26px;<br /><br /><br /><br /><br />
  border-radius: 15px;<br /><br /><br /><br /><br />
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);<br /><br /><br /><br /><br />
  background: #434257;<br /><br /><br /><br /><br />
  transition: all 0.3s;<br /><br /><br /><br /><br />
}</p><br /><br /><br /><br />
<p>.switches .pd-checkbox label.inline span:last-child::before,<br /><br /><br /><br /><br />
.switches .pd-checkbox label.inline span:last-child::after {<br /><br /><br /><br /><br />
  content: “”;<br /><br /><br /><br /><br />
  position: absolute;<br /><br /><br /><br /><br />
}</p><br /><br /><br /><br />
<p>.switches .pd-checkbox span:last-child::before {<br /><br /><br /><br /><br />
  left: 1px;<br /><br /><br /><br /><br />
  top: 1px;<br /><br /><br /><br /><br />
  width: 24px;<br /><br /><br /><br /><br />
  height: 24px;<br /><br /><br /><br /><br />
  background: #FFF;<br /><br /><br /><br /><br />
  border-radius: 50%;<br /><br /><br /><br /><br />
  z-index: 1;<br /><br /><br /><br /><br />
  transition: transform 0.3s;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
/* Style the “X” switch */<br /><br /><br /><br /><br />
.switches .pd-checkbox span:last-child::after {<br /><br /><br /><br /><br />
  top: 50%;<br /><br /><br /><br /><br />
  right: 8px;<br /><br /><br /><br /><br />
  width: 12px;<br /><br /><br /><br /><br />
  height: 12px;<br /><br /><br /><br /><br />
  transform: translateY(-50%);<br /><br /><br /><br /><br />
  background-size: 12px 12px;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
/* Style the “ON” switch */<br /><br /><br /><br /><br />
.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child {<br /><br /><br /><br /><br />
  background: #00d084;<br /><br /><br /><br /><br />
}</p><br /><br /><br /><br />
<p>.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child::before {<br /><br /><br /><br /><br />
  transform: translateX(24px);<br /><br /><br /><br /><br />
}</p><br /><br /><br /><br />
<p>.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child::after {<br /><br /><br /><br /><br />
  width: 14px;<br /><br /><br /><br /><br />
  height: 14px;<br /><br /><br /><br /><br />
  left: 8px;<br /><br /><br /><br /><br />
  background-size: 14px 14px;<br /><br /><br /><br /><br />
}

/* Update this line with the URL of your checkbox image */

.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child::after {

background-image: url(https://);

/* Update this line with the URL of your “X” image */

.switches .pd-checkbox span:last-child::after {

background: url(https://);

padding: 0;

margin: 0;

box-sizing: border-box;

list-style: none;

cursor: pointer;

#pardot-form p {

margin-left:0;

padding-left:0;

/* hide the checkbox */

[type=”checkbox”] {

position: absolute;

left: -9999px;

/* Position the checkbox label */

.switches .pd-checkbox label {

display: flex;

align-items: center;

justify-content: space-between;

/* Style the switch */

.switches .pd-checkbox label.inline span:last-child {

position: relative;

width: 50px;

height: 26px;

border-radius: 15px;

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);

background: #434257;

transition: all 0.3s;

.switches .pd-checkbox label.inline span:last-child::before,

.switches .pd-checkbox label.inline span:last-child::after {

content: “”;

position: absolute;

.switches .pd-checkbox span:last-child::before {

left: 1px;

top: 1px;

width: 24px;

height: 24px;

background: #FFF;

border-radius: 50%;

z-index: 1;

transition: transform 0.3s;

/* Style the “X” switch */

.switches .pd-checkbox span:last-child::after {

top: 50%;

right: 8px;

width: 12px;

height: 12px;

transform: translateY(-50%);

background-size: 12px 12px;

/* Style the “ON” switch */

.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child {

background: #00d084;

.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child::before {

transform: translateX(24px);

.switches .pd-checkbox [type=”checkbox”]:checked + label span:last-child::after {

width: 14px;

height: 14px;

left: 8px;

background-size: 14px 14px;

Now your page would look something like this, with the checkboxes turned into toggles.

Optional: Add any additional CSS

I added some additional CSS to my page to style the labels, list descriptions and options for my page. Here’s the CSS I added.

<br /><br /><br /><br /><br />
#pardot-form .no-label{<br /><br /><br /><br /><br />
  text-align:center;<br /><br /><br /><br /><br />
   margin-top:35px;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form .no-label a {<br /><br /><br /><br /><br />
 text-decoration:underline;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form label {<br /><br /><br /><br /><br />
  font-weight:500;<br /><br /><br /><br /><br />
  font-size:15px;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
.pd-email {<br /><br /><br /><br /><br />
  margin:20px 0;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form .description {<br /><br /><br /><br /><br />
  text-align:left;<br /><br /><br /><br /><br />
  display:block;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form li.pd-checkbox {<br /><br /><br /><br /><br />
  background-color:#FFF;<br /><br /><br /><br /><br />
  margin-bottom:5px;<br /><br /><br /><br /><br />
  border:solid 1px #ebebeb;<br /><br /><br /><br /><br />
  padding:0px 20px 20px 20px;<br /><br /><br /><br /><br />
  border-radius:5px;<br /><br /><br /><br /><br />
  -moz-border-radius:5px;<br /><br /><br /><br /><br />
  -webkit-border-radius:5px;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form .label-wrapper {<br /><br /><br /><br /><br />
  color:#444444;</p><br /><br /><br /><br />
<p>}<br /><br /><br /><br /><br />
#pardot-form {<br /><br /><br /><br /><br />
  color:#737373;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form .form-field {<br /><br /><br /><br /><br />
  text-align:left;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form input.text {<br /><br /><br /><br /><br />
   border:solid 1px #ebebeb;<br /><br /><br /><br /><br />
  padding:10px;<br /><br /><br /><br /><br />
  border-radius:5px;<br /><br /><br /><br /><br />
  -moz-border-radius:5px;<br /><br /><br /><br /><br />
  -webkit-border-radius:5px;<br /><br /><br /><br /><br />
  color:#737373;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form .no-label {<br /><br /><br /><br /><br />
  text-align:center;<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
#pardot-form .no-label a {<br /><br /><br /><br /><br />
    color:#737373;<br /><br /><br /><br /><br />
}

#pardot-form .no-label{

text-align:center;

margin-top:35px;

#pardot-form .no-label a {

text-decoration:underline;

#pardot-form label {

font-weight:500;

font-size:15px;

.pd-email {

margin:20px 0;

#pardot-form .description {

text-align:left;

display:block;

#pardot-form li.pd-checkbox {

background-color:#FFF;

margin-bottom:5px;

border:solid 1px #ebebeb;

padding:0px 20px 20px 20px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

#pardot-form .label-wrapper {

color:#444444;

#pardot-form {

color:#737373;

#pardot-form .form-field {

text-align:left;

#pardot-form input.text {

border:solid 1px #ebebeb;

padding:10px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

color:#737373;

#pardot-form .no-label {

text-align:center;

#pardot-form .no-label a {

color:#737373;

The final result

Here’s what my final page looks like.

See the Pen
Pardot Preferences Page With Toggles by Jenna Molby (@jennamolby)
on CodePen.

This Pardot article written by:

Jenna Molby

Jenna is a Salesforce Certified Pardot Specialist, Salesforce Certified Pardot Consultant and Salesforce Marketing Champion 2020. Jenna is a marketing operations leader with over ten years of B2B and B2C experience working on both the agency and client-side.

Original Pardot Article: https://jennamolby.com/how-to-add-toggles-to-your-pardot-preferences-page/

Find more great Pardot articles at https://jennamolby.com/