Question
How can I hide or remove the subject and description fields on the submit a request form in Help Center?
Answer
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't 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.
jQuery is not provided by default. Make sure that you import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript. See this article for more information: Importing or upgrading jQuery.
It is not possible to hide the subject and description from the Help Center new request form as they are required system fields needed for tickets to be created. You could however use Javascript or jQuery to autofill and hide these fields. An example of this would be:
$('.form-field.string.optional.request_subject').hide();// Hide subject
$('.form-field.string.required.request_subject').hide(); // Hide subject
$('.form-field.request_description').hide(); // Hide description
$('#request_subject').val('test subject'); // Autofill subject
$('#request_description').val('test description'); // Autofill description
This example is for the Copenhagen theme; if a Legacy Guide theme is being used this example code may not work and will need to be refactored for the legacy theme.
80 Comments
You're welcome! And yeah you're right I didn't even notice your use of .label() which isn't valid for jQuery, so that would totally explain why it wasn't working. Glad that we could help you find a solution :)
Hi,
Hoping someone can help me. We are trying to hide the subject and description on just one of our forms and have them populate with details from the form upon submission.
However, the description on other forms is being overridden when an employee submits their requests. Below is the code we have used:
Any help would be great!!
//Form Submit
$(document).submit(function() {
//only run on specific form
if (window.location.href == "https://INSERTDOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000041815")
{
//set a string to equal the custom field value
var subjectstring1 = $("#request_custom_fields_360000255215").val();
//set subject to equal a string including field value string
$('#request_subject').val("Employee Departure" + " - " + subjectstring1);
}
{
//set a string to equal the custom field value
var subjectstring1 = $("#request_custom_fields_360000255215").val();
//set description to equal a string including field value string
$('#request_description').val("Employee Departure" + " - " + subjectstring1);
}
});
//End Form Submit
//adding a disclaimer
var selected = $('#request_issue_type_select option:selected').text();
if (selected == "Departure Request") {
$('div.request_ticket_form_id').append('<p></p>');
}
//end disclaimer
//hide system fields based on ticket forms (change subdomain and form id)
if (window.location.href == "https://INSERTDOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000041815") {
$('#request_subject').val('"Employee Departure" + " - " + subjectstring1');
$('#request_description').val('"Employee Departure" + " - " + subjectstring1');
$('#request_subject').parent('.request_subject').hide();
$('#request_description').parent('.request_description').hide();
}
Hi Jamee Lewis
It looks like the part of the code where it is updating the description is not within the if statement so its going to run for every form:
I believe you would want to move the update description field portion within the if statement where you are updating the subject field with the custom field value and it should resolve that issue. Here is just the form submit update that worked with testing on my end:
Please let me know if you have any questions or run into any other issues
Hi There Socorro Fernandez
Hope you are able to help, is there a code i can enter on our script.js to customize the description to our users on our Description box?
Thanks for your help!
There's one thing that is a big downer about using this code to hide the system fields. If you have any Required Fields, and the customer doesn't fill it out, once the system reloads the page to show the warning that the field cannot be blank (or whatever the requirement is), it drops the ticket form id from the URL. Once this happens, all the hidden fields will show back up, including any custom text you've added to said fields.
I was able to successfully hide and auto fill several system fields, but I'm having trouble with custom fields.
Here is the code I used to hide a custom drop down field:
Hide category
$(document).ready(function() {
$(".request_custom_fields_360024163811").hide();
});
Hiding it works, but I can't figure out how to auto populate this field. I've tried things like the following with no luck:
$('#request_custom_fields_360024163811').val('Equipment Request'); // autofill category
Can someone tell me how to set this drop down field to a pre-defined value?
Thank you!
So working with the below code I was able to get it working with a couple issues. First issue is I do not want to change the description at all. But i can not remove that part without all of it breaking. It just does nothing if I remove the 'set description' part.
I just want the Subject to be replaced with the contents of the custom field. But even with that part of this it seems to be showing the tag of the item selected and not the label value. The customer can see the subject, so of course i do not want the tag showing.
How do I remove the description part and show the Value in the Subject and not the tag for it?
//Form Submit
$(document).submit(function() {
//only run on specific form
if (window.location.href == "http://(brandx).zendesk.com/hc/en-us/requests/new?ticket_form_id=360001458394")
{
//set a string to equal the custom field value
var subjectstring1 = $("#request_custom_fields_360041921694").val();
//set subject to equal a string including field value string
$('#request_subject').val("Rollback" + " - " + subjectstring1);
//set description to equal a string including field value string
$('#request_description').val("Rollback" + " - " + subjectstring1);
}
});
//End Form Submit
Hello
How am I going to do this in V2 without jQuery?
You can still do this in V2, but you have to import the jQuery library in your Guide theme:
https://support.zendesk.com/hc/en-us/articles/360037983854-Importing-or-upgrading-jQuery
Hello All!
Hope you are all staying safe!
To jump on this thread I am after a very similar thing and wondering if you can help.
We've hidden the subject and description fields already as we are using multiple forms, however, what's happening at the moment is all new tickets are coming through with a subject of 'New Ticket' which we've defined.
Ideally i'd like all tickets to come through with the subject pre populated with the form name.
For instance, we have a form called 'Disable A Customer', which i'd like for and new tickets created to enter Zendesk with a subject of 'Disabled A Customer' when this form is chosen and different subjects if other forms are chosen.
Can anyone advise if this is possible?
Thanks
Simon, you can find multiple places in this thread to do what you are asking, but it can be daunting if you aren't familiar with the jquery code being used. Please be aware, before you can use this code, you'll need to import a jquery library into your Guide theme. You can find these instructions here: https://support.zendesk.com/hc/en-us/articles/360037983854-Importing-or-upgrading-jQuery
The following code has been formatted to do what you are asking. It will do the following:
Note the areas where you will need to enter your own company's zendesk subdomain and the ticket form number. You can find the ticket form number by going to the ticket form and copuing the number string at the end of the URL. Alternatively, you could simply replace the entire URL in the code with your URL, and will need to do so if you are outside the US.
Why does this seemingly simple example not work for me? It's still using the beginning of the description for the subject. I did everything above including adding the JQuery line.
Have you imported a jquery library into your Guide Theme?
I got this working and showing a custom field as well. The issue with it is we use dynamic content for ticket fields. it's showing the value of the item chosen and not the dynamic content version of the text. Not sure there is a way around this.... let me know if I am wrong..
Example:
Customer sees list with Crashing, Error Code, Install, etc..
Dynamic content is dc.ticket_option-crashing, __dc.ticket_option-error_code, __dc.ticket_option-install, and so on...
So the ticket is showing Technical Support - __dc.ticket_option-error_code
Since the customer can see the subject I am not sure it's usable in that form. So of the dc titles get pretty long.
Hello Dave,
Thanks for your response, that's really helpful.
Ideally, as I have a number of forms, I'd like the $('#request_subject').val("Disable A Customer"); part of the code to be pre populated with that of the form name itself rather than having to add all different form names, would this be possible?
Simon,
If you leave out the first "if" statement, it will populate on all your forms. But you'll only get one option for what it will say, i.e. ALL of your forms will have the subject hidden and the subject will be filled in with the same string of text. Using the if statement with the URL tells the code what form to apply the jquery to, and what to enter into the subject line.
So, unless you want all your forms to be exactly the same, you must input the same block of code multiple times, once for each form you'll use it for, and change the URL to match said form, and customize the subject line for each.
Notice the top line of my example had // in front. This makes that line simply a reference. You can make it say anything, so it's a good way to organize which code does what. You could have that line say //Custom code for Disable Form, and on another //Custom code for Onboarding form, etc.
Hello,
I've read through most of these comments and still cannot get this script working on my Help Center. I am trying to hide the "Subject" and "Description" fields only on one specific ticket form. I am using the theme Copenhagen (2.2.4) and I do not see "$(document).ready(function() {" anywhere in script.js.
Let me know what I'm doing wrong.
Thanks
That section no longer exists in API v2. First, no matter where you put your code, you MUST import a jquery library. See my comment with a link to the instructions to do this several comments up. Also consider that spacing and format matter a lot. A wrong space or indent can mess the whole thing up. Finally, ensure that you are using the correct URL for the form in the if statement, and that you have changed your subdomain appropriately. Enter your code AFTER the section that looks like this:
function closest (element, selector) {if (Element.prototype.closest) {
return element.closest(selector);
}
do {
if (Element.prototype.matches && element.matches(selector)
|| Element.prototype.msMatchesSelector && element.msMatchesSelector(selector)
|| Element.prototype.webkitMatchesSelector && element.webkitMatchesSelector(selector)) {
return element;
}
element = element.parentElement || element.parentNode;
} while (element !== null && element.nodeType === 1);
return null;
}
So I have changed the description field name and hid the subject on multiple different forms, however, for some reason we just noticed that these changes are now not being displayed on our live forms. Why is this and what should we do to change them back?
We have a number of forms stating "tell us what we can help you with" and a "subject" line that does not make sense given what the form regards. Please help asap as we are doing exactly what is state in this article and it is not working.
Hi Hari Hartas -
The snippet of code you need is featured here:
https://github.com/Ajhad1/Zendesk-Web-Widget-Modifications
Please note the suggested modification:
This article has more information. Hope this helps!
Please sign in to leave a comment.