Subscription Center: how to select either unsubscribe or other, but not both

[Anonymous]

I created this subscription center: http://pages.yourmembership.com/communication-preferences.html ​but I don't know how to prevent someone from checking all boxes including unsubscribe. If they select unsubscribe and one or more other options, will unsubscribe override the other selections? Is there a way to deselect the other options if unsubscribe is checked? Thanks!

[John_Clark1 · Accepted solution]

Hi Pia,

Even if they have another box checked, the Unsubscribe from all (as long as it's mapped to your standard Unsubscribed field) will override it.  Leads will not be sent non-operational emails from your instance if they are unsubscribed, no matter what their other preferences are.

If you want the boxes to react to each other then you'll need to have some custom javascript on the page.

John

[Josh_Hill13]

If someone does check unsubscribe=T, then you should have a flow that unchecks their other opt ins....especially if you don't bother with the javascript. I believe that script is floating around on the forums, but you can have your web team do that for you.

[Grégoire_Miche2]

Hi Pia,

We had the exact same discussion a while ago and if you want this to happen visually on the screen you will have to add some JS on the landing page.

Sanford Whiteman​ came with a very elegant and short JS that does the trick :

MktoForms2.whenReady(function(form) {

        var formEl = form.getFormElem()[0];

        // array of element collections, each collection defined by CSS selectors string

        // collections are mutually exclusive -- multiple selections are possible *within* a collection, but only one collection is allowed to have > 0 selections 

        var mutexCollectionsSelectors = ['#VIP__c, #Email_was_deleted__c', '#ContactReq__c'],

                mutexCollectionsEls = [];

        // get string selectors into collections

        mutexCollectionsSelectors.forEach(function(selectors, idx) {

                mutexCollectionsEls.push(formEl.querySelectorAll(selectors));

        });

        // iterate collections, attaching evt listeners that will scan all foreign collections on click

        Array.prototype.forEach.call(mutexCollectionsEls,function(collection, idx) {

                Array.prototype.forEach.call(collection, function(el) {

                        el.addEventListener('click', function(e) {

                                Array.prototype.forEach.call(mutexCollectionsEls,function(collection, iidx) {

                                        idx == iidx || Array.prototype.forEach.call(mutexCollectionsEls[iidx], function(el) {

                                                el.checked = false;

                                        });

                                });

                        });

                });

        });

});

The line that start with "var mutexCollectionsSelectors" will enable you to identify mutually exclusive fields, identified by ID.

-Greg

[Anonymous]

This is so helpful. Thank you so much!