Customising Your Compliance Profile Preference Centres

*** NOTE: ALL INFORMATION IS ACCURATE AT DATE OF PUBLISHING ***

I’ve written a series of blogs all about Compliance Profiles which walk through a series of steps for getting up and running with Realtime Marketing compliance. Part one shows how to create a new Compliance Profile and then make sure your Preference Centre looks good. This is the page someone will land on if they click on the link from the bottom of the email, giving your Contacts and Leads a way to update their preferences or opt out completely if needed. In this post, I will walk through how to modify those pages a little more using some CSS and a few tricks to make it look more appealing.

First, this is what the Preference Centre looks like when you first create your Compliance Profile. It’s bare bones, so definitely needs reviewing and modifying! You can put it in Edit mode, then add in all the tick boxes for your Topics etc. to guide the person through updating their preferences. Again, more information on this is found in this blog post, so start there if you aren’t sure.

This is the end result I wanted. It looks nice, clear and easy to read, and the style is more in line with my company branding. How did I achieve it though?

Oh one other thing, I also added my logo in as the favourite icon so it appears at the top when landing on the Preference Centre page.

All of these things can be done in the HTML. After clicking Edit on the Preference Centre form, click on the HTML link from the right side of the form. The title is the first thing to edit. By default, it says ‘Form Editor’ which is what will then show up in the browser above where you see MVW Consulting Preference Centre. So just modify what you what to see in the title section like you see below. Will look much nicer than seeing ‘Form Editor’!

Next, I’ve got a few extra lines of code I’ve added in right before the start of the CSS <style> tag.

The first one is a link for my favourite icon. If you are not sure what this is, check with your web designer and they should be able to help. Most websites use a fav icon, which is a small image file that then shows up at the very top of the browser when someone is on your website. You should use a link to that file like you see below. Note that even after adding this, sometimes it can take a while to show up, so delete or refresh the cache of your browser or check incognito and it should show up. This is just a little ‘nice to have’ option.

    <link rel="icon" type="image/x-icon" href="https://meganvwalker.com/wp-content/uploads/2020/03/favicon.ico">

The next thing that can be done is adding in a different font. If you want more information on doing this, you can take a look at this post where I showed how to do it for marketing forms. After adding in links to Google Fonts, you can then use your new font in all areas of the form and simply update the CSS to use it.

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Lato&amp;display=swap" rel="stylesheet">

Now let’s move on to the CSS which I will share to give you a starting point. You can then adjust and change as needed. These first two elements already exist, but I’ve adjusted them. I’ve updated the background colour to be a light grey, and set the background of the main layout to remain white. I’ve also set the radius of the form layout to have rounded corners which is the border-radius.

        body,
        div {
            font-family: 'Lato', sans-serif;
            font-size: 14px;
            color: #000;
            background-color: #eeeeee;
        }
   [data-layout="true"] {
            margin: 0 auto;
            max-width: 600px;
            background-color: white;
            border-radius: 30px !important;
        }

The next one is a new element I added. This adds a bit of padding above the form, and also keeps the background of the form itself (not the main layout inside it) light grey.

 form {
            background: #eeeeee;
            padding-top: 4em;
        }

This might not be needed based on your own requirements, but I also wanted to adjust the paragraph text, so added this in to make it easier to adjust some of the text. This is a new element and doesn’t exist in the CSS out of the box.

        p {
            text-align: center;
            line-height: 2em;
        }

These two elements already exist, so find them and replace if you want to adjust the drop down for the person to pick their email or mobile phone number like I did. I’ve centred things, and put a yellow background on it to make it stand out. Just showing an example of what COULD be done, so ignore or adjust if it’s not quite right for your own requirements.

        div.contactPoint {
            font-size: 15px;
            font-weight: 500;
            line-height: 20px;
            background-color: #ffff0054 !important;
            padding: 10px 0 10px 0;
            text-align: center;
        }
        .preferenceCenterBlock select {
            padding: 6px 8px;
            background-color: #ffff0054 !important;
            border: 1px solid #e1dfdd;
            border-radius: 2px;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDYuNzA4OThMMC4xNDY0ODQgMC44NTU0NjlMMC44NTU0NjkgMC4xNDY0ODRMNiA1LjI5MTAyTDExLjE0NDUgMC4xNDY0ODRMMTEuODUzNSAwLjg1NTQ2OUw2IDYuNzA4OThaIiBmaWxsPSIjNjA1RTVDIi8+Cjwvc3ZnPgo=);
            background-repeat: no-repeat;
            background-position-x: 98%;
            background-position-y: center;
            appearance: none;
            text-align: center;
            width: 80%;
            margin: auto;
            font-family: 'Lato';
            font-size: 15px;
        }

That’s it! Make your changes, save your form and then check it out. Hopefully it looks more like this than the plain and non branded version you get originally for a Preference Centre.

---

Check out the latest post:
Auto Assign Leads Without Code Using Lead Scoring & Work Assignment

---

This is just 1 of 477 articles. You can browse through all of them by going to the main blog page, or navigate through different categories to find more content you are interested in. You can also subscribe and get new blog posts emailed to you directly.

---