How do I hide a ticket form?

Heya, If the form in question is not the default form, you could simply just set the form to be an internal only form and not visible to the public. This would prevent it from appearing on your HC. :)

I'm not sure that would work as we still need users to be able to see it. We just don't want it to be an option in our Help Center drop down. 

Hi Abigail, 

We also used this community solution to hide the default form in help center.  The event handler used in the code is deprecated so it is no longer working.    Here is the solution- working for us :)  Replace with this: 

Using ChatGPT, I finally figured this out after a ton of troubleshooting to narrow things down. I specifically used a GPT called Zen Co-Pilot, which I highly recommend! 

Hope this makes sense and helps someone! 

THEME & API VERSIONS: I'm using the Copenhagen Theme version 4.2.5 with Templating API v4.

END GOAL: Hide a ticket form for any user that is NOT associated with our internal organization. Meaning, the form is only available to our internal employees.

The internal end user (your internal employees) MUST log into the Help Center in order to see the form.

External end users DO NOT have to be logged into your Help Center. Meaning, the form will be hidden:

• If an end user logs into your Help Center and is NOT associated with your internal organization 
  OR 
• If an end user DOES NOT sign into your Help Center (if you allow this). 

STEP 1: Add the jquery library to the document_head.hbs file:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

STEP 2: Add the below code at the end of the script.js file:

// Hide internal ticket form from external end users
$(document).ready(function () {

 // Retrieve user organizations
 const userOrgs = window.HelpCenter.user ? window.HelpCenter.user.organizations : [];
 const userOrgNames = userOrgs.map(org => org.name);

 // Replace "Zendesk" with your internal organization name
 if (!userOrgNames.includes("Zendesk")) {
   const formNameToHide = "JAMIE-Test form"; // Replace with your actual form name

   // Function to hide the undesired option
   const hideFormOption = () => {
     const comboboxOptions = document.querySelectorAll('[data-garden-id="dropdowns.combobox.option"]');
     comboboxOptions.forEach(option => {
       if (option.textContent.trim() === formNameToHide) {
         option.style.display = "none";
         option.setAttribute("aria-hidden", "true");
         console.log(`Re-hidden form: ${formNameToHide}`);
       }
     });
   };

   // MutationObserver to monitor changes to the dropdown
   const observer = new MutationObserver(() => {
     hideFormOption();
   });

   // Initialize the observer for dropdown container
   const comboboxContainer = document.querySelector('[data-garden-id="dropdowns.combobox"]');
   if (comboboxContainer) {
     observer.observe(comboboxContainer, { childList: true, subtree: true });
   } else {
     console.warn("Combobox container not found, retrying...");
     setTimeout(() => {
       const retryContainer = document.querySelector('[data-garden-id="dropdowns.combobox"]');
       if (retryContainer) {
         observer.observe(retryContainer, { childList: true, subtree: true });
         hideFormOption();
       }
     }, 500);
   }

   // Initial call to hide the form option
   hideFormOption();
 }

 // Debugger in console
 console.log("User Organizations:", userOrgNames);
 console.log("Is form hidden? ", !userOrgNames.includes("Zendesk"));  // Replace "Zendesk" with your internal organization name

});

STEP 3: Save changes and test!