English (US)
  1. Zendesk help
  2. Guide
  3. Advice and troubleshooting
  4. Help Center customization

How can I remove "Suggested Articles" from the ticket submission form?

Zendesk Team
  • Edited
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also cannot provide support for third-party technologies such as JavaScript, jQuery, or CSS. Please post any issues you have in the comments section or try searching for a solution online.

Question

How can I remove Suggested Articles from the ticket submission form?

Answer

Suggested articles are what users see when they type the subject of their request into the submit a request form on Help Center. 

To remove Suggested Articles:

  1. In Guide, click the Customize design icon () in the sidebar.
  2. Click the theme you want to edit to open it.
  3. Click the options menu and select Edit Code.
  4. Select the style.css tab and search for the following words: suggestion-list
  5. Replace all the highlighted sections with the following: 
    .form .suggestion-list {
    display:none;
    }

    .form .suggestion-list label {
    display:none;
    }

    .form .suggestion-list li {
    display:none;
    }

    .form .suggestion-list li a:visited {
    display:none;
    }
  6. The CSS should look like this: 
  7. Click Save.

For more information about customizing your Help Center template, see the article: Editing the code for your live help center theme. 

Return to top

17 Comments

  • Sam
    Community Moderator

    I was able to achieve this by adding the following line into script.js:

    $('div.suggestion-list').hide();

    The 'searchbox' element is contained within the 'suggestion-list' element, so suppressing the parent element effectively hid it.

    2
  • Dave Dyson
    Zendesk Community Manager

    Thanks for sharing your solution, Samuel!

    1
  • Wade Fitzner

    Are there older, different or more possibly....hidden files that I am not seeing to make this change?

    suggestion-list does not exist in my style.css, nor the page I am working on.

    Im trying to add some code to hide the suggestion list for one pulldown, but have it available for another.  I've emailed support, with no responses.

    It will more than likely be an addition like this....

    In the HTML
    form <li class="suggestion-list">Subject Dropdown #1</li>

    And in the CSS
    .hidden{ display: none }

    Any help would be appreciated.

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy

    Hi Wade,

    The code you add will first need to detect that the conditions where you wish to hide suggested articles are present. This will most likely be easier with Javascript. Once your code identifies this, then it can use the one-line snippet that Samuel shared to finally hide the suggested articles.

    Best,

    0
  • Anita Rajkumar

    How to hide suggested articles only when tab out from email subject?  

    0
  • Dave Dyson
    Zendesk Community Manager
    Hi Anita, what do you mean by "only when tab out from email subject" ?
    0
  • Anita Rajkumar

     

    onmouseout - is it possible to hide when the user moves the mouse away from email subject 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy
    Hey Anita!
     
    Something like this should do the trick:
     
    const requestField = document.getElementById("request_subject");
const suggestionList = document.querySelector(".suggestion-list");

requestField.addEventListener('mouseover', function () {
suggestionList.style.display="block"
})

requestField.addEventListener('mouseout', function() {
suggestionList.style.display="none"
})
     
    You'll also need to add display: none to the .form .suggestion-list styling:
     
    .form .suggestion-list {
display: none;
font-size: 13px;
margin-top: 30px;
}
     
    I hope this helps! Feel free to reach out with any questions.
     
    Tipene
    0
  • Autumn Fair

    Is there a way to limit the articles suggested based on the form a customer selects? I really like having Suggested Answers but we have some articles that are very similar so the list can look repetitive. Instead, I'd like a way to only show suggestions from a specific category for each form. Thanks in advance for any ideas you have!

    0
  • Vlad
    Community Moderator

    Hey @Autumn Yes that is doable with a help of ZD API. You should use the Search endpoint with scope to the needed category on each ticket form. 

    1
  • Raphaël Péguet
    • Edited

    Hi all!

    It is possible to get the syntax that will make it possible to filter the suggested articles based on the label please ??

    Best regards,

    1
  • Tony Jansson

    Hi,

    Is it possible to limit the results to be for example maximum 3 results for suggested articles?

    Best Regards,

    Tony

    0
  • Vlad
    Community Moderator

    Hey Tony, just add this at the end of your theme CSS file, it should do the trick.

    .searchbox-suggestions li:nth-child(n+4) {display: none;}
    2
  • Tony Jansson

    Thanks Vlad! Just pasted it at the bottom and it worked :)

    0
  • Lolu

    Hello,

    I have a slightly different question. How do I make the suggested articles open in a different tab? Vlad Tipene Hughes

    0
  • Tipene Hughes
    • Edited
    Zendesk Developer Advocacy

    Hi Lolu,

    There isn't a native way to open the suggested articles in a new tab on click, past right clicking the link and opening in a new tab. One way you could achieve that programmatically is by using a mutation observer to watch for the links that are dynamically generated, and adding the required attributes to them. Here's an example of how that could look: 

    window.addEventListener('load', () => { 
      //  Get suggestion list element 
      const suggestion_list = document.querySelector(".suggestion-list"); 
      
      //  MutationObserver to watch for changes to the DOM at the suggestion list div
      //  and add required elements to dynamically generated links
      const config = { attributes: true, childList: true, subtree: true };
        let suggestionObserver = new MutationObserver((list) => {
        if(list[0].target == suggestion_list){
          //  Creates variables if suggestion list children have been populated to the DOM       
          if(suggestion_list.childNodes){
                const searchbox_suggestions = document.querySelector(".searchbox-suggestions");
                const search_list = searchbox_suggestions.children[0];        
              //  Adds attributes if suggested article links have been populated to the DOM            
              if(search_list){
                search_list.childNodes.forEach((li) => {
                li.firstChild.setAttribute('target', '_blank');
                li.firstChild.setAttribute("rel", "noopener noreferrer");            
              })
            }
          }
        }
        });
        suggestionObserver.observe(suggestion_list, config)
    })
    0
  • Raphaël Péguet

    Hi Zendesk community,

    Any updates on this one?

    It is possible to get the syntax that will make it possible to filter the suggested articles based on the label please  ??

    Best regards,

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk