How to Customize your Pardot Email Preference Page

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%%
        
      
 
      
        © 2017-2019 Company Name
        
          Privacy
          Terms
          Support

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

Jessica 3 years ago Reply

Hi Jenna,

thanks! This was really helpful. Do you know if is it possible to have on the same line the label and the description?

Regards,

Jessica
- Jenna Molby Post Author 3 years ago
  
  Hi Jessica, No, I have not found a way to do this.
Bobby Palmer 3 years ago Reply

Hi Jenna,

Thank you! This was extremely helpful. I am having trouble getting the initial text (Select which lists…) as well as the Email label to be left justified. I was also wondering how I can tighten up the space between the checkbox line and the description line which I have on a separate line following your suggestion in the comments.

Thanks! This is an amazing resource.
- Jenna Molby Post Author 3 years ago
  
  Hi Bobby, So happy you found it helpful! Adding this CSS to the page should do the trick
  
  body form.form p.email-pref span.description {
  padding-left: 40px;
  }
  body form.form p label {
  padding-bottom:0;
  }
Mark Bennett 3 years ago Reply

Hi Jenna,

I’ve got a small issue centering a footer on my landing page.

Is this done with the CSS or HTML?

Regards,

Mark
- Jenna Molby Post Author 3 years ago
  
  Hi Mark, Centering would be done using CSS.
Maida 3 years ago Reply

Hi Jenna

This is such a great Pardot resources. I have “0” knowledge regarding html and CSS and was able to make a copy of our layout template and applied most of the changes from your article.
I still can’t figure out how to center the logo – could you show me which part of the code takes care of that so maybe I can see what I’m missing.
Also, our preference page includes the link for “unsubscribe from all communications” how do I style that section? I just want to change the font color and underline.
- Jenna Molby Post Author 3 years ago
  
  Hi Maida, You’re welcome! You can center the logo by adding style=”margin: 0 auto;” to the image tag like this:
  
  You can style the link by adding this CSS:
  
  #pardot-form a {
  color:red;
  text-decoration:underline;
  }
- Maida 3 years ago
  
  Thanks Jenna. I got the underline text formatted!!
  
  Haven’t been able to center the logo though. I think I’m missing something to wrap the image within the container but haven’t figure out what exactly.
Aman Ellis 3 years ago Reply

Hi Jenna, thanks for all the great Pardot resources. Do you know if it’s possible to group lists? For example, we’d like to include a header, then group lists under it.

Thanks
- Jenna Molby Post Author 3 years ago
  
  Hi Aman, It’s possible with some complex javascript.

Step 1: Create a layout template

Step 2: Style the form

Questions?

64 Comments

Write A Comment Cancel Reply