Hiding a ticket form on the 'submit a request' page

Answered

87 Comments

  • Paul Hughes

    Hi Ifra Saqlain

    I was never able to find the anchor tags, still stuck on the piece of hiding the forms from the homepage. Have you any other ideas of how I could achieve this?

    Kindest,

    Paul

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Just go to the homepage of your forms and right click > inspect > select on any form > you will get the anchor tag.

    Tell your all form name which you want to hide, I'll share the code then you need to add as it is.

    Finally I'm thinking that send your HC credential on my personal mail id and tell exact query then I'll do that by myself at night after that you can change the password.

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Paul H

    Please, Add the below code at the bottom of your script.js file

      
    var formToRemove = ['5550538483484'];
    function removeForm() {
      $('.nesty-panel').on('DOMNodeInserted', function(e){
          for(var i in formToRemove) {
            for (var c in HelpCenter.user.organizations) {
                if(HelpCenter.user.organizations[c].name === "student"){
                $('li#' + formToRemove[i]).hide();
                } 
            }
            }
           });
      };
     removeForm();

    Let me know if it solves your issue

     

    Thank You 

    Pulkit

    Team Diziana

    0
  • Paul Hughes

    Hi Ifra Saqlain,

    Thanks for all your help, as I'm using SSO I'm not able to get you access to our Zendesk portal, but thank you for the offer. 

    I don't see any from ID anchor tag in my console on homepage. If im looking in the wrong place maybe you could let me know. 

    <a class="list-group-item list-group-item-action p-4" href="/hc/en-ie/requests/new?ticket_form_id=7446275690524">
                <div class="media align-items-center">
                  <div class="media-body font-semibold">
                   Digital Learning
                  </div>
                  <svg class="svg-icon fill-current text-primary ml-2" viewBox="0 0 190 323" xmlns="http://www.w3.org/2000/svg">
                    <path d="M190,162 C190,168 187,174 183,178 L38,317 C34,321 28,323 23,323 C17,323 11,321 7,317 C-2,308 -2,294 7,285 L135,162 L7,39 C-2,31 -2,16 7,7 C15,-2 29,-2 38,7 L183,146 C187,150 190,156 190,162 Z"></path>
                  </svg>
                </div>
              </a>
    0
  • Paul Hughes

    Hi Pulkit Pandey

    Thanks for the code, it works on the nesty panel thanks you but not on the forms i have located on my requests page. 

    The forms are just url in anchors that bring the user to the form nesty panel. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Paul Hughes

    Copy the code and paste it and see homepage:

    $(window).on('load', function() {
     var i = 0;
     var checkExist = setInterval(function() {
     i++;
     if ($("a.nesty-input").length){
     clearInterval(checkExist);
     $("a.nesty-input").each(function() {
     $(this).bind( "click", function() {
     for (var c in HelpCenter.user.organizations) {
     if (HelpCenter.user.organizations[c].name === "Students"){
     $("#7446275690524").remove();
     } 
     
     //reserve space for additional organizations 
     }
     
     });
     });
     }
     if (i > 10){
     clearInterval(checkExist);
     }

     }, 100);

    // Hide form from Homepage   
      
    if (window.location.href.indexOf("?ticket_form_id") > -1) {
     for (var c in HelpCenter.user.organizations) {
    if (HelpCenter.user.organizations[c].name === "Students"){
          console.log("yes!");
        } else {
      var _x = $(".list-group > a[href*='7446275690524']").remove();
        }
    }
    }
    });

     

    You have anchor tag in code in your inspect element tab:

    <a class="list-group-item list-group-item-action p-4" href="/hc/en-ie/requests/new?ticket_form_id=7446275690524">

                <div class="media align-items-center">

                  <div class="media-body font-semibold">

                   Digital Learning

                  </div>

                  <svg class="svg-icon fill-current text-primary ml-2" viewBox="0 0 190 323" xmlns="http://www.w3.org/2000/svg">

                    <path d="M190,162 C190,168 187,174 183,178 L38,317 C34,321 28,323 23,323 C17,323 11,321 7,317 C-2,308 -2,294 7,285 L135,162 L7,39 C-2,31 -2,16 7,7 C15,-2 29,-2 38,7 L183,146 C187,150 190,156 190,162 Z"></path>

                  </svg>

                </div>

              </a>

     

    See the anchot tag and it has form ID:  7446275690524

    <a class="list-group-item list-group-item-action p-4" href="/hc/en-ie/requests/new?ticket_form_id=7446275690524">

    This form ID 7446275690524 is your Digital Learning form. So your Digital Learning form will hide on homepage if this form organisation is Students else it won't hide.

    You can copy this id and add it to your script code and then test.

     

    Another way is,

    tell the form's name with it's organizations which you wanna hide on homepage, so I'll share the right code as per your requirements.

     

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Paul H

    Please, replace the previous code which I shared with the current one 

      function removeForm() {
           for (var c in HelpCenter.user.organizations) {
             if(HelpCenter.user.organizations[c].name === "Students") {
               $(".list-group a[href*='7446275690524']").hide();
             }
           else if(HelpCenter.user.role === 'anonymous') {
             $(".list-group a[href*='7446275690524']").hide();
           }
             
             else {
                $(".list-group a[href*='7446275690524']").show();
             }
         }
      };
      removeForm();

    Let me know if it solves your issue

     

    Thank you 

    Pulkit

    Team Diziana

    0
  • Paul Hughes

    Hi Ifra Saqlain and Pulkit Pandey

    I have used both your code and it appears I'm getting closer to getting this working, so thank you both. 

    I had to create two sections of code, one above the other, all seems to be working, its hiding the forms from students and anonymous users on both the homepage and nesty. 

    The only issue I'm facing now is the form is showing on the homepage for staff users which is correct as I have not hidden it from staff users, but its hiding the form in the nesty panel for staff users, which is not correct. 

    This has something to do with Part 2 of the code, any ideas what this might be?

    Part 1 - Hiding the Form on the homepage from Anonymous users/ Works perfect.

    // Hide the forms from Anonymous Users    
        
    $(document).ready(function () {

    if (HelpCenter.user.role=="anonymous") {
    // Hide the graduation form from Homepage    
        
    if (window.location.href.indexOf("?ticket_form_id") > -1) {
          console.log("yes!");
        } else {
          var _x = $(".list-group > a[href*='7446275690524']").remove();
        }
    }


    //Code for some specific ticket forms -- Start

    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){
    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };

    if (HelpCenter.user.role=="anonymous") {
    removeTagsWeDontWant();
    }
    // End

    });  

    Part 2 - Hiding the Form from users with the oganisation name = Students

    // Hide the forms from users with Orgnaisation name "Students"        
        
    function removeForm() {
           for (var c in HelpCenter.user.organizations) {
             if(HelpCenter.user.organizations[c].name == "Students") {
               $(".list-group a[href*='7446275690524']").hide();
             }
          
             else {
                $(".list-group a[href*='7446275690524']").show();
             }
         }
      };
      removeForm();    
        
        
     // Hide the graduation form from Nesty Panel    
       
         for (var c in HelpCenter.user.organizations) {
     if(HelpCenter.user.organizations[c].name == "Students") {
     } 
        
    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){

    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };
    removeTagsWeDontWant(); 
      
    }   

    Together

    // Hide the forms from Anonymous Users    
        
    $(document).ready(function () {

    if (HelpCenter.user.role=="anonymous") {
    // Hide the graduation form from Homepage    
        
    if (window.location.href.indexOf("?ticket_form_id") > -1) {
          console.log("yes!");
        } else {
          var _x = $(".list-group > a[href*='7446275690524']").remove();
        }
    }


    //Code for some specific ticket forms -- Start

    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){
    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };

    if (HelpCenter.user.role=="anonymous") {
    removeTagsWeDontWant();
    }
    // End

    });     
        
    // Hide the forms from users with Orgnaisation name "Students"        
        
    function removeForm() {
           for (var c in HelpCenter.user.organizations) {
             if(HelpCenter.user.organizations[c].name == "Students") {
               $(".list-group a[href*='7446275690524']").hide();
             }
          
             else {
                $(".list-group a[href*='7446275690524']").show();
             }
         }
      };
      removeForm();    
        
     // Hide the graduation form from Nesty Panel    
       
         for (var c in HelpCenter.user.organizations) {
     if(HelpCenter.user.organizations[c].name == "Students") {
     } 
        
    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){

    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };
    removeTagsWeDontWant(); 

    }   

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Paul once try this, remove all code which have shared above and add the below code:

    // Hide the forms from Anonymous Users    
        
    $(document).ready(function () {
       for (var c in HelpCenter.user.organizations) {
             if(HelpCenter.user.organizations[c].name == "Students") {
    if (HelpCenter.user.role=="anonymous") {
    // Hide the graduation form from Homepage    
        
    if (window.location.href.indexOf("?ticket_form_id") > -1) {
          console.log("yes!");
        } else {
          var _x = $(".list-group > a[href*='7446275690524']").remove();
        }
    }


    //Code for some specific ticket forms -- Start

    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){
    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };

    if (HelpCenter.user.role=="anonymous") {
    removeTagsWeDontWant();
    }
    // End
         }
       }
    });  

    0
  • Paul Hughes

    Hi Ifra Saqlain

    No that didn't work for me, its not hiding homepage form or nesty form now. I'm conscious I've used a lot of your time now so thank you. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Try this:

    // Hide the forms from Anonymous Users    
        
    $(document).ready(function () {

    if (HelpCenter.user.role=="anonymous") {
    // Hide the graduation form from Homepage    
        
    if (window.location.href.indexOf("?ticket_form_id") > -1) {
          console.log("yes!");
        } else {
          var _x = $(".list-group > a[href*='7446275690524']").remove();
        }
    }


    //Code for some specific ticket forms -- Start

    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){
    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };

    if (HelpCenter.user.role=="anonymous") {
    removeTagsWeDontWant();
    }
    // End

    });     
        
    // Hide the forms from users with Orgnaisation name "Students"        
        
    function removeForm() {
           for (var c in HelpCenter.user.organizations) {
             if(HelpCenter.user.organizations[c].name == "Students") {
               $(".list-group a[href*='7446275690524']").hide();
             }
          
             else {
                $(".list-group a[href*='7446275690524']").show();
             }
         }
      };
      removeForm();    
        
     // Hide the graduation form from Nesty Panel    
       
         for (var c in HelpCenter.user.organizations) {
     if(HelpCenter.user.organizations[c].name == "Students") {
    var tagsToRemove = ['7446275690524'];  //special form ID

    function removeTagsWeDontWant() {
    $('.nesty-panel').on('DOMNodeInserted', function(e){

    for(var i in tagsToRemove) {
    $('li#' + tagsToRemove[i]).remove();
    }
    });
    };
    removeTagsWeDontWant(); 

    }  
    1
  • Paul Hughes

    Ifra Saqlain That's worked, thank you for all your time and patience on this. 

    Hopefully now for anyone coming along that wants to use the forms on the home page and also in the nesty panel this code will help them.

    I don't like the look of the nesty panel alone hence why I use the links to forms on homepage, its much cleaner. 

    The fact that we can hide a from from Anonymous users and also Organisation Users is fantastic so well done for your work on this, this is going to be a big game changer for how I arrange my forms, and for anyone else looking to use this solution. 

    Thanks to Pulkit Pandey also for your piece at the end. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Finally you got it done!

    1
  • Alyssa

    Hi folx!

    I had previously used this solution, however, we've opted to use Zenplates which uses vanilla Javascript and not jQuery. Ifra Saqlain do you possibly have a solution for hiding ticket forms using vanilla Javascript? Appreciate any help our resources you can share! 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Alyssa, here is a post for same query you are asking for:

    https://support.zendesk.com/hc/en-us/community/posts/5050937568666-Prefill-and-hide-Subject-Description-fields-of-specific-form-on-New-Request-Template

    There is JS instead of jQuery, please take a look at it.

    If any query feel free to ask :)

    Thanks

     

    0
  • Gavin

    Hello.

    I successfully used these instructions to remove my form from the form-selection-list.

    https://support.zendesk.com/hc/en-us/community/posts/4409217680410/comments/4409692632474

    However the form still appears in the Web Widget as a selectable form.  How can I remove it from the Web Widget, also?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Gavin・ギャビン,

     

    You can do like this, I have 6 forms but I want to show two forms in my web widget so I added the IDs only for two forms:

    window.zESettings = {
      webWidget: {
        contactForm: {
          ticketForms: [
             { id: 360003074611},
             { id: 360001547211},
          ]
        }
      }
    };



    Output:


    { id: 360003074611},
    { id: 360001547211},

    These both are my form's Ids which I wanna show.


     

     

    0
  • Gavin

    Thanks Ifra Saqlain

    Does this go into the script.js file?

    What if we want to do the inverse?  We have about a dozen forms, and only want to hide one or two of them.  Is there a way to say "hide these forms" instead of "show these forms"?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Gavin・ギャビン, I understand your concern  but I took the reference from here:

    https://developer.zendesk.com/api-reference/widget/settings/

     

    and I haven't other idea instead of this so I shared this with you.

     

    Yes, this code is added to script.js file.

    0
  • PBJ

    My case isn't exactly what's being described here, but I think you all may be able to help me.

    I need to hide a ticket form from the New Request page's source. The solutions shared here are excellent at hiding ticket forms from the New Request form dropdown via Javascript, but Javascript loads after the fact - which means all of those hidden forms are still plainly visible via the page source, even if they're not in the dropdown.

    My company tests beta software so I need to hide those hidden forms from every possible vector (and a page's source is always just a click away), but I can't find a way to remove form links/IDs from the page source. I've determined this all comes back to the "{{request_form wysiwyg=true}}" helper, but any attempts to remove it or recreate the New Request page without it results in all ticket forms breaking entirely. 

    Anybody know how I can plug this leaky helper?

    0
  • Hannah Lucid

    Ifra Saqlain Saqlain, is there a way to hide a form tile in the Guide? I tried using the coding above and was not able to remove this from our support portal:

     

    https://rpmtest.zendesk.com/hc/en-us

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Hannah Lucid :)

    Your form tiles have a unique id in the code:

     

     

    So, pick a class-name which tile you wanna hide as I'm selecting second form:

     

     

     

    Copy the class name of second form tile:

     

    seconf form-tile class-name : id-1260813066549

     

    Now, go to the source files and add CSS code to your style.css file at the bottom, your form title will be hide

    .id-1260813066549 { 
    display:none
    }

     

    Any form tile you wanna hide, just pick the class-name and hide via CSS as I did above.

     

    Or, If you wanna hide your tile from specific users so you can do like this:

    Go to your script.js file and add the given code at the bottom area.

    if(HelpCenter.user.role == 'anonymous') {
    document.querySelector(".id-7333832645403, .id-9228149361307, .id-1260813066549").style.display = "none";
    }



    OR


    if(HelpCenter.user.role == 'anonymous') {
    document.querySelector(".id-7333832645403").style.display = "none";
    document.querySelector(".id-9228149361307").style.display = "none";
    document.querySelector(".id-1260813066549").style.display = "none";
    }

     

     

    If any confusion feel free to ask :)

    Thanks

     

    2
  • Hannah Lucid

    Ifra Saqlain that worked. You are AWESOME.

    0
  • Gavin

    Ifra Saqlain

    I have been able to hide a ticket from from the drop-down selector using the following code...

    $(document).ready(function (){

      //Code for some specific ticket forms -- Start
      
      var tagsToRemove = ['16792736785805']; //special form ID
      
      function removeTagsWeDontWant() {
        $('.nesty-panel').on('DOMNodeInserted', function(e){
          for(var i in tagsToRemove) {
            $('li#' + tagsToRemove[i]).remove();
          }
        });
      };
    removeTagsWeDontWant();

    HOWEVER - this is now generating a "deprecated" error in the Chrome browser console...

    jquery.min.js:2 [Violation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event.
    This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser.
    Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility.
    Consider using MutationObserver instead.

    I see the recommendation is to use MutationObserver instead, however I'm not skilled enough to implement this on my own.  Do you have updated recommended code to hide a form?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Gavin,

    I have read your query.

    Closing brackets are missing at the end of code, please add the  brackets and then still you get the same issue please let me know.

    $(document).ready(function (){

      //Code for some specific ticket forms -- Start
      
    var tagsToRemove = ['16792736785805']; //special form ID
      
      function removeTagsWeDontWant() {
        $('.nesty-panel').on('DOMNodeInserted', function(e){
          for(var i in tagsToRemove) {
            $('li#' + tagsToRemove[i]).remove();
          }
        });
      };
    removeTagsWeDontWant();
    });

     

     

     

    Thanks

     

    0
  • Ester Marlasca

    Hi, can the form be hidden depending on the url locale (language and country)? I.e. I want customers from Spain to only see form 1, customers from France to only see form 2, etc.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Ester,

    use the given code:

    $(document).ready(function (){
      var currentLanguage = $('html').attr('lang').toLowerCase();
    if(currentLanguage === "es-es") {
      //Code for some specific ticket forms -- Start
      
    var tagsToRemove = ['000000000000000']; //special form ID
      
      function removeTagsWeDontWant() {
        $('.nesty-panel').on('DOMNodeInserted', function(e){
          for(var i in tagsToRemove) {
            $('li#' + tagsToRemove[i]).remove();
          }
        });
      };
      

    removeTagsWeDontWant();
       
     }
    });


    Note: 000000000000000 remove this and add your form ID which you wanna hide.

     

    If any issues feel free to ask :)

    Thanks

     

     

    1

Please sign in to leave a comment.

Powered by Zendesk