Multibrand - Display the appropriate forms on the correct Help Center (Professional Add-on and Enterprise) Follow

professional plan add on and enterprise plan

I've created multiple Help Centers for all of my brands, and now I'm ready to roll out ticket forms for each of the brands. But wait! I don't want my forms for my primary brand to show up on my Help Center for my secondary brand. Well this little trick is hopefully just the thing to fix that.

This article covers 2 scenarios:

  1. Selecting ticket forms for brands with multiple forms .
  • Displaying only one ticket form per brand.
  • Note: Before you can begin to select forms, you must find the IDs of the forms you want to hide. Follow the steps below for information on how to find your form IDs.

    Finding the form IDs

    Whether you want to hide a form or single it out, for you to be able to target the individual forms, you have to first find the form IDs. This article will not cover creating  forms. For more information on creating forms see, Creating ticket forms to support multiple request types .

    Here is how you can find the IDs quickly in the agent interface:

    1. Click on the Admin icon ( )
    2. Go to Manage > Ticket Forms
    3. Click the name of the form you want to hide or use as your standalone form
    4. Take note of the form ID in the address bar as shown below:
    5. Repeat for each form you would like to hide or isolate.

    Displaying multiple forms per brand

    Often times each Help Center will manage multiple types of requests. This section will show you how to selectively hide any ticket forms you do not want to appear in a particular brand's Help Center, while still enabling the end-user to select the remaining forms.

    The code

    Now that we have recorded the ticket forms that we want to hide as described above , we can now target them with the code below.

    You will want to place one of these versions of code in the $(document).ready(function(){ under the JS tab when customizing your Help Center.

    Note: When you copy and paste the code, make sure to enter in your own form IDs, not the ones given in this example.

    Option 1

    In this first option, you simply repeat the lines where the form IDs are located. My form IDs are 12775 and 31495 .

    //remove the options from the dropdown selector
    $('#request_issue_type_select option[value="12775"]').remove();
    $('#request_issue_type_select option[value="31495"]').remove();
    //remove the options from the nesty-input after it's been created. 
    
    $('.nesty-panel').on('DOMNodeInserted', function(e){
        $(this).children('ul').children().remove('#12775');
        $(this).children('ul').children().remove('#31495');
    });
    

    Option 2

    Now in this 2nd option, I've instead decided to use an array, so we can simply input the list of forms we want to hide inside of the square brackets [ 12775,31495 ] . You must  separate each ID with a comma. This will loop through the function until all IDs have been removed.

    $.each([ 12775,31495 ], function( index , formValue ) {
      $('#request_issue_type_select option[value="' + formValue + '"]').remove();
      
     $('.nesty-panel').on('DOMNodeInserted', function(e){
        $(this).children('ul').children().remove('#' + formValue);
     });
    });

    Displaying one form per brand

    Now you might be saying, "I only need one form for each brand." That's a perfectly acceptable workflow too! Instead of having to hide all of the extra brands, you could change your 'Submit a request' link to send users to one of your forms directly, and then hide the 'Please choose your issue below' dropdown list on the form.

    The code

    To send your users to one form, you will need your own form ID found in the steps above .

    We can easily replace the 'Submit a request' link by using the Help Center templating language Curlybars. You can find some more Curlybars and templating documentation here .

    You will want to place this code in the Header template where you want the 'Submit a Request' link to appear (be sure to replace the ticket_form_id with your own). This does take localization into consideration, so the link will be offered in the appropriate language if you have multiple languages offered in your Help Center:

    <a href="{{page_path 'new_request' ticket_form_id='17369'}}">{{t 'submit_a_request'}}</a>
    

    Remove form selection dropdown from ticket form

    Next, we want to remove the form selection dropdown from the ticket form, so users don't select an alternate form for the current brand. You will want to place this code in the CSS tab of your Help Center:

    .request_ticket_form_id{
         display:none;
    }


    Enter the CSS in the CSS tab.

    How it Works

    When the new request page is generated, all end-user facing ticket forms are made available in the dropdown list. The first example removes the form options which you do not want to appear for each specified brand and the second example simply directs users to one specific form for your brand.

    Have more questions? Submit a request

    Comments

    • 0

      This works great but I have found that there is still one problem with the drop down. Thanks to this article, my Brands only shows the ticket forms that are relevant. However, when a customer is asked which form they want to use, they see "Please choose your COMPANY product below". That COMPANY field is the same for all brands, i.e. what seems to be the default brand name.

    • 0

      Hi Peter,

      Glad to hear you were able to make use of this!

      The text you are referencing is actually set on your Ticket Forms panel under Admin > Manage > Ticket Forms. You'll find a box on the right side where you can enter instructions when multiple forms are available. You may want to enter something more general in the box that doesn't identify the company. Maybe just "Please choose your product below."

      Hope that points you in the right direction.

    • 0

      Hi!

      This works fine for the desktop version of the Help Center, but when using the mobile version, all forms are shown. Is there anyway to do the same for the mobile version?

      Ps. And when will we see a responsive default theme? :)

    • 0

      Hi all,

      I've gotten some feedback from some people that the code above is not removing form options in some situations. I'm still investigating the scope of this issue, but in the meantime, you can make the following updates:

      Help Center Form Update

      You will want to remove the lines I have highlighted with the red boxes and change the remaining .one to .on like this:

      //remove the options from the dropdown selector
      $('#request_issue_type_select option[value="12775"]').remove();
      $('#request_issue_type_select option[value="31495"]').remove();
      //remove the options from the nesty-input after it's been created. 
      $('.nesty-panel').on('DOMNodeInserted', function(e){
          $(this).children('ul').children().remove('#12775');
          $(this).children('ul').children().remove('#31495');
      });
      

      @Hampus if you are using the default mobile template on your Help Center, this code will not work as the CSS and Javascript for your desktop site will not operate in the mobile template. If you would like to get a head start on making your Help Center responsive, you can have a look at this article.

      Please know that making Help Center responsive is something that is on our radar, but I don't have an ETA at the moment..

    • 0

      Jake thanks for this information. Just to confirm, I had to use your modified version above to make this work in our Help Center.

    • 0

      Jake, this is awesome!! It took me more time to read this post than it did to implement the change.. fantastic!

      Do you know if there is a solution available for mobile users?

      Either way, this helps tremendously.. thanks!

    • 0

      Hi Carl,

      Glad you were able to put this to use!

      The default mobile template cannot be manipulated in this manner. You could certainly disable the default mobile template and make your Help Center responsive. We discuss creating a mobile layout in this article which can hopefully get you started.

    • 0

      This works, except when a user, while on the form page, goes to login.. the result is the page refreshes to the default "/hc/en-us/requests/new", which.. if you've eliminated the drop-down, just show a blank page.

    • 0

      Hi all,

      I updated the article with the code mentioned in my comment above, and we added a Curlybars friendly method on how to change your 'Submit a request' link if you only want to show one form.

      @Ben -

      Thanks for bringing this up! I hadn't come across that scenario in my testing.

      There are a couple of ways you could approach this. You could leave the dropdown on the request page, but remove the other form options like what is shown in the first example above. Alternatively, you could use a small piece of Javascript to redirect anyone who ends up at the /requests/new page like this:

      if (window.location.href== "https://[your subdomain].zendesk.com/hc/en-us/requests/new") {
         window.location.href = 'https://[your subdomain].zendesk.com/hc/en-us/requests/new?ticket_form_id=17369'; 
      }
      

      I will be sure to let you know if I come up with any other workflow suggestions.

    • 0

      Hey Jake,

      okay.. new problem i just realized.... I needed to make my HelpCenter responsive and the bootstrap css and js is over-riding the .js customization i added above.

      any advice on overcoming this?

      Let me know,

      Thanks,

      Ben

    • 0

      Hi Jake, This is great! It allows me to have a subtle "report a site issue" form in my company's footer, but not have it appear among our important ticket forms in the "submit a request" dropdown.

      I'm having a small issue though. When I use your code from Option 1 above, the forms that I hide aren't given the correct 'Ticket Form' option in the agent interface 'Views'. They're instead appended whatever the default ticket form is in Manage > Ticket Forms.

      As an example of my environment, my default active form is nicknamed 'Question,' and appears as the first entry in our submit-a-request dropdown. My hidden form with your code is nicknamed 'Report Site Issue.' I set up a trigger to automatically assign the tickets made via the hidden form to me, with the following condition: [Ticket:form] [Is] [Report Site Issue ]. when I use your code though, the trigger doesn't work because forms submitted by the end-user as 'Report a Site Issue' appear as the default 'Question' in the agent interface.

      Here are some images:

      1) The form itself, viewed by the end-user

      2) the agent interface 'Views'




       

      Edited by Duke Oliver
    • 0

      Hi Duke,

      I don't believe this is a bug. Could you try using .hide in place of the .remove function in the Javascript? When we are using the remove, it's completely wiping out that value, but I feel in your case, it may be worth just hiding it.

      Let me know if that helps.

    • 0

      Hi Jake,

      with some fiddling it seems to have worked! If both .removes are replaced with .hide, it will cause every item in the nesty-input to disappear. But if I replace only the first .remove with .hide, it works fine:

      Thank you for the speedy reply!

      Edited by Duke Oliver
    • 0
      Correct me if I'm wrong, but as far as I can see these tricks only apply to the user-facing side of ticket forms. Agents who are part of a multi-brand Zendesk are still stuck with a huge list of ticket forms instead of only the ticket forms that apply to the brand they are a part of. Is there any way to make these tricks work for the agent-facing end of ticket forms?
    • 0

      Hi Charles!

      You are correct, this method will only impact the customer-facing element in Help Center.

      There isn't a native functionality in Zendesk that would accomplish the same thing in the agent interface, but it might be possible to do it with a custom app. You can find out more about creating apps here: https://developer.zendesk.com/apps

      It's also possible that someone else in the Community has done something similar and may be able to help!

    • 0

      This is just what I was looking for.

      Thanks.

    • 0

      Hi Everyone!

      If you haven't seen it, you can now natively select brands for each of your ticket forms rather than having to use the workaround in this article. If you want to learn more, go check out this article: https://support.zendesk.com/hc/en-us/articles/217078128-Creating-and-applying-branded-ticket-forms

    Please sign in to leave a comment.

    Powered by Zendesk