How to disable the ticket form dropdown?

Answered

26 Comments

  • Socorro Fernandez

    Hi Michael!

    Took a bit but I think I got a script to work based on your needs:

    You should be able to insert one of the following scripts within your document.ready part of your script.js:

    The following script will add .css properties based on the form selected. In this case it is setting pointer-events to none which will disable the drop down functionality:

     if ($("#request_issue_type_select").val() == "ticketformIDhere") {
    $("div.form-field.select.optional.request_ticket_form_id a.nesty-input").css('pointer-events','none');
    };

    In the event you would like to add multiple .css elements, the script will look like this. This script will also add a grey background:

    if ($("#request_issue_type_select").val() == "ticketformIDhere") {
    $("div.form-field.select.optional.request_ticket_form_id a.nesty-input").css({'pointer-events': 'none','background': '#ddd'});
    };

    Another option and If you want to hide the form selection completely based on form id:

    if ($("#request_issue_type_select").val() == "ticketformIDhere) {
    $(".request_ticket_form_id").hide();
    };

    Be sure to add your forms ID where it says ticketformIDhere above

    Again, please use at your own risk as this is custom scripting. Cheers!

    0
  • Michael Ross

    It was the a.nesty-input I was missing all along! Thank you for your quick response and solid solutions.

    0
  • Socorro Fernandez

    You are most welcome Michael! Happy Zening!

    0
  • Ouvidoria Continental

    Hello Michael, Socorro,

    We're wondering how to build up such "hidden ticket forms" to be submitted to specific anonymous users. Could you give us a hint? Thx!!

    0
  • Sriram Prakash

    Is it possible to have the first item in the drop down selected, then hide the entire drop down?  Any help is really appreciated.

    0
  • Devan - Community Manager
    Zendesk Community Manager

    Hello @...,

    To accomplish this, you could set a default value and have it be agent only; that way, the customer never sees it, or you can set the field to hidden using custom code in Guide. I've included an article that goes into more detail on utilizing dropdowns. 

    Organizing drop-down list options

    Best regards.

    0
  • Jessie

    Is it possible to remove a certain form from this list? we have almost 8 forms in this list and i want to hide one as i don't want anyone accessing this form , only people with the link can access.

    0
  • Karen D Snyder

    @... 

    To remove a form from the dropdown, first you need to get the form ID, which you can do by navigating to Settings > Manage > Ticket Forms, and clicking the ticket form to open it. The form ID is the number in the URL.

    Then add the following code in script.js, inside the document.ready function, replacing the form ID with your form ID in both lines where it appears:

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

    That should remove the form from the dropdown.

     

     

    0
  • Jessie

    this works! Thanks @...!

    0
  • Millenia Singapore

    Hi Socorro and all,

    I have the same request as well, I would like the form selection function to be disabled in the request page. I'm using the Copenhagen v2 theme and it doesn't come with a document.ready function in the script. Tried adding the document.ready function and added the code you suggested, but doesn't work still (see image below).

    Please help, thanks!

     

    0
  • Jessie

    Hi @...,

     

    A couple of things before checking the code, You are already in the JS file i dont think you need to create <script> tag. Also place the ready function on the top of your js file and replace the text "ticketformID here to your form ID it would be something like yourSubDomain.hc/en-us/requests/IDHere. Also you have to change the class before hide().

    0
  • Millenia Singapore

    Hi Jessie,

    Thanks for your help, really appreciate it.

     

    I have followed your instructions but I don't really get the part on changing the class before hide(). Sorry I'm really new to JS!

    My revised codes below:

    document.ready(function() {
    if ($("#request_issue_type_select").val() == "360003982753") {
    $(".request_ticket_form_id").hide();
    });
    });

     

     

    0
  • Nathan Seber

    We were able to disable the forms from our site, however, we have web widgets that the forms still displays on. We use five different websites with the web widget, and want to know if there is a code that could help us hide the forms from the web widget as well, without having to update all five sites every time?

    0
  • Alejandro Colon

    @...

    I saw your post in the weekly digest email. 

    -----

    If I am understanding your question correctly, you are looking for a way to hide the different ticket forms from being visible in the web widget. 

    The web widget has some API endpoints that can be used on a specific web page or web site that will modify it without changing the web widget anywhere else. 

    Take a look at the web widget documentation here

    That link shows you how to use code to do even more than simply hiding the ticket form dropdown. It shows you how to:

    Setting the web widget to only display one form should make the option to choose a form go away. My company does not use multiple forms so I am not sure if that is the correct behavior when specifying the form.

    Let me know if I misunderstood your question or if you have any other questions and I will do my best to help.

    0
  • Kay Hasbargen

    We tried to hide some forms from the dropdown as well. It worked in general by using this code Karen posted.

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

    Our goal is to use the hidden form anyway for customers with a link. But we get following message after submitting something through the hidden form.

    Has anyone been able to get around this already? Thank you in advance!

    0
  • Samuel Mosher

    Kay -

    We use the following code to make this happen:

    document.addEventListener("DOMContentLoaded", function() {
    // Remove the forms from the drop-down selector
      document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
     
    event.target.querySelector('li[id="your_form_id"]').remove();

    //repeat above line for any other forms

      });
    });

    Tickets submitted using the hidden forms work OK for our team.

    0
  • Paul Strauss

    So which of the above examples is the best way to completely remove the form selection drop-down? This is the form I'd like to remove it from:

    https://growingbolder-mycaredesk.zendesk.com/hc/en-us/requests/new?ticket_form_id=1900000215705

    0
  • McCabe Tonna
    Community Moderator

    @... which field are you trying to hide? 

    What Do You Need Help With? or the form? 

    0
  • Paul Strauss

    I'm trying to hide the "please choose your issue" drop-down. I don't want the user to be able to select which form they are using.

    0
  • McCabe Tonna
    Community Moderator

    @... in your help-center, go to your theming, customize, edit code (bottom)

    access your script.js function and plop this in there.

    Then submit

    This will hide the form selector IF they end up on this form. You may need to reference this form via URL directly.

    var form = $('#request_issue_type_select').val();
    if (form == 1900000215705){
    $('.form-field.request_ticket_form_id').hide()
    }

    In your script.js file, it should look like this.

    Let me know if this works for you

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi pstrauss.

    Just copy the below code and paste it into your script.js file under the DOM function.

    if ($("#request_issue_type_select").val() == "1900000215705") {
    var dropDown = document.querySelector('.request_ticket_form_id');
    dropDown.style.display = "none";
    };

     

    Screenshot for the same:

    If any query, let me know :)

    Thank You

     

    Team Diziana

    0
  • Paul Strauss

    Thanks, @... - I tried adding that code to the theme's script.js file as you recommended but the drop-down menu still appears for some reason:

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay, can you share the URL of your public theme so I can figure out the issue?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi,

    See the issue, you will have. to add jQuery CDN on document_head.hbs file.



    Add the CDN:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

     

    See the below screenshot:

     

    Thanks

    Ifra

     

     

    0
  • Paul Strauss

    Awesome. That worked.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Awesome!

    0

Please sign in to leave a comment.

Powered by Zendesk