Create a customized support experience by presenting only relevant tickets forms to your customers on your help center. In this tutorial you'll learn how to hide specific ticket forms based on a user's organization.
The workflow includes the steps below.
This workflow doesn't work for unauthenticated users or users who don't have an organization. For these users, all the forms will display.
If your theme uses Guide Templating V2, you must import jQuery. For full details, see the article: Importing or upgrading jQuery.
Step 1: Find the ticket form ID
- In your ticket forms, open the appropriate ticket form
- In the URL, find the ID number, after the last slash
Step 2: Find the organization name
- In Support, open the Customers tab
- Browse or search for organizations to find the right organization name
Step 3: Edit the JavaScript
If your theme uses Guide Templating V2, you must import jQuery. For full details, see the article: Importing or upgrading jQuery. The code relies on the DOMNodeInserted Mutation Event. Newer versions of Chrome and Chromium have ended support for this mutation event. To be compatible with browsers that do not support DOMNodeInserted, follow the Mutation Observer guidance and migrate to a newer function.
- In Guide, click the Customize design icon (
) in the sidebar
- Click the name of the theme you want to edit
- Click the options menu and select Edit Code, and select
Script.js
- Copy the code block below:
$(document).ready(function() { var formID = 6502769669773; // Change this to the form ID you wish to remove var userOrgs = window.HelpCenter.user.organizations; var userOrgNames = userOrgs.map(org => org.name); if (!(userOrgNames.includes("ZENDESK"))) { // Specify the organization name here // If the user does not belong to the organization specified, remove the form option from the dropdown $('#request_issue_type_select option[value="' + formID + '"]').remove(); $('.nesty-panel').on('DOMNodeInserted', function(e) { $(this).children('ul').children().remove('#' + formID); }); } });
- Paste the code into the JavaScript template of your help center code
- Replace the
formID = 6502769669773
variable with the ticket form ID you wish to hide - Replace
"ZENDESK"
with the name of the organization that you want the ticket form visible to - If the user does not copy all characters such as
;
and}
from the template, the code may break the page - Save your template and publish changes
The provided code reserves space for other organizations. To add additional forms and organizations, copy the if
statement above and place it under the existing if
statement below, ensuring to replace the ticket form id with the correct one and the organization you want to check and see if the user is in. Repeat this for however many ticket forms and organizations you want.
To change the code behavior to display one ticket form to all organizations except the one specified, remove the NOT
operator (!)
from the if
statement.
for (var c in HelpCenter.user.organizations) {
if (HelpCenter.user.organizations[c].name !== "ZENDESK"){
$("#TICKT_FORM_ID").remove();
}if (HelpCenter.user.organizations[c].name !== "MYORG"){
$("#TICKET_FORM_ID2").remove();
}
76 comments
Ruddy DEROSIERS
Hi,
Does anyone have updated this in VanillaJs instead of Jquery ?
My code worked fine in V1 with Jquery but not in V2 (with JQUERY in document_head).
thanks a lot
1
Ron de Vries
Hi,
Maybe just a shot in the dark but... does anyone know how to show the comments only to a particular User Segment or Organisation? Or perhaps on a specific tag of that organisation or end-user. Background of this request is that we only want our own employees to comment on articles (for now).
Can I alternate one of the codes in the comments of this article or would you suggest to use one of the built in Helpers? It would concer the <div class="article-comments" id="article-comments"> section.
Any help is much appreciated!
Regards,
Ron
0
Jaïs Pingouroux
Hi @...
Based on what has been posted before, you want to add the following code to your template:
In style.css:
In script.js:
It's untested but it should work.
1
Ron de Vries
HI @...
Thanks! I will give it a try. Since we are using the Single Sign On as well I will also consult with our Dev Team.
I will get back on it once we have it up and running so other members of the community can benefit as well.
Regards,
Ron
0
Jaïs Pingouroux
@... SSO is not really a problem, as your organization's tags are still defined in Zendesk (admin>people>organizations). Alternatively you could use your organization's name instead of a tag if it's better for you and if you only have to deal with one single entity.
0
Ron de Vries
Hi @...
Thanks for jumping in. The .css works just fine however the JS code doesn't render as expected. I did assign the tag (comments_visible) to the organisation within ZenDesk. Maybe you're able to assist with the code for checking on the organisation name as well?
Am I right that the code should be under the $(document).ready(function() { function?
Just to be complete, this is the code I tried and didn't work out:
And this is the organisation with the tag:

0
Jaïs Pingouroux
Hi @...
Your code should be in the script.js file of your template, you probably already have some code in here.
If you want to make sure that you're running in your loop, you can add this line of code before in the For loop right before the if statement.
You'll see the result in the console tab of your web browser.
Are you testing the code with a logged in user of this organization?
0
Ron de Vries
Hi @...,
My mistake; I placed to code after the $(document).ready(function(){. Guess I was too hasty. Nevertheless, it works perfect now with the code you provided.
Many thanks!!
Regards,
Ron
0
Conor Makowski
I've been testing Ryan Mayes's solution for this issue (see code block below), but hit a snag that I haven't seen addressed here. Here's what Ryan shared:
Now here's my problem: when looking at the dropdown when this code is present, everything looks fine. For example, a form titled "test_tag - Ticket Form 1" will appear as "Ticket Form 1". This is exactly what I want to see in the dropdown.
Unfortunately, once I click on "Ticket Form 1" and the actual form loads, the selection in the dropdown field shows the form's name as "test_tag - Ticket Form 1". Clicking on the dropdown again shows the available forms as desired (no tags visible), but whenever one is selected it appears with the tag.
Here are the ticket forms as they appear in the dropdown:


And here's what it looks like when I select one:
Any ideas on how to resolve this issue? We're using some really long and ugly tags on our side and I can't have them showing up in the form name.
0
Jordan Dayton
We would like to make the "Submit a request" link/button in the top navigation only be visible to users of several segments that we can easily define and update with new segments, over time.
Any suggestions or snippets that y'all could share with us?
1
Justin
Has anyone been able to get this to work? I have tried a few solutions from the comments but not having any luck.
Our goal is to HIDE a single form from ALL users, except those with a specific tag. Speaking of tags, is the tag based on user tag? Org tag? User segment name?
What's the best way to accomplish this?
6
Julien Maneyrol
I know of an easy way to hide specific ticket forms from anyone. I use this method because I want some forms to be only available from specific web widgets, while not using brands:
However, this uses JQuery. I would like to convert to VanillaJS but I have failed so far. Does anyone know how to translate this into VanillaJS?
1
Julien Maneyrol
I have managed to "translate" the first part, but I'm still stuck with the $(this).children('ul').children().remove('#TICKET_FORM_ID') JQuery which looks too "complex" to be easily translated. So the code looks like this now:
It works, but it is very ugly since it mixes Vanilla JS and JQuery.
Help on making it 100% Vanilla JS would be very appreciated.
1
Kay
Hi Julien 👋
Almost there.. this should be the final part to remove jQuery completely
1
Julien Maneyrol
Hi Kay,
Wow, you just saved my day (and nights)! This works exactly the way I intend to! Thanks a lot :-)
For the record, here is a "template" snippet if anyone wishes to do the same:
Thanks again to Kay for the help!
Regards
3
Christopher Boerger
Hi all,
It would be great to have this as native function. Being able to hide or show a form based on organisation would great to have without going to the code. Is there any plans for this?
12
Saeleum
Hi Robbert,
I think I don't have ticket form ID. I can have one ticket form as I am on Support Professional. I do really need to hide the ticket form based on user's organization. How can I achieve this without ticket form ID? or how can I find the ticket form ID?
0
Sam
Are there plans to introduce native access controls to ticket forms? Using jQuery is fine on the surface (we use it currently!) but it's really just security through obscurity. Anyone can access the developer console in their browser, find the form ID, and then plug it into the URL. The same would be true with hiding and replacing the form picker, as the form selector is built into the {{request_form}} helper.
This is especially problematic for those who might have "unadvertised processes" in their org that necessitate ticket forms - how do you keep them from finding out, except build the form outside Zendesk?
3
Emmanuelle Garel-Galais
Hi there!
After having been reading over almost all comments, I didn't get the feeling I found the answer I needed, so here is my issue : I have 4 organizations and I want 3 of them (X, Y & Z) to see only one ticket form and the last one (A) to see another ticket form. When I tested it with only one organization it worked perfectly (after having added a Jquery in document_head.hbs). Now, here is my script for the 4 organizations and unfortunately all organizations see now both ticket forms... :
$(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 !== "X"){
$("#360001704540").remove();
}
if (HelpCenter.user.organizations[c].name !== "Y"){
$("#360001704540").remove();
}
if (HelpCenter.user.organizations[c].name !== "Z"){
$("#360001704540").remove();
}
if (HelpCenter.user.organizations[c].name !== "A"){
$("#360001714479").remove();
}
});
});
}
if (i > 10){
clearInterval(checkExist);
}
}, 100);
});
What am I doing wrong please? :-(
0
Jaïs Pingouroux
Hello @...,
Considering that the code iterates on the organizations of a user, you may want to review your conditional logic here.
0
Emmanuelle Garel-Galais
Hello @...!
Thank you so much for your quick answer!
I have thus replaced my previous code by this one as you suggested but it still doesn't work (I have the log out back, this is already one good thing though!), I still have both forms for both users linked to those organizations... :
var remove_form1 = true;
var remove_form2 = true;
for (var c in HelpCenter.user.organizations) {
if (["X", "Y", "Z"].includes(HelpCenter.user.organizations[c].name)){
remove_form1 = false;
}
if (HelpCenter.user.organizations[c].name == "A"){
remove_form2 = false;
}
}
if (remove_form1) {
$(360001704540).remove();
}
if (remove_form2) {
$(360001714479).remove();
}
Still don't understand why :-(
0
Jaïs Pingouroux
Hello @...
$(360001704540).remove(); is not a valid jquery selector.
You want to do $("#360001704540").remove(); instead.
Same for the other form.
If it's still doesnt work, can you please add a console.log(HelpCenter.user.organizations[c].name) as the first instruction in your for loop?
Also console.log the inside of your ifs to make sure they are triggered.
0
Emmanuelle Garel-Galais
Morning @...!
Thank you very much for your follow-up! Nevertheless, none of your suggestions is working here :
var remove_360001704540 = true;
var remove_360001714479 = true;
for (var c in HelpCenter.user.organizations) {
if (["X", "Y", "Z"].includesconsole.log(HelpCenter.user.organizations[c].name)){
remove_360001704540 = false;
}
if console.log(HelpCenter.user.organizations[c].name == "A"){
remove_360001714479 = false;
}
}
if console.log(remove_360001704540) {
$("#360001704540").remove();
}
if console.log(remove_360001714479) {
$("#360001714479").remove();
}
When I add the console.log, I loose my possibility to log out again...
I thought it was easy to do but in fact no haha!
0
Jaïs Pingouroux
Are you sure of your form IDs ?
If your helpcenter is online, can you share the URL?
Here's the code with appropriate logs. Please provide the logs displayed in your browser's console tab inspector.
0
Serge BERTAINA DUBOIS
Hi all!
Thank you for this information and the leads it gave me!
I have worked on this basis to hide some forms from the selection list.
But not linked to the organization, but to a list defined in the Theme settings.
For it :
- Update of manifest.json:
Change the IDn in "Value"
Also remember to put your Languages files in the Translate folder.
Then in the template "new_request_page.hbs" '
Add the following js code just after {{request_form wysiwyg = true}} :
Note: Does not work in script.js, therefore necessarily in the new_request_page.hbs template.
If that can help!
Serge.
0
Emmanuelle Garel-Galais
Thank you both, I've made it!
Thanks!
0
Amanda Gunn
Hi,
Is it possible to write something so that the Default form is the only form in the Help Center available to users?
We have many forms that are specific to projects that are only seen to our users in the web widget, but when in the help center creating a follow up they can click to any of our project form types. We'd like all follow-ups to come in on the Default form and then the team can triage.
Thanks!
Amanda
1
John
HI. Regarding the first post with the code for hiding forms. Been using it for over a year. Just noticed after the changes ZD made (to the admin center) that it doesn't work anymore. Appears they may have broken something.
Opened a ticket with them - has anybody else using this code had issues with it suddenly not working? I have not upgraded our HC - still on 1.7. Is there a new way to accomplish this?
Thanks in advance.
0
Jaïs Pingouroux
Hi John,
May it be that you moved to templating API v2 on which jquery is no longer available?
I'm still using API v1 and it all works fine.
0
Robin Wiggins
Is it possible to hide it for users who are not signed in as well?
1