SOLVED

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

Go to solution
jenlively
Level 2

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

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! 

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

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

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

View solution in original post

36 REPLIES 36
SanfordWhiteman
Level 10 - Community Moderator

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

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

View solution in original post

jenlively
Level 2

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

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 - Community Moderator

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

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
Level 2

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

@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
Level 10 - Community Moderator

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

'welcome.
jenlively
Level 2

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

@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
Level 10 - Community Moderator

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

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
Level 2

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

@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
Level 2

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

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