I had a client ask me if I could re-arrange the options on her Pardot preference page today. ‘Sure’ I said, as I simultaneously Googled ‘rearrange options Pardot preference center’, aware that you could create separate preference pages but hoping that Pardot had some way to specify the order of items. They don’t (feature request?). But that’s okay; years of web development and client requests gave me the skills to do what I needed to quickly. And in the spirit of sharing, here is how to accomplish what my client wanted.
So Pardot lets you create lists and specify whether you’d like to add the list as an option on the preference center page. That’s great, but the end result is a page with an alphabetical set of check boxes, like this example:
That wasn’t what my client wanted – their desired page should look like this:
The solution requires some jQuery, but it’s pretty straightforward. First, you’ll need to add jQuery to your preference page layout template. Just search for ‘jQuery CDN’ and grab the latest minimized version. I grabbed mine from boostrapcdn. The code should like something like this:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
Stick this towards the bottom of your page, before the closing body tag.
You’ll need to write a little bit of code, but it’s all the same line of code essentially, and you’ll just change the elements that you’re referencing. Using jQuery’s .insertBefore() method, we are going to select checkbox items and move them around to achieve the correct order on the Pardot preference page. You tell this method what element you’d like to move, and what element it should appear before in the document. Though my client’s page had twelve options, I only needed to move four (and add two headers) to achieve the correct layout. This will vary on your own layout needs.
My first move was to take the ‘Cloud Expense Management’ element and place it before the ‘Advisory Services’ element. To make this change, I had to write one line of code that selects the id of the ‘Cloud Expense Management’ element and inserts it before the ‘Advisory Services’ element . The easiest way to do this is look at the existing Pardot page and then view the page’s source. Copy and paste the source code into an editor of your choice (I used Dreamweaver because it’s just quicker to split view source and code). Find the unique id of the option you want to move. The code will look like the image below. For my list, the id was ‘list_22788’ and your’s should follow a similar convention.
<script> $('#list_22788').parent().insertBefore('#list_23020').parent(); </script>
This code selects the ‘Cloud Expense Element’ and its containing paragraph element, and inserts it before the containing paragraph of the ‘Advisory Services’ element. To move other elements, copy and paste this code, and change the element ids.
To create the headings for our Pardot preferences, you use the exact same line of code, but instead of specifying an existing element id to move, you create content and insert it. Here is the code for the first heading:
$( '<p><strong>Solutions of interest:</strong></p>' ).insertBefore('#list_22954' ).parent();
Using this technique, you can achieve the layout you desire for your Pardot preference page.