Eloqua's Tip Tuesday: Managing Preference Centre checkbox behaviour

JodyMooney-Oracle

Welcome to “Tip Tuesday”! Each week we post interesting tips and tricks for Eloqua users, on Tuesdays. To see more Tip Tuesday posts, head here.

This week's tip has been shared by @Karen White-Oracle, CX Marketing, Consulting Manager.

Did you know that with a little bit of javascript, you can easily manage checkbox behaviour on unsubscribe/subscribe for your Preference Centre?

Do you have a Subscription/Preference Centre hosted on an Eloqua landing page with an Eloqua form?

Wouldn’t it be good if when someone unsubscribes, it unchecks their subscription preferences? And conversely, unchecks the unsubscribe checkbox if they check any of the subscription preferences?

Well, you can achieve this by simply adding some Javascript to your Eloqua landing page!

Here's how:

Go to the Settings/Code and Tracking section of the Landing Page and click Edit under Additional Javascript.

Add the Javascript below replacing the ‘optout’ value with the html name of your Unsubscribe form field:

document.addEventListener('DOMContentLoaded', function(event) {

   // Make array of all checkboxes except the unsubscribe one

   var checkboxes = document.querySelectorAll('input[type=checkbox]:not([name=optout])');

   // Loop through all checkboxes and ...

   for (i = 0; i < checkboxes.length; i++) {

       // ... give them a click trigger

       checkboxes[i].addEventListener("click", function() {

           if (this.checked == true) {

               // Uncheck unsubscribe checkbox

               document.querySelector('input[name=optout]').checked = false;

           }

       });

   }

 

   document.querySelector('input[name=optout]').onchange = function() {

       // access properties using this keyword

       if (this.checked) {

           // if checked ...

           var inputs = document.getElementsByTagName("input");

           for (index = 0; index < inputs.length; ++index) {

               if (inputs[index].type == "checkbox" && inputs[index].name != "optout") {

                   inputs[index].checked = false;

               }

           }

       } else {

           // if not checked ...

       }

   };

});

And that's it! With just a bit of Javascript, you can make it much easier to ensure your visitors preferences are kept up-to-date!

Thanks for this great tip, @Karen White-Oracle!

Have an Eloqua tip you would like to share for a future “Tip Tuesday” post? Drop me (@JodyMooney-Oracle) a message via Topliners with your tip including any relevant screenshots/links to help share your favorite tips with fellow Eloqua users? If your tip is selected, we’ll tag you in the post too!