Question
How can I hide or remove the subject and description fields on the submit a request form in the help center?
Answer
It's possible to hide the subject from your request form, but it's not possible to natively hide the description field.
To hide the subject field from the request form
- Go to Admin Center > Objects and rules > Tickets > Fields.
- Open the Subject field.
- Under Permissions, select Customers can view.
- Select Save.
Customers won't see the subject field in the request form, but the field is visible in the customer portal.
When you use the Customers can view permission, the description of the ticket becomes the subject of the ticket. However, you can use Javascript or jQuery to autofill and hide both subject and description fields.
To hide the subject and description fields using Javascript or jQuery
- Ensure that you've imported a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript.
- In Guide, click the Customize design icon (
) in the sidebar. - From the theme you want to work with, click Customize.
-
Click Edit code and add the example code below in the script.js template.
$('.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 - Select Publish.
The created tickets will have the subject and description fields auto-populated as in the example below.
185 Comments
What happened to all of the older comments on this topic? I'm looking for information on how to pull custom field text into my subject, and I believe it used to be here. Plus, I've done some searching in Google and several hits show as "page doesn't exist." Did Zendesk do a clean-up? I miss the old content.
Hi Tracy Scobba! I posted a comment covering this here. Hope it helps!
Thanks, Sam but I worry about using the HTML target that will be going away. Can I do the same thing with a Web Hook?
Has anyone got this error after making the changes to the java script? What's weird is that I don't get the error if I'm not logged in but I do if I am.
Hi Tracy Scobba!
You certainly can. I updated the instructions to reflect! The fields are essentially the same:
I realized there was a critical problem with this method.
If the end user accidentally clicks the submit button without filling in the required fields(*) in the ticket form that hides the title and description using .hide(), the title and description are exposed on the redirected page. This opens a hole for end users to change their titles and descriptions.
Has anyone confirmed this or solved it?
Thanks for reaching out! You could try using JavaScript to confirm required fields before submitting:
We have this working perfectly on many forms but when we use a URL to pre-fill certain fields on the form, the code to hide other fields stops working.
Example of code we use:
if(ticketForm == 4418185168269) {$('.form-field.request_subject').hide(); // Hide subject
$('.form-field.request_description').hide(); // Hide description
$('#request_subject').val('subject text here'); // autofill subject
$('#request_description').val('description text here.'); // autofill description
}
Example of URL with pre-filled element. I've tried the URL with and without subject/description.
https://mycompany.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269&tf_anonymous_requester_email=test@mycompany.com
Anyone have any ideas why this type of URL may break the function that hides subject/description or what I could do about it to get both working?
Hi Tyler Rutledge,
Sorry for the delay in getting back to you!
Not sure if you're still experiencing issues with this, but if you are can you try running the code below on your end and let me know if that has any effect on correctly hiding the fields?
const autoFill = () => {
document.getElementById("request_subject").value = "test subject"
document.getElementById("request_description").value = "test description"
}
const hide = () => {
document.querySelector('.request_subject').style.display = 'none'
document.querySelector('.request_description').style.display = 'none'
};
if(ticketForm == 4418185168269) {
autoFill();
hide();
}
Hello Tipene Hughes!
Thanks for the support on this! I got this working but the same problem exists with this script. When I implement your suggested script, the fields are hidden correctly. Accessing the form via the normal link like: https://companyname.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269 works correctly.
As soon as you prepopulate any custom fields using the URL such as: https://companyname.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269&tf_360049698092=testemail@gmail.com, the subject and description show again.
Hey Tyler Rutledge,
I'm going to create a ticket so we can troubleshoot this in a bit more detail. You should see a message come through shortly!
Brandon Tidd Im facing the same issue, when you accidentially click submit, it unhides my fields I have hidden, can you share where to put that code that uses JS to confirm required fields before submitting? Thanks!
Hey Adam,
This is using the Mutation Observer and, as a general rule, this code should go inside a $(document).ready(function(){ //Code }); function to load with the page (using jquery).
Hope this helps!
Brandon
Hi Brandon Tidd thanks very much. Apologies, im not massively knowledgable around this, should I be adding this to my new_request_page or to the script.js file?
Any pointers would be appreciated, thanks!
Adam
Hey Adam my pleasure!
The code itself should be added to the script.js file.
(you'll also need to install jQuery by following these instructions).
Let me know how it goes!
Brandon
Hi Brandon Tidd - thanks, I still seem to be struggling - can you advise if this is correct? I have the document ready function in my script.js and I have the Jquery installed in my document_head.hbs as per the instructions, but still, when I hit submit on a form, it behaves the same way (red boxes showing required fields, and any hidden fields re-appear). Thanks in advanced for all your help.
Adam
Hmmm - let's try a different approach Adam:
This approach uses something called a Mutation Observer, that looks for changes in specific fields. If it doesn't see an update on a required field, it prevents the form submission from executing, thus preventing the 'error' that exposes your hidden fields.
This example looks specifically for a change in the checkbox (customfield_123456789) that indicates an attachment is required. Note - you'll want to replace the field IDs with your field IDs in both the CSS and JS
/* required attachment */ #request_custom_fields_123456789_label, #request_custom_fields_123456789 { display: none; } .form-field label span.optional { display: none; }make sure to change the field ID in
var attachmentCheckboxField = ‘request_custom_fields_123456789’;
and
var formDropdownClass = ‘.request_custom_fields_123456789’;
// required attachment // Function to start observing node for mutations var startObserveMutations = function (nodeSelector, options, callbackFunction) { var node = document.querySelector(nodeSelector); if (node) { var observer = new MutationObserver(callbackFunction); observer.observe(node, options); return observer; } }; // Callback function to execute when mutations in form attachments or dropdown are observed: // clear or select Attachment checkbox according to dropdown var mutationObservedForm = function (mutationsList) { mutationsList.forEach(function (mutation) { if (mutation.type == 'childList') { setFormAttachmentCheckbox(); } }); }; // Define some variables for requiring form attachments var attachmentCheckboxField = 'request_custom_fields_123456789'; var attachmentCheckboxId = '#' + attachmentCheckboxField; var attachmentErrorNotification = 'Attachment required to submit'; var formDropdownClass = '.request_custom_fields_123456789'; var formObserveMutationOptions = { childList: true, subtree: true }; // Clear or select checkbox according to dropdown and attachments: // Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it function setFormAttachmentCheckbox() { if (isFormAttachmentRequired()) { if ($('#request-attachments-pool .upload-item').length) { selectCheckbox(attachmentCheckboxId); } else { clearCheckbox(attachmentCheckboxId); } } else { selectCheckbox(attachmentCheckboxId); } } // Return true if dropdown option 'ABCD' is selected function isFormAttachmentRequired() { return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') && $(formDropdownClass + ' a.nesty-input').text() === 'ABCD'; } // Select checkbox function selectCheckbox(eltselector) { $(eltselector).prop('checked', true); } // Clear checkbox function clearCheckbox(eltselector) { $(eltselector).prop('checked', false); } // If attachment checkbox field exists: // Select the checkbox if attachment is not required // Watch for changes to attachments and dropdown if ($(attachmentCheckboxId).length) { if (!isFormAttachmentRequired) { selectCheckbox(attachmentCheckboxId); } startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm); startObserveMutations(formDropdownClass,formObserveMutationOptions, mutationObservedForm); } // Adjust attachment error notification var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error'); if (attachmentErrorElt.length) { attachmentErrorElt.text(attachmentErrorNotification); }Let me know how this goes for you. Please note that this also uses the already installed jQuery.
Hello Tipene Hughes!
I apologize for missing your previous reply and ticket about this. I would still appreciate the support on this request and our account assumption is enabled. Is it possible we could resume the conversation on this topic?
https://support.zendesk.com/hc/en-us/articles/4408882841498/comments/4419957278618
Hey all,
I have very little experience of coding - where/how would I add code to hide the description field?
I have one form with conditional fields:
I want to get rid of the default description field only (changed to any other relevant info):
Hey Shobbir, first of all you need to remove the required condition from the description field, and then you can easily hide it with the CSS.
Remove require condition from description field: https://support.zendesk.com/hc/en-us/articles/4408846008218
Team
Hey Ifra,
I am unable to make that field not required:
The conditional fields I have used don't include the description field but it always appears as it is a system field (from what I can understand).
Thanks for help
Hi Shobbir Ahmed -
Unfortunately the description field is required to have *some* content as you can't have a blank ticket. That said, you can prefill and hide the field using the instructions outlined in the article.
Hope this helps!
Brandon
Hey Brandon Tidd & Ifra Saqlain - I don't know where/how to deploy the code to autofill the description and hide it.
This is what my script shows:
Thanks
Hello Shobbir Ahmed :), follow the steps below:
1). Copy the below code snippet and paste it at the bottom of your script.js file.
document.addEventListener("DOMContentLoaded", function () {
function hideDescriptionField(){
var descriptionField = document.querySelector('#request_description');
descriptionField.innerHTML = 'Hello users';
descriptionField.style.display= "none";
}
hideDescriptionField()
});
Screenshot for the same:
It would prefill the description field and then hide that. If any confusion, feel free to ask.
Thanks
Team
Thanks very much Ifra Saqlain - this is what I now have:
Is there any way to remove the highlighted part?
It also looks like the autofill part comes up when an end user submits a ticket:
I entered test2 in the 'Please specify ..' box but that shows only to agent on back end. I want the user's message to be displayed instead of the autofill 'hello users'
Thanks
Remove the previous JS code and add the below:
document.addEventListener("DOMContentLoaded", function () {
function hideDescriptionField(){
var descriptionWarpper = document.querySelector('.form-field.request_description');
var descriptionField = document.querySelector('#request_description');
descriptionField.innerHTML = 'Hello users';
descriptionWarpper.style.display= "none";
}
hideDescriptionField();
});
Give me some time and please share your public Help Centre URL, so I can see your new request page and will share the exact solution.
You have multiple forms and you want to hide the description field only on one form, not for all, right?
Thanks
Thanks Ifra Saqlain - the description box is now completely hidden.
We have one form with conditional fields - which comes to 6 forms in total. We want the description field hidden for all forms which I have now managed to do.
The remaining issue is for one of our forms (Standard Request) we have a field called 'Please specify the details of your request' - we want to use this like the description field - so when end users submit a ticket the info will appear at the back end:
hello users should be replaced by the highlighted part.
the other option is to remove the description field from all the other forms and just have it on the 'Standard Request' form - not sure if this can be done with conditional fields.
Thanks
Hey Shobbir Ahmed,
Good Idea:
1). Remove the description box from all forms.
2). Only have it on the Standard Request form.
3). Change the label of the description box: Description to Please specify the details of your request.
Let's do this
Remove the previously shared JS code and copy-paste the below code:
document.addEventListener("DOMContentLoaded", function () {
function checkTicketId(){
var descriptionWarpper = document.querySelector('.form-field.request_description');
var descriptionField = document.querySelector('#request_description');
var descriptionLabel = document.querySelector(".form-field.text.required.request_description > label");
if(window.location.href.indexOf('00000000') > -1) {
descriptionWarpper.style.display= "block";
descriptionLabel.innerHTML = 'Please specify the details of your request';
} else {
descriptionWarpper.style.display= "none";
descriptionField.innerHTML = 'Hello Zendesk!';
}
}
checkTicketId();
});
Note: Remove 00000000 in the script code and add your "Standard Request" form ID.
Q. How can you get the ticket form ID?
A. Select your form "Standard Request" and see it in the search bar of your window.
Here, you will get the form ID in the searchbar.
Copy the ID > Remove 00000000 in the script code > Paste your form ID which you have been copied.
If any confusion feel free to ask :)
Thanks
Hey Ifra Saqlain - thank you for your help. Still having some issues, this is the code I pasted:
The form ID I found here:
As mentioned I only have one form with fields which are overridden by conditional fields:
I copied the ID from the url as it doesn't show in guide:
Thanks for your help
Please sign in to leave a comment.