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.
91 Comments
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!
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();
});
@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
Hi Hari,
Within the Support dashboard you should be able to navigate to Admin>Channels>Widget and choose the custom fields you'd like to display within your Web Widget. Screenshot below:
I would recommend toggling off any fields you'd like to remove from your widget and then hit save at the bottom of the page. More information in our Using custom ticket fields and ticket forms with the Web Widget article which I've linked for you.
Let me know if that doesn't get you what you're looking for.
Thanks!
Would it be possible to hide the system field "description" until last "custom field" in the form is answered?
Hey Christer!
You could hide the description field until the last custom field you have in a form was answered. The set up of the script will depend on how many forms you have and if you want this functionality across all forms or not.
Here is a link to another post I did on this thread that should hopefully get you started:
https://support.zendesk.com/hc/en-us/articles/115002860148/comments/360001344888
Let me know if you run into any issues or have any questions regarding your specific use case.
Hey everyone!
I don't believe this question has been asked yet, but if it had and I overlooked it I apologize.
We have successfully been able to hide form fields and change the labels using the jQuery functions listed in previous responses. However, if a form has required fields and the user submits the form without filling out the fields the form reverts back and no longer shows our changes.
We saw that when this occurs, the URL changes to "https://zengisticshelp.zendesk.com/hc/en-us/requests" regardless of which form was submitted. Since the URL no longer contains the form ID that we used in our if statement (ie. if (ticketForm == 360000435732) {} ) the changes are no longer applied to our form, which is causing confusion.
Is there a way to get around this? Perhaps adding our jQuery if statement and functions to another file other than scripts.js?
Hi Erin,
It sounds like you may only have change functions in your script so when the page refreshes, those scripts don't run because nothing changed on the fields you referenced in your scripts. The URL will change on the page refresh as you mentioned but this shouldn't impact your scripts, as long as the the scripts are referencing the fields.
I answered an example of this on an earlier post but I am not 100% if it is applicable to you.
I gave an example of how you would want to add an if statement to the .ready portion of the JS, in addition to the .change script.
Here is the link to that comment, specifically looking at the first 2 code snippets in there:
https://support.zendesk.com/hc/en-us/articles/115002860148?page=1#comment_360000915147
I am more than willing to explore this further with you to make sure we can get your scripts working as you need. Thanks!
Hi Socorro,
Thanks for your reply! I tried adding a version of what you suggested in your previous response but it did not work. Here is our current code within our .ready portion of the JS:
var ticketForm = location.search.split('ticket_form_id=')[1];
if (ticketForm == 360000435732) {
$('#request_subject_label').text('Customer Name');//Changes the subject label text to 'Customer Name'
$('#request_description_label').text('Customer Address');//Changes the description label text to 'Customer Address'
$('#request_description_hint').text("Please enter the customer's address above. A member of our support staff will respond as soon as possible.");//Changes the hint text to match the new label
$('.request_custom_fields_360019821771').hide();
}
When the form is submitted without the required information, the URL changes from "https://zengisticshelp.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000435732" to "https://zengisticshelp.zendesk.com/hc/en-us/requests" and because that form id is no longer present our changes are no longer applied.
Hi Erin,
Thank you for the additional information!
Since you are using the location.search.split for your variable, that in fact is looking for the url value and since the url changes when the page refreshes, this is why the scripts won't run again.
Rather than using that variable referencing the url, you could reference the ticket form drop down ID. This code worked for me when putting in the .ready JS. The code in bold is where you put the ticket form ID:
if ($("#request_issue_type_select").val() == "360000435732") {$('#request_subject_label').text('Customer Name');//Changes the subject label text to 'Customer Name'
$('#request_description_label').text('Customer Address');//Changes the description label text to 'Customer Address'
$('#request_description_hint').text("Please enter the customer's address above. A member of our support staff will respond as soon as possible.");//Changes the hint text to match the new label
$('.request_custom_fields_360019821771').hide();
}
Please let me know if you run into any issues with this script.
That worked! You are a genius sir. Thank you very much for your help Socorro.
Please sign in to leave a comment.