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
Morteza
Is it possible to make the "dropdown menu" disappear and just show 1 ticket-form since there is only one to show? I mean I have multiple ticket-forms but they are all hidden and only shown for one specific organization. As shown in the picture below, there is only one ticket-form but still it is in a dropdown menu together with a dash sign (-).
Is it possible to just show the ticket-form and skip the dropdown menu. I've come this far by simply following the instruction above for hiding ticket-forms.
0
Gabriel Manlapig
Hi Morteza,
I found this community post that provides insight on how to hide a ticket form selector.
https://support.zendesk.com/hc/en-us/community/posts/4409515399066-How-to-disable-the-ticket-form-dropdown
Please note that the suggestions mentioned in the community post was not created by Zendesk. If you have any questions or issues, please reach out to the post above for further assistance. Thank you!
0
Morteza
Hi Gabriel Manlapig, thank you for your help but I would like to hide the dropdown menu in general and not after selecting a form.
So, lets say that there are 3 forms A, B and C. And 3 different companies company1, company2 and company3.
The forms are customized in a way that form A is only shown to company1, form B is only shown to company B and form C is shown to company3. The problem is that when you click on submit, there is still a dropdown menu, when you want different companies to land on their own forms directly and not get a dropdown menu despite having one form to show.
1
Ulises
Hi,
I am looking to hide certain custom ticket field dropdown options and some ticket fields based on the form selected, how could I do that?
0
Brittany Mandel
I'm getting a "$ is not defined" error when following these instructions.
0
Ben Ellis
Hey there, I reviewed the comments and couldn't understand whether there is a simple solution to having separate forms for different organizations. In a nutshell, we would like our internal users (Org A) to submit tickets using a designated internal form, while all our customers (external) use a different form. Any help from the great Zendesk community?
1
Jupete Manitas
Thank you!
0
Administration Account
Hi, maybe somebody has a solution how to hide ticket forms based on user segment?
The logic of the hiding is pretty much clear. I cannot find a solution how to pull user segment and use it in the code.
1
Max
Hello there,
So I have been able to make it work with the help of our best coding buddy, chatGPT. I am sharing here the way I've done it for rookies like me.
1- Importing jQuery library
Copy/paste the following script in document_heads.hbs template
2- Edit the JavaScript
Copy/paste the code in script.js
The behaviour expected on my side is described as follows, but it can work for more forms and/or more organizations.
I have 2 forms, named here formIDexternal and formIDinternal.
Some organisations defined as orgsInternal have to see one form, the formIDinternal
The rest of organizations, defined as orgsExternal has to see the other form, formIDexternal
In the variables section (var) define and list your forms and your organizations.
In my case I want Org1, Org2 and Org3 to only be able to see form id 987654321 .
Then add your if statements. It should work without any problem !
$(document).ready(function() {
var formIDexternal = 123456789; // Change this to the form ID you wish to remove (external)
var formIDinternal = 987654321 // Change this to the form ID you wish to remove (internal)
var orgsInternal = ["Org1", "Org2", "Org3"]; //Type here your organizations name
var orgsExternal = ["Org4", "Org5", "Org6"]; //Type here your organizations name
var userOrgs = window.HelpCenter.user.organizations;
var userOrgNames = userOrgs.map(org => org.name);
if (userOrgNames.some(orgName => orgsInternal.includes(orgName))) {
// If the user belongs to one of the organization Internal specified, remove the form option from the dropdown
$('#request_issue_type_select option[value="' + formIDexternal + '"]').remove();
$('.nesty-panel').on('DOMNodeInserted', function(e) {
$(this).children('ul').children().remove('#' + formIDexternal);
});
}
if (userOrgNames.some(orgName => orgsExternal.includes(orgName))) {
// If the user belongs to one of the organization External specified, remove the form option from the dropdown
$('#request_issue_type_select option[value="' + formIDinternal + '"]').remove();
$('.nesty-panel').on('DOMNodeInserted', function(e) {
$(this).children('ul').children().remove('#' + formIDinternal);
});
}
});
1
Mark Rickard
ChatGPT suggests the following should work for a logged-in user of org 'ORG1' but how does it know you're talking about request form IDs?
0
Antonin (Customerz)
Hello,
I need to hide some forms according to users' organizations, but the solutions proposed here don't seem to be up to date. How can I do this with the Copenhagen 4.2 theme?
1
Tony
thank you for your feedback. This article is for instructional purposes only; Zendesk doesn't support or guarantee the code and can't help with third-party technologies like JavaScript, jQuery, or CSS. Post issues in the comments or search online for solutions.
Thank you again for your feedbacks and supports. Have a nice day!
0
Eddie Sawyers
I am so confused . . .
I desperately need to find a solution here - I have an org that I need to hide all ticket forms from except for one. I tried it using the initial code provided BUT I believe the issue is the Mutation Observer stuff. I don't understand how to implement that. Any advice or wisdom here?
0
Andrew English
I need some assistance on this.
I have followed the example script above but it does not seem to be working for me.
I'm not an expert with JS so some of my questions may seem a little basic.
Where exactly are people placing the function? In my case, I've placed it at the very bottom of the script.js file. I've also added a JQuery library to the document_head.hbs as one other user highlighted in the comment section.
to test this, I am impersonating one of the customers who belongs to one of the organisations in question.
I have 3 ticket forms in question. I want CformID to display for Customer C and Customer C only.
I want FformID to display for Customer F and Customer F only.
I want defaultFormID to display for all other customers.
Here is my script for reference.
$(document).ready(function() {
// Define the form IDs
var CformID = 31565317335835; // Form ID for Customer C
var FformID = 31564317911195; // Form ID for Customer F
var defaultFormID = 5740642931995; // Default Form ID for all other customers
// Get user organizations
var userOrgs = window.HelpCenter.user.organizations;
var userOrgNames = userOrgs.map(org => org.name);
// Remove all form options initially
$('#request_issue_type_select option').remove();
// Display forms based on organization
if (userOrgNames.includes("Customer C")) {
$('#request_issue_type_select').append('<option value="' + CformID + '">Customer C Form</option>');
} else if (userOrgNames.includes("Customer F")) {
$('#request_issue_type_select').append('<option value="' + FformID + '">Customer F Form</option>');
} else {
$('#request_issue_type_select').append('<option value="' + defaultFormID + '">Default Form</option>');
}
// Add an event listener to ensure the dropdown stays updated dynamically
$('.nesty-panel').on('DOMNodeInserted', function(e) {
var target = $(this).children('ul');
target.children().remove();
if (userOrgNames.includes("Customer C")) {
target.append('<li id="' + CformID + '"><a href="#">Customer C Form</a></li>');
} else if (userOrgNames.includes("Customer F")) {
target.append('<li id="' + FformID + '"><a href="#">Customer F Form</a></li>');
} else {
target.append('<li id="' + defaultFormID + '"><a href="#">Default Form</a></li>');
}
});
});
0
Angel Vargas
Guys, the code doesn't work in my site, The form can be displayed, but cannot be used.
$(document).ready(function() {
var formID = 37699203719699; // 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("PayJoy")) ) { // 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);
});
}
});
});
Can you help me with this problem?
0
Jamie Danjoint
Angel Vargas it took a lot for me to figure out how to get this to work, especially bc I'm new to javascript and trying to teach myself. I thought I posted what I did on this thread, but I guess I overlooked it. I also posted it here: https://support.zendesk.com/hc/en-us/community/posts/7754607701274/comments/8638449665562
Hope that helps!
0