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.
85 Comments
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!
Does anyone have a way to capture all entered values on a ticket form and inject that into the description field? We are looking for a cleaner setup without having to create a litany of triggers. One form in particular has ~200 conditioned fields on it, so that would amount to a fair amount of bloat.
Ok, I also have a similar requirement, where I want the subject/description fields hidden, but then populated with something from custom fields on form submit. The code below actually works fine when I'm in preview mode. But it doesn't work when I push the theme live.
Now, the other thing is that it breaks in different ways in different browsers. On Windows-FF, the fields are hidden (the below executes), but on form submit none of that code executes. I did verify via "view page source" that the form is called "new_request".
On mac-Chrome, jquery is simply not found. I get the "'$ is not defined" error. But it's clearly there. Again I can see it via page source. No errors in the network log in terms of doing the GET to get the jquery file.
Any ideas would be much appreciated..
Thx.
To reply to my own comment, a few things to clarify:
We've successfully hid the subject and description fields from End User submission. But since they can't be left blank, is there a snippet or code command to make the Description / 1st comment an Internal Note?
Nick Valderrama Since it's hidden, why dont you populate those fields with useful data?
Like the contents of what they've filled out on the fields that are visible?
McCabe Tonna - thanks! I can see adding one of the values from a custom ticket on the same form into the description. Any suggestion(s) on the actual code/commands for doing that?
Nick Valderrama
Here's some jquery code. It hides the subject/description fields, then we have a couple of custom fields (first name, last name), and we use that as both the subject and the description. Note how we do this on "change" of the custom fields, don't do it on form.submit, because that won't work.
$('.form-field.string.required.request_subject').hide();$('.form-field.string.optional.request_subject').hide();
$('.form-field.request_description').hide();
$('#request_custom_fields_360052144814, #request_custom_fields_360053124453').change(function() {
var name = $('#request_custom_fields_360052144814').val() + " " + $('#request_custom_fields_360053124453').val();
$('#request_subject').val(name);
$('#request_description').val(name);
});
Hello everyone,
I don't believe this question has been asked yet, but if it had and I overlooked it I apologize.
I think this is a very simple question - so please bear with me as I am new to this.
I would like to hide the 'Description' field on multiple forms within one of my brands - but not all of them. How would I accomplish this? I currently have the field hidden on one of the forms but would like to know how to expand this to many forms without having multiple repetitive lines of the same code.
Below is my current code to remove the 'Description' field on one form
//Hide subject & description field on a SAFe request form
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 123456789) {
$('#request_description').val('Add Opportunity to Pipeline');
$('#request_description').parent('.request_description').hide();
}
});
Thanks in advance!
EDIT: I saw this comment - but I figure there has to be some way right? https://support.zendesk.com/hc/en-us/articles/115002860148/comments/360004917733
is there a way to also hide the CC field and the Attach a file section? i played with the following code but it doesn't seem to remove the CC and Attach file, just the subject and description:
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 360001296612) {
$('.form-field.request_subject').hide(); // Hide subject
$('.form-field.request_description').hide(); // Hide description
$('.form-field.request_collaborators_').hide(); // Hide CCs
$('.form-field.request-attachments').hide(); // Hide attachment upload
$('#request_subject').val('New update ticket form request'); // autofill subject
$('#request_description').val('See details in the fields to the left'); // autofill description
}
Hey Cory!
To hide the CC field I used the following:
$('.form-field.string.optional.request_cc_emails').hide();// Hide CCsTravis Rider that worked thank you!
i was able to also hide the attachment upload section with the following:
$('.form-field label:contains("Attachments")').hide(); // Hide label for Attachments
$('#upload-dropzone').hide(); // Hide upload box for Attachments
I struggle to set the value of the description field and was wondering if anyone had a similar experience:
$(document).ready(function () {
// Hide subject and description
const ticketForm = $("#request_issue_type_select").val();
if (ticketForm == 360001444300) {
$('.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
}
});
Using this code, I am able to hide both the subject and description fields, however when then submitting the form, it fails. Removing the part that hides the fields, I can see that the "Test subject" is entered into the subject field, but the description field is empty. I can also see that the reason why the submit fails is because the description field is empty.
Does anyone have a suggestion for how to fix that?
Jona Wilmsmann -
your code looks good. I use the following and it's working for me:
$('#request_description').val('See details in the fields to the left'); // autofill descriptionhave you played around with the description value? maybe it needs to be longer than a couple words, although i doubt as i've received tickets with just a period in the description i think.
Please sign in to leave a comment.