Subscription Preference Center Page Forms and Unchecking All Checkboxes on Select of Unsubscribe from All | Community
Skip to main content
Level 3
March 18, 2021
Solved

Subscription Preference Center Page Forms and Unchecking All Checkboxes on Select of Unsubscribe from All

  • March 18, 2021
  • 1 reply
  • 8825 views

Hello I have this landing page for our subscription preference center:

engage.livelyme.com/preference-center-jennifer.html?mkt_unsubscribe=1&mkt_tok=[…]TYyQVo0b1RxVDFYRzU3OHB3NGZUS05jZlVmQTl0Sm4yR0lBVys3czRCTCJ9

 

When someone adds a new, additional subscription it all works as expected but when you select the last option to unsubscribe from all we want the checks in the boxes above to disappear. How can this be accomplished?

 

I should add that I did add the JS that @SanfordWhiteman suggested (wrote?) in this post but it is not working:

https://codepen.io/figureone/pen/JKvRQv?editors=0010

https://nation.marketo.com/t5/Product-Discussions/Marketo-Form-Uncheck-other-checkboxes-when-Unsubscribe-from-all/m-p/298938#M168558

 

Thanks! 

Best answer by SanfordWhiteman

That code requires you to set up the form in a specific way, which your form doesn't conform to.

 

For your particular situation you want

MktoForms2.whenReady(function(mktoForm){ const formEl = mktoForm.getFormElem()[0]; const unsubscribeTrigger = "Unsubscribed", unsubscribableDeps = [ "subscriptionSalesEngagement", "subscriptionEducationandInsights", "subscriptionLivelyProductsandNews", "subscriptionPersonalizedandSeasonalContent", "subscriptionMonthlyNewsletter" ]; const dependencies = [ { primaries : [unsubscribeTrigger], cascadeSecondaries : unsubscribableDeps .map(function(unsubscribable){ return { field : unsubscribable, negate : true, filterPrimaryValues : ["yes"] } }) }, { primaries : unsubscribableDeps, cascadeSecondaries : [ { field : unsubscribeTrigger, negate : true, filterPrimaryValues : ["yes"] } ] } ]; const mktoNegations = { "yes" : "no", "no" : "yes" }; dependencies.forEach(function(dep){ dep.primaries.forEach(function(primary){ formEl.querySelector("[name='" + primary + "']").addEventListener("click",function(){ const primaryValue = mktoForm.getValues()[primary]; const mktoFormsObj = dep.cascadeSecondaries .filter(function(fieldDesc){ return fieldDesc.filterPrimaryValues.indexOf(primaryValue) != -1; }) .reduce(function(acc,nextField){ acc[nextField.field] = nextField.negate ? mktoNegations[primaryValue] : primaryValue; return acc; },{}); mktoForm.setValues(mktoFormsObj); }); }); }); });

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
March 18, 2021

That code requires you to set up the form in a specific way, which your form doesn't conform to.

 

For your particular situation you want

MktoForms2.whenReady(function(mktoForm){ const formEl = mktoForm.getFormElem()[0]; const unsubscribeTrigger = "Unsubscribed", unsubscribableDeps = [ "subscriptionSalesEngagement", "subscriptionEducationandInsights", "subscriptionLivelyProductsandNews", "subscriptionPersonalizedandSeasonalContent", "subscriptionMonthlyNewsletter" ]; const dependencies = [ { primaries : [unsubscribeTrigger], cascadeSecondaries : unsubscribableDeps .map(function(unsubscribable){ return { field : unsubscribable, negate : true, filterPrimaryValues : ["yes"] } }) }, { primaries : unsubscribableDeps, cascadeSecondaries : [ { field : unsubscribeTrigger, negate : true, filterPrimaryValues : ["yes"] } ] } ]; const mktoNegations = { "yes" : "no", "no" : "yes" }; dependencies.forEach(function(dep){ dep.primaries.forEach(function(primary){ formEl.querySelector("[name='" + primary + "']").addEventListener("click",function(){ const primaryValue = mktoForm.getValues()[primary]; const mktoFormsObj = dep.cascadeSecondaries .filter(function(fieldDesc){ return fieldDesc.filterPrimaryValues.indexOf(primaryValue) != -1; }) .reduce(function(acc,nextField){ acc[nextField.field] = nextField.negate ? mktoNegations[primaryValue] : primaryValue; return acc; },{}); mktoForm.setValues(mktoFormsObj); }); }); }); });
jenlivelyAuthor
Level 3
March 18, 2021

Hi @sanfordwhiteman I am grateful for your help. I have implemented the code and the checkboxes that are checked are not unchecking when I select unsub from all.

SanfordWhiteman
Level 10
March 19, 2021

On a Marketo LP, a custom form behaviors <script> needs to be placed just before the closing </body> tag. You have it too high up in the body, so as you can see from the error in the F12 console, the MktoForms2 object doesn't exist yet.