Javascript for Subscription Center Unsubscribe Form

[Anonymous]

Hello all,

I know there have been a few discussions on this topic in the forums, but I haven't been able to find a direct answer.  We recently had a web develoepr build a subscription center for us that would be mobile responsive and incorporate javascript for unchecking subscriptions when the unsubscribe box is checked and vice versa.  It wasn't until I was in testing phases that I realized that pre-fill would not work because the form was embedded into the html of the Marketo template.

I am now rebuilding the subscription center and pulling in the form as a drag and drop element so that we can still use the pre-fill functionality.  How do I incorporate the javascript that the develoepr built for checking and unchecking subscriptions?  I have tried to put the script in a custom html box element on the landing page and also tried to incorporate it into a new template in which the form is not embedded.  I still cannot get it to function properly.

Any help would be much appreciated - here is some of the javascript:

                            //clear unsub checkbox if any sub is checked
                            $jQ("input#blogSubscription, input#promotionsSubscription, input#productSubscription").click(function(){
                                $jQ("input#Unsubscribed").prop("checked", false);

                            });
                      
                            //clear sub checkboxes if unsub is checked
                            $jQ("input#Unsubscribed").click(function(){
                                $jQ("input#blogSubscription, input#promotionsSubscription, input#productSubscription").prop("checked", false);
                            });
                      
                            //highlight whole email field on focus
                            $jQ("input#Email").focus(function(){
                                $jQ(this).on('mouseup', function(){
                                    $jQ(this).select();
                                });
                            });
                       
                            //validate at least one input
                            form.onValidate(function(){
                                var isValid = false;
                                $jQ("input#blogSubscription, input#promotionsSubscription, input#productSubscription, input#Unsubscribed").each(function(){
                                    if($jQ(this).is(':checked')){
                                        isValid = true;

Thanks,
Lan K

[SanfordWhiteman]

Well, obviously if the JS wasn't built with the Marketo Forms 2.0 API in mind, it is expecting to find elements that may or may not exist. 

Without actually seeing the full markup of your page and your converted form it is impossible to tell how to target the correct elements. How would we know whether 'INPUT#blogSubscription' refers to an element that exists in the DOM?

The general pointer I'd give you is that any form-related JS must be inside the MktoForms2.whenReady() event listener.  Only within that listener can you be sure the FORM and all its child elements exist on the page.

[Justin_Norris1]

I recently deployed a less technical solution to this problem that you may find does the trick for you: 

When the unsubscribe box is checked, use visibility rules in the form to hide all other subscription options. Optionally, show an "unsubscribe reason" field if you like.

When the form is submitted, run a campaign to uncheck all other subscription preferences.

Hiding the fields creates an equivalent if not preferable user experience, to my mind, of indicating that those subscriptions have gone away and can be done with the GUI editor, no code required. And if the user changes their mind and unchecks the "unsubscribe" box, all those existing subscriptions are retained.

[Anonymous]

Hi,

Just wanted to post a fairly easy method I used to implement this -

1. Embedded a webform in a marketo landing page

2. Added an HTML element to the page

3. Added JS in the HTML element to Uncheck the boxes if the "Global Unsubscribe" field is checked.

Note:

Add your code to  MktoForms2.whenReady(function (form) { }); as opposed to checking if the DOM is ready.

Here's a code snippet:

<script>

MktoForms2.whenReady(function (form) {                   

document.getElementById('Unsubscribed').onclick = function() {

    if ( this.checked ) {

document.getElementById("events").checked = false;

document.getElementById("webinarinvite").checked = false;

    } else {

     // Did not Globally Unsubscribe

    }

        }                

});

</script>

[Dagmar_Betz]

hi vishal,

I have tested your solution to check or uncheck all checkboxes for unsubscribing.

it doesn't work. I'm wondering how to give the signal to check and handle. that means, I would like to set an action onto the input field : onklick="nameOfFunction" . but this is not possible in marketo. so, how do I say the field that it should check?

it would be great if you could help.

regards,

dagmar

[Anonymous]

Hi Dagmar,

I am not a 100% sure if I understand your question. Can you post your code snippet here? That would be easier to debug.

Thanks,

Vishal