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.

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

64 Comments

  1. Paul Marginean Reply

    Hi Jenna! Thanks for all the detailed explanation, highly appreciate it!

    One important question: can the email preferences center also accommodate radio buttons/picklists instead of checkboxes? I have a client which requires gathering the consent on the level of communications that the audience wants based on 4 different levels. Of course, this would work best with the ability to only select one option, be it via radio buttons or via a picklist. Can this be achieved?

    • Jenna Molby

      Hi Paul, You’re welcome! No, I don’t think that’s do-able. What you could do, though, is add some javascript that would only allow them to “check” one checkbox.

  2. I don’t know if i’m been really stupid but i cant edit css on the template page there is a HTML editor but not a css?

    • Jenna Molby

      Hi Callum, You would paste the CSS within the same tab as the HTML.

Write A Comment