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

Hi Paul, you can try the above solution, use form-tag instead of form-id as Jahn Bronilla did. He hides their forms from non-authenticated users. You can do like this-

if (HelpCenter.user.role=="anonymous") {  -- This condition is for anonymous (non-authenticated) 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*='5550538483484']").remove();
    }
}


//Code for some specific ticket forms -- Start

var tagsToRemove = ['Form-Tag-Name', 'Form-Tag-Name'];  //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

});

And if you have another way you can share with us, it's good to share ideas :)

Hi @ifra,

I think there's some confusion, I am already using the code below which hides the forms from non-authenticated users and its working fine. 

My question is can I also hide them from users groups based on Tags? Is there a way to hide stuff from Tagged accounts? Or a way for me to actually make user roles that would then be linked to a tag? 

I want to hide these forms from both anonymous users and a certain tagged group in zendesk?

I will play around with the code and see if I can restrict forms from tagged user using:

if (HelpCenter.user.tags=="student") or something similar, I just thought you might know a way

$(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

});

Hey Paul, actually I didn't try but I'll and get back to you with the solution :) for you.

Hi @ifra,

I'm wondering if you ever found a solution for my last query? I want to hide these forms from both anonymous users and a certain tagged group in Zendesk but not sure if its possible. I haven't had any luck with the code myself. 

Hi Paul,

Use the given code, add tag name:

$(document).ready(function () {

console.log(HelpCenter);


if (HelpCenter.user.role=="anonymous" || HelpCenter.user.tags == "YOUR TAG NAME") {
// 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();
}
});
};
removeTagsWeDontWant();

// End
}   
});

Check your console to get name of user tags via this line of code:

console.log(HelpCenter);

Hope it helps.

Hi @ifra

Unfortunately that didn't work for me but I think the reason is because no tags are being applied to my users, well at least under the console they are not.

if (HelpCenter.user.role=="anonymous" || HelpCenter.user.tags == "USERS DIDNT HAVE TAGS UNDER CONSOLE")

However under the organization there is users and tags.I seen another forum showing how to add in a organisation name, I tried adding this line but it didnt work: 

if (HelpCenter.user.role=="anonymous" || HelpCenter.user.organizations[c].name == "Students") {

I think if I can add in organizations users here this will work but the code I tried didn't work, I think I'm again missing something. Thanks for all your help on this, if you see something im doing wrong please let me know. 

My CONSOLE:

1. organizations: Array(1)
1. 0:
1. isShared: false
2. name: "Students"
3. tags: ['student']
4. [[Prototype]]: Object
2. length: 1
3. [[Prototype]]: Array(0)
2. role: "end_user"
3. tags: Array(0)

Current code:

 $(document).ready(function () {

console.log(HelpCenter);

if (HelpCenter.user.role=="anonymous" || HelpCenter.user.tags == "USERS DIDNT HAVE TAGS UNDER CONSOLE") {
  
// 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();
}
});
};
removeTagsWeDontWant();

// End
}   
   
});  

Hello Paul, see you have students tag in your console. change this in the if condition;

Try the below line of code and remove previous.

if (HelpCenter.user.role=="anonymous" || HelpCenter.organizations.tags == 'student') {

Hi @ifra

I had tried that already, I tried a couple of combinations but none worked. Even though in the console this is a organization tag that line of code still does not hide it. 

I was browsing and found this article below, and a piece of code I found actually does hide forms from students, but this code only shows how to how from the nesty input. I also want to hide on the home page. I tried using some of this code in my current code but no joy.  

Example: (HelpCenter.user.organizations[c].name === "Students")

https://support.zendesk.com/hc/en-us/articles/4408886229146?page=2#comments 

$(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);
});

So try this:

currently you have this:

$(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);
});

try this new snippet instead of above:

$(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*='Form ID FROM CONSOLE']").remove();
    }
}
}
});




Copy form ID from anchor tag in your console on homepage.

Hi @ifra

I have got through the console and code and don't seem to have any anchor tags, I'm assuming these are hidden, I'm not sure how to find these but I will keep trying. 

Hi @ifra

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

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.

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

Hi @ifra,

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. 

Hi @pulkit12

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. 

@paul52

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.

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

Hi @ifra and @pulkit12

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(); 

}   

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
     }
   }
});  

Hi @ifra

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. 

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(); 
 } 
}  

@ifra 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 @pulkit12 also for your piece at the end. 

Finally you got it done!

Hi folx!

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

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