I apologize for the crazy title. I wasn't really sure how to word this question!
We are creating a preference center right now. There will be four email types to select from as well as a global unsubscribe option. All of these fields will appear as checkboxes. I am trying to figure out a way to make the four options automatically uncheck if someone checks off the global unsubscribe option. I know I can create a visibility rule to hide those fields if the global unsubscribe is checked, but that doesn't uncheck those options. Is there a way to do this without having to use javascript?
JD
Search the Community. I put up a demo of this within the past 30 days. But no, you can't do it without JS.
Hey Sanford - I searched the community, but I wasn't able to find your demo. Would you be able to paste the link in a reply?
Thanks Robb - I can't believe the only way to currently do this is with JS. Hopefully your idea will get someone's attention at Marketo.
In the meantime, you can process this request within a smart campaign, rather than at the form level. So if someone selects "unsubscribe from all", your smart campaign would set the values of the other checkboxes to false. From a user experience perspective, this isn't ideal (since the other checkboxes will still be checked) - but at least their preferences will be properly reflected in Marketo.
Nice suggestion but obviously this doesn't give the visual feedback that they are performing a global action. Similarly, they may not pay attention and just go down the list checking numerous items.
The other way to do it would be to put in a separate set of radio buttons that would tie to visibility rules. Still not ideal, but it's an option.
Agree - that's what I referred to by "user experience". I'm all for this idea.
Hey Dan - I've already got that set up. One of my co-workers was actually able to figure out how to get this to work with JS, but it's presented a different problem. Instead of inserting the custom form onto a landing page, we inserted custom HTML with the JS script. The checkboxes now function as we want them to, but the pre-fill seems to not be working. When I visit that landing page, my email address isn't stored and the options I am subscribed to are not checked off.
Here's the HTML:
<script src="//app-sjo.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1072"></form>
<script>MktoForms2.loadForm("//app-sjo.marketo.com", "391-FAD-749", 1072);</script>
<script>
MktoForms2.whenReady(function(form){
var formEl=form.getFormElem()[0],
unsubscribeField='unsubscribefromAllEmails',
unsubscribeEl=formEl.querySelector('#'+unsubscribeField),
checkboxEls=formEl.querySelectorAll('INPUT[type="checkbox"]');
unsubscribeEl.onclick = function(e){
Array.prototype.forEach.call(checkboxEls,function(itm){
if (itm !== unsubscribeEl && unsubscribeEl.checked) itm.checked = false;
});
}
});
</script>
Is the form embedded on a non-Marketo LP? If so, pre-fill doesn't work (out-of-the-box) for embedded forms.