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

[jenlively]

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

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

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-Unsubsc...

Thanks! 

[SanfordWhiteman · Accepted solution]

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);
          });
        });
     });
  });

[jenlively]

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]

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.

[jenlively]

@SanfordWhiteman THANK YOU! 😁

I have learned quite a bit trying to help out my demand gen team create this form. You and @Dave_Roberts are amazing and helpful and got me to a successful outcome- thanks!

[SanfordWhiteman]

'welcome.

[jenlively]

@SanfordWhiteman 

Looks like there is a bug on this page we created. The page loads 3 forms depending on your segment and on two of them we have this strangeness occurring:

https://www.loom.com/share/bb2d04220afb4edc87db5b309679bf3b

Hoping you can assist with this and thank you!

[SanfordWhiteman]

It's not a bug per se... the values in the unsubscribableDeps array are from the version of the form you first linked to. If there may be other fields, they should be added to unsubscribableDeps as well.

Then you need the check for dependencies to exit gracefully if a field doesn't exist at runtime:

     dependencies.forEach(function(dep){
        dep.primaries.forEach(function(primary){
          const depEl = formEl.querySelector("[name='" + primary + "']");
          if(!depEl) return;

          depEl.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);
          });
        });
     })

Not sure I would have different forms per segment, by the way.

A lot easier to manage a single form, then use a Hidden field for the segment and use Visibility Rules, based on that Hidden field's value, to manage other fields.

[jenlively]

@SanfordWhiteman I edited the code snippet with what you sent but that didn't work

The reason we didn't use one form is because when displayed the form field is the same but the label is different

So we have 6 fields (same) with different labels and here is the breakdown:

Field	B2B segment	B2C segment	Default
Subscription Monthly Newsletter	X	X	X
Subscription Personalized and Seasonal Content		X	X
Subscription Lively Products and News	X	X	X
Subscription Education and Insights	X	X	X
Subscription Sales Engagement	X		X
Unsubscribed	X	X	X

[jenlively]

@SanfordWhiteman hoping you can help me resolve this issue - not sure I have any hope of doing it myself.