In this tutorial, I will show you how to turn the default Pardot email preference page into a preference page that matches your brand. You will learn how to customize everything including the header, footer, form, and text.
Step 1: Create a layout template
By default, the preference page uses the “Standard” layout template. You can edit the “Standard” template or create a brand new layout template. I recommend creating a brand new layout template that’s only used for the email preferences page.
Create a new layout template (Marketing > Landing Page > Layout Templates > New Layout Template) and paste your HTML into the template. Add the tag %%content%% where you want the preference center form to appear.
Here’s what my HTML looks like:
%%title%%
%%Content%%
Step 2: Style the form
The preference page form can be styled as well to match your brand. To style your form, you will need to add some CSS to your layout template.
This is what my page looks like without adding any CSS to the form.
You can add whatever styles you want. Here are some elements you might want to style, along with the CSS classes.
Center the form and give it a width
body form.form {
width:100%;
max-width:500px;
margin:0 auto;
}
Remove the left margin from the checkboxes
body form.form p.no-label,
body form.form p.email-pref {
margin-left:0;
}
Change the font color, size, etc of the list name
body form.form p label.inline {
font-size:15px;
color:#5d5c5c;
}
Change the font color, size, etc of the list description
body form.form p.email-pref span.description {
font-size:13px;
color:#7b7a7a;
}
Change the label for “Email address”
body form.form p label {
/* stack the label on top of the form field */
float:none;
text-align:left;
/* label font styling */
font-weight:normal;
font-size:15px;
padding-bottom:5px;
color:#5d5c5c;
}
/* hide the required star */
body form.form p.required label,
body form.form span.required label {
background:none;
}
Add some styling to the “Email address” field
body form.form input.text {
width:100%; /* give it a width to be responsive */
padding:5px;
}
Customize the submit button
/* Submit button properties */
body form.form p.submit input {
background:#56CFD2;
color:#FFF;
border:0;
padding:10px 35px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
line-height: 1.6923em;
letter-spacing: 2px;
cursor:pointer;
}
/* Submit button hover */
body form.form p.submit input:hover {
background: #4ebfc2;
}
/* the submit button wrapper */
body form.form p.submit {
margin-left:0; /* get rid of the default left margin */
width:100%; /* give it a width in order to center the button */
text-align:center; /* center the button */
}
Applying all the styles left me with this result. Much better, right?
You can also give the checkboxes within your form some flair. Check out my tutorial for creating beautiful checkboxes within Pardot forms.
Here is my finished preference page with the styled checkboxes.
Questions?
Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.
64 Comments
Hi Jenna, thank you so much for all of your content and resources! I just want to know if there is a way to do the checkboxes of list and then add an text-decoration: underline; and then have the privacy policy/unsubscribe followed by the submit button.. do you know how I could achieve this? Thanks!!
Hi Sam, You’re welcome! I’m not sure what you mean. Feel free to DM me the link to your page and I can take a look.
Hello, good afternoon, How do I hide the codes that appear after clicking the “Save subscription preferences” button? Well, when I click on this button, the success message is “Your email preferences have been saved.”, but the code below is also displayed:
%%form-start-loop-fields%% %%form-if-field-label%% %%form-field-label%% %%form-end-if-field-label%% %%form-field-input%% %%form-if-field-description%% %%form-field-description%% %%form-end-if-field-description%% %%form-field-if-error%% %%form-field-error-message%% %%form-field-end-if-error%% %%form-end-loop-fields%%
Hi Marco, My guess would be that something is missing from the FORM tab within the layout template. If you revert to the original code does it work for you?
Is there a way to stack the list options in multiple columns?
Hi Leanna, Adding this CSS should do the trick
#pardot-form .pd-checkbox {
clear:none;
float:left;
}
Hi Jenna! Thanks so much for this tutorial! It’s really helping me set up Pardot marketing for mu nonprofit 🙂 Quick question – I don’t see the “opt out of all emails” link at the bottom of the preferences page preview after using your code. I looked in the comments and saw Tan’s comment but don’t see the “.no-label a {
display: none;
}” code to remove. Thanks in advance for your help! 🙂
Hi Molly, So happy you find my tutorials helpful 🙂 DM me the link to your preferences page and I can take a look at why it’s not appearing.
Hi. Same problem here. The opt out of all emails link is missing in the custom epc. Any answer from this concern?
Jenna, these types of resources that you create are AMAZING! They’ve helped so much! How can I get the “Unsubscribe from all emails” link moved so that it is centered BELOW the “Submit” button? TIA!
Hi Chloe, So happy you like them! I’ve done this before by adding some CSS like this:
form.form a {
position:relative;
top:100px;
}
You might have to update 100px based on what your page looks like.