Recent searches


No recent searches

How to disable the ticket form dropdown?

Answered


Posted Oct 01, 2018

Does anyone have some custom javascript that would allow me to disable the dropdown for form submission when someone lands on a specific form? I've tried everything but it seems like the from request drop down doesn't behave like a normal drop down.
I want this to be un-selectable when a user lands on a certain form. There a few hidden forms we send users to from time to time but if they click on the drop down, they can navigate out of that form and not be able to get back. Any help would be extremely appreciated!


0

38

38 comments

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


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

0


You are most welcome Michael! Happy Zening!

0


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


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


image avatar

Devan La Spisa

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


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


@... 

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


this works! Thanks @...!

0


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


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


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


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


@...

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


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


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


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


image avatar

mccabe.tonna

Community Moderator

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

What Do You Need Help With? or the form? 

0


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


image avatar

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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

1


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

 

 

1


Awesome. That worked.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Awesome!

0


Hey guys. 

So, I'm really in need of your help. 

I'm also trying to eliminate the ability to choose between forms, and I can't seem to place things correctly. 

Used this: 

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

  });
});

And this: 

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

All under script.js, but still I can choose between them. 

HELP!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey David,

Use the given code: For script.js file

 

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




Note: remove '000000' and add your form ID which you want to eliminate from the dropdown.

 

 

Make sure, document_head.hbs file must have CDN of jquery:

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

 

Thanks

 

 

0


Hey. 

Nope. 

So it did work, but I would love to remove the drop-down box in GENERAL. 

Is there a possibility to remove the drop-down in general?

So, that "Submit a request" -> Specific Form 

0


Hi David!

You'll want to use this code to hide the Ticket Form dropdown field:

$(document).ready(function() {
$(".request_ticket_form_id").hide();
});

Let us know if that works for you!

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post