Hello I have this landing page for our subscription preference center:
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
Thanks!
Solved! Go to 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);
});
});
});
});
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 🙂
I'll get back to this tomorrow.
@SanfordWhiteman
Hi I don't want to be a pest but can you assist here ?
@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.
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);
});
}
});
});
});
Hi @SanfordWhiteman I have added the javascript you supplied to the template page and we are not seeing the behavior we wanted to see in the segments. The page works fine in our B2B segment form but not functioning on the B2C form.
I have uploaded them here:
B2B form:
https://drive.google.com/file/d/1APx6KkF0Zl2Nsqnnb_7fzglJgZMOnLsw/view?usp=sharing
B2C form:
https://drive.google.com/file/d/1_RHiosx0eOLAqkfqjMMhRtocLb_fjmVL/view?usp=sharing
I would absolutely love to finish this
I don't see my code at all on https://engage.livelyme.com/pc-b2b.html nor https://engage.livelyme.com/pc-b2c.html.
So the forms are just behaving as they typically would.
Make sure all pages have exactly the same code, the last version provided.
You are correct @SanfordWhiteman it is not on those pages. I created those pages so you could see the forms without having to match the segment that would display those forms on one page.
The page that has your code is here: https://engage.livelyme.com/preference-center.html
This page serves the form based on matching the segment: b2c, b2b or default (has no segment).
What I was showing you in the videos was the testing of them when a lead falls into the segment b2b or b2c and how it was not working for the b2c segment.
Does this help or do you need me to do something else here?
Please add the code to the other pages, because that's the only way to test — I don't have a way of simulating your segments.
Here is the b2b page with your code:
https://engage.livelyme.com/b2b-test.html
here is the b2c page with your code:
https://engage.livelyme.com/b2c-test.html
Default page:
https://engage.livelyme.com/default-test.html
Thank you!
Isn't it behaving the same way on all 3 of those pages? Looks like it to me.
As an individual form it works fine. When they are combined for some reason the checkboxes do not perform. Here is how I tested:
https://livelyme.com/blog/ sign up for the newsletter using this email: anastasia.reyes+b2c4@livelyme.com
go to this form and you should now be ana: https://engage.livelyme.com/test-b2c.html and try the checkboxes they work now open this form https://engage.livelyme.com/preference-center.html in the same incognito browser and you should still be ana but the checkboxes do not work properly and they are both using the same template with the same code you provided.
You can also test the same behavior for the b2b form by opening a new incognito browser and visiting https://livelyme.com/employer/ and sign up for the newsletter with this email: anastasia.reyes+b2btwo@livelyme.com then go to this form: https://engage.livelyme.com/test-b2b.html and you should be this new profile with b2b in the email and now go to this page https://engage.livelyme.com/preference-center.html in the same incognito browser you should be her and it works fine.
Thank you for taking the time to do this I do think it helps identify the issue we are facing
@SanfordWhiteman - Happy Monday by the way 🙂
As an individual form it works fine. When they are combined for some reason the checkboxes do not perform. Here is how I tested:
https://livelyme.com/blog/ sign up for the newsletter using this email: anastasia.reyes+b2c4@livelyme.com
go to this form and you should now be ana: https://engage.livelyme.com/test-b2c.html and try the checkboxes they work now open this form https://engage.livelyme.com/preference-center.html in the same incognito browser and you should still be ana but the checkboxes do not work properly and they are both using the same template with the same code you provided.
You can also test the same behavior for the b2b form by opening a new incognito browser and visiting https://livelyme.com/employer/ and sign up for the newsletter with this email: anastasia.reyes+b2btwo@livelyme.com then go to this form: https://engage.livelyme.com/test-b2b.html and you should be this new profile with b2b in the email and now go to this page https://engage.livelyme.com/preference-center.html in the same incognito browser you should be her and it works fine.
Thank you for taking the time to do this I do think it helps identify the issue we are facing
This page doesn't have the latest code:
https://engage.livelyme.com/preference-center.html
Pls recheck that all 3 pages have the same (latest) version. Maybe you forgot to reapprove?
Also, it's becoming a better idea to put this code in a separate JS file and upload it to Design Studio. Then just point all the pages to that shared file (i.e. <script src="https://engage.livelyme.com/rs/272-DPG-597/images/unsubscribe-behaviors.js"></script>). Then it's 100% guaranteed that the pages can't be out of sync.
By golly you were right I didn't have the latest code on the preference center page and it was because I did not approve it (OMG so sorry!)
The code works and has worked all along I am so sorry for this back and forth and SO GRATEFUL for your help. 🙌
OK! Glad that's cleared up.
Hold tight until tomorrow — I have a ton of "small" JS projects running simultaneously.
Thank you @SanfordWhiteman 🤗
@SanfordWhiteman hoping you can help me resolve this issue - not sure I have any hope of doing it myself.
You'll need to put up pages that show all the variations of the form.