5 Replies Latest reply on Mar 16, 2016 7:31 AM by Vishal Shirguppi

    Javascript for Subscription Center Unsubscribe Form

      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

        • Re: Javascript for Subscription Center Unsubscribe Form
          Sanford Whiteman
          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.
            • Re: Javascript for Subscription Center Unsubscribe Form
              Justin Norris

              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.

              8 of 8 people found this helpful
            • Re: Javascript for Subscription Center Unsubscribe Form
              Vishal Shirguppi

              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>