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

[jenlively]

@SanfordWhiteman 

Any chance we could tackle this using the javascript? The team is having trouble getting the form set up this way. The link is:

https://engage.livelyme.com/preference-center.html

And the exclusions can be found here:

[SanfordWhiteman]

OK I guess, but still need a page with all 3 variants of the form.

[jenlively]

Hi @SanfordWhiteman 

I don't think I can put more than one form on a page so I created 3 pages with these forms in them:

https://engage.livelyme.com/pc-b2b.html

https://engage.livelyme.com/pc-b2c.html

https://engage.livelyme.com/preference-center.html

The last link /preference-center.html you will see the default experience and the javascript you provided me previously.

I wish I knew marketo better to get the single form implemented correctly but I think I have exhausted enough of your time and would like to just get this form launched out in the wild.

Thanks very much 🙂

[jenlively]

Hi @SanfordWhiteman 

I don't think I can put more than one form on a page so I created 3 pages with these forms in them:

https://engage.livelyme.com/pc-b2b.html

https://engage.livelyme.com/pc-b2c.html

https://engage.livelyme.com/preference-center.html

The last link /preference-center.html you will see the default experience and the javascript you provided me previously.

I wish I knew marketo better to get the single form implemented correctly but I think I have exhausted enough of your time and would like to just get this form launched out in the wild.

Thanks very much 🙂

[SanfordWhiteman]

I'll get back to this tomorrow.

[jenlively]

Thank you @SanfordWhiteman 🤗

[jenlively]

@SanfordWhiteman 

Hi I don't want to be a pest but can you assist here ?

[jenlively]

@SanfordWhiteman I know you are probably not my biggest fan right now. I really would appreciate your help and already started to work with our folks to get you a link to pick out some cool swag for yourself. I am truly grateful for your help here.

[SanfordWhiteman]

Hold tight until tomorrow — I have a ton of "small" JS projects running simultaneously.

[SanfordWhiteman]

Put this same code on all pages:

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){
        if(!Array.isArray(dep.primaries)){
          dep.primaries = [dep.primaries];
        }

        dep.primaries.forEach(function(primary){
          const primaryEl = formEl.querySelector("[name='" + primary + "']");
          
          if(primaryEl){
            primaryEl.addEventListener("click",function(){
              const currentValues = mktoForm.getValues(),
                    primaryValue = currentValues[primary];

              if(!Array.isArray(dep.cascadeSecondaries)){
                dep.cascadeSecondaries = [dep.cascadeSecondaries];
              }

              const mktoFormsObj = dep.cascadeSecondaries
                .filter(function isMatchedPrimary(fieldDesc){
                   return fieldDesc.filterPrimaryValues.indexOf(primaryValue) != -1;
                })
                .filter(function isOnForm(fieldDesc){
                   return fieldDesc.field in currentValues;
                })
                .reduce(function assembleFinal(acc,nextField){                       
                  acc[nextField.field] = nextField.negate ? mktoNegations[primaryValue] : primaryValue;
                  return acc;
                },{});

              mktoForm.setValues(mktoFormsObj);
            });
          }
        });
     });
  });