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.
83 Comments
Can you hide the subject/description for only one form, if you have multiples?
Hey Gabriel,
Unfortunately when you hide the subject/description for one form, it will hide the subject/description for all forms.
- However as a workaround you could include custom ticket fields on these forms and name them separately from the system fields, so that way you can hide the subject/description field (which is a system field), but you can still display individual custom fields that you have added to the form.
- For example you could name the custom field "Details of Issue" or "Topic" for the subject.
Please feel free to reach out to us at Support@Zendesk.com in case you have further questions for the mentioned workaround!
If you wrap the code about in an If statement you can do this.
If(ticketForm == 123456) {
Add code here
}
Replace 123456 with the ticket form ID which can be found at the end of the URL on the ticket form edit screen.
Do I need quotes around the ticketForm variable? Without quotes, the if statement breaks all of my forms completely. As in no fields at all.
Second, the code works without the if statement, but does nothing with the if statement. Can you take a look below and see if I am doing something wrong? Maybe its not the exact correct variable id. The url has "ticket_form_id=215063". But i tried that too and same result.
Code I am using:
if ('ticketForm' == 215063) {
$('.form-field.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
}
Edit: In case any one else runs into this. The changes just weren't showing up in the preview. Once i published it, it worked perfectly. Code i went with is below:
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 215063) {
$('.form-field.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
}
Thanks for coming back to share your solution, Sam!
This works for me but is there a way to add the text from a custom text field (which i'm replacing the system description fields with) into the ticket description? I'm guessing you could insert the field ID of the custom field where indicated bold below but not sure how to format it.
$('#request_description').val(the value from a custom field '); // autofill description
I'd also like to set the subject based on another custom field.
Thanks!
Hey Keith!
To the best of my knowledge it's not possible to move text from a field to the description in a ticket...can you give me your use case on this? We might be able to come up with something else.
Hey folks,
I have the same requirement as Keith , so at the moment using the code above all tickets that are being submitted through that form have the Description "test description" , I know I can change the text to anything i want but what I really need is for the ticket to state the alternative description field I have created.
Any ideas?
Hi Keith and Terry,
You should be able to update a system field with the input from a custom field, using a trigger notifying a target with the custom field's placeholder.
This is not recommended by Zendesk (although I do have something similar working reliably), and I'm unsure if the trigger can update the description or will simply create a comment to the ticket.
There's a pretty good guide for doing something like this here, although it is for different fields - it should give you an idea of what's involved.
Hope that helps you out.
Hi,
I'm trying to hide a custom field using this method but not having much success.
Hey Chris!
Your code looks good but I believe you can accomplish what you need with just identifying the element within quotes. Give this a try:
$(document).ready(function() {
$(".request_custom_fields_360000410968").hide();
});
Hi Keith and Terry,
I took a crack at this and I believe I have gotten it to work right for custom open text and dropdown fields. Please note, I am in the early stages of understanding and playing with js so take what you will of my answer :)
I am considering that your new field will have some sort of input from an agent or customer at your help center so I put this under .change function so it will update the description field in real time as that new field gets updated. This will require us to create a variable to grab the .html or value so it can be inputted into the description field.
Text of Open text custom field to Description example:
$("#request_custom_fields_yournewfieldnumberhere").change(function() {
var newdescription = $("#request_custom_fields_yournewfieldnumberhere").val();
$('#request_description').val(newdescription);
});
Text of Drop down custom field to Description example:
$("#request_custom_fields_yournewfieldnumberhere").change(function() {
var newdescription = $(".request_custom_fields_yournewfieldnumberhere a").html();
$('#request_description').val(newdescription);
});
Be sure to add your appropriate custom field number to where it says yournewfieldnumberhere
You can also name your variable (var) to anything just be sure it matches. for example if I named my var altdesc I would want to make sure altdesc was added in $('#request_description').val(altdesc); part of the code
Thanks!
Edit: removed extra } from dropdown example
@Socorro Perfect, thanks!
Cheers Socorro ,
Works perfect , thanks a lot
Hi Socorro,
I'd like to add multiple custom fields' value into subject.
How can I do ?
Thanks in advance !
Hi 고혜경,
For this script example, I am going to use 2 open text fields and identify them both in the .change function so that any time either field value is updated, it is going to run the script and add the values of both fields to the subject field. We will want to create variables for each and then use + to put them together:
$("#request_custom_fields_youropentextfieldone, #request_custom_fields_youropentextfieldtwo").change(function() {var fieldone = $("#request_custom_fields_youropentextfieldone").val();
var fieldtwo = $("#request_custom_fields_youropentextfieldtwo").val();
$('#request_subject').val(fieldone + fieldtwo);
});
Be sure to add your open text custom field number to where it says youropentextfieldone and youropentextfieldtwo
If you want to add a space between the field values you will need to add the code for it. There may be another way to do this but I did it by adding " " in between fieldone and fieldtwo in the script which would look like this:
$('#request_subject').val(fieldone + " " + fieldtwo);
if you add the space code, there is always going to be space even if only one field has a value added to it. For Example if only fieldtwo is updated with a value, you can expect one space and then the value of fieldtwo to be added in the subject field. If both fields are required on your form than it shouldn't be an issue :)
Also, glad to hear the other scripts are working for others!
Thanks
Edit: put code in code format
I recently enabled Captcha verification and it broke the code that had previously worked. Has anyone else found this and is there a known fix? I can't see how the Captcha verification impacts the code.
Hi Marty,
My assumption is that this option would only add on to the {{request_form}} placeholder on the new request page but not 100%.
I was trying to recreate your issue by enabling or disabling Captcha but it does not seem to impact the the code from this article in regards to hiding/autofilling the subject/description fields, at least in the case of a trial vanilla instance.
Does disabling Captcha unbreak the code?
Hey Marty!
Do you have any other custom code in your Help Center? The most likely scenario is that there's other custom code that doesn't play nicely with Captcha.
If you're able, please feel free to post a screen shot(s) of your code so we can take a look. We have some coding gurus here in the Community and among our Community Moderators who might be able to help you figure out what's going wrong.
I am using the code samples above and successfully hiding the subject, description, and attachment fields. I also use JavaScript found in another thread to conditionally show/hide based on the form selected.
I am running into an issue on one of my forms that has two RegEx custom fields. When the user input fails the RegEx, the form displays the error as expected but it also displays the fields that were originally hidden when the form page loaded.
How do I prevent the hidden fields from displaying in an error condition?
Hey John,
In the example of a .change script that hides fields based on a change in the identified field, if the user submits the form and comes back with the errors, it won't trigger the script on a .change function as the page is refreshing and keeping the values in the fields so no change happened on the identified element. Depending on what your script looks like, it may have another work around, feel free to post it here.
A potential work around would be to add the script again in the .ready part of your js with out the function part of the code. This means that when the page would reload, it would run the script.
For example, If I had a .change script referencing the form field to hide the description:
$("#request_issue_type_select").change(function() {if ($("#request_issue_type_select").val() == "yourformidhere") {
$('.form-field.request_description').hide(); // Hide description
}
});
I could add that the following in the $(document).ready(function() { part of my js so it runs when the page reloads:
if ($("#request_issue_type_select").val() == "yourformidhere") {
$('.form-field.request_description').hide(); // Hide description
};
Another way to approach this is to add validation to your Regex field prior to submission and add alerts so the user has to have a correct value before being able to submit or focus away from the field. I tested this with a Regex Field validating zip code with a .change function of the Regex field. This means that after the user puts a value in this regex field, if it does not equal 5 numbers, it will display the alert of 'Please input a valid zipcode and when they hit okay, it will focus back to the field until a valid value is entered.
Here is the script for reference:
$("#request_custom_fields_360000490268").change(function () {
var zipcoderegexfield = $('#request_custom_fields_360000490268').val();
if(/\b[0-9]{5}(?:-[0-9]{4})?\b/.test(zipcoderegexfield)) {
}
else
{
alert('Please input a valid zipcode');
$('#request_custom_fields_360000490268').select();
}
});
Here is the template where you would want to update the bolded items:
$("#request_custom_fields_yourregexfieldidhere").change(function () {
var nameyourvariable = $('#request_custom_fields_yourregexfieldidhere').val();
if(/regexvalidationcodefromfieldhere/.test(nameyourvariable)) {
}
else
{
alert('This is the alert message that will show if the validation fails');
$('#request_custom_fields_yourregexfieldidhere').select(); //This will set the focus back to the field
}
});
You could add more to this script to display on alert on a successful validation if you wanted.
Feel free to post your scripts here if you would like me to take a look if the above does not fit your needs.
Thanks!
Does anyone here know how to hide the Subject and Description fields until a selection is made in a custom field?
Hey Deven!
I would recommend a change script if you just would like the user to select any value on the drop down to then show the subject and description. Start by hiding the subject and description and then adding the script:
$(".request_subject").hide(); // Hide Subject
$(".request_description").hide(); // Hide Description
$("#request_custom_fields_youcustomfieldidhere").change(function() { //Script will run if this field has a changes
$('.request_description').show(); // show description
});
If you prefer to show the subject/description after a specific value is selected on your custom field, the following change script with an if statement can be utilized:
$("#request_custom_fields_yourcustomfieldidhere").change(function() { // Script will run if this field is changesif ($("#request_custom_fields_yourcustomfieldidhere").val() == "valueofcustomfield") {
$('.request_description').show(); // Show description
}
});
Feel free to let me know if you have any questions with these. Thanks!
Thanks, Scott that worked!
I may have missed it but I don't believe anyone has asked this question yet.
- I am using one instance with a number of brands. The brands all have differing "names" for ticket priority. We are trying to have the users view the titles as "Emergency, Normal and Project" instead of "Low, Normal, High Urgent". I have seen a code used to modify the theme so that one of the fields is hidden but I was curious if there is code to edit the fields? Ill add example code from another's comment below. I essentially want to use the code below to hide one priority and then add code to edit the remaining 3. Thoughts?
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 123456) {
$('.form-field.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
}
Hey Josh -
You may want to cross-post your question in the Guide Themes and Customizations topic in the community, where it would have better visibility to other users. In the meantime, I'll ping our community moderators to see if any of them have any suggestions for you.
Thanks Nicole!
You're welcome, Josh.
Hello All,
This is very helpful articles to help me in hiding some custom fields from our ticker form. I have one more follow up question, is it possible to hide custom field in widget? I have successfully hidden the custom field in web version, however the custom fields are still visible when I open widget.
Could you advice me how to workaround with this?
Thank you
This is the screenshot.
From the right hand side, I still have 3 custom fields that I want to hide from end-users since we will autofill it from our side.
Can you help me?
thanks
Please sign in to leave a comment.