Question
How can I hide or remove the subject and description fields on thesubmit a request formin 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 toAdmin Center> Objects and rules > Tickets > Fields.
- Open theSubjectfield.
- UnderPermissions, selectCustomers can view.
- SelectSave.
Customers won't see the subject field in the request form, but the field is visible in thecustomer portal.
When you use theCustomers can viewpermission, 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'veimported a jQuery libraryif you want to use jQuery statements in a theme in place of vanilla JavaScript.
- In Guide, click theCustomize designicon (
) in the sidebar. - From the theme you want to work with, clickCustomize.
- ClickEdit codeand add the example code below in thescript.jstemplate.
$('.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 - SelectPublish.
的created tickets will have the subject and description fields auto-populated as in the example below.
172 Comments
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?
@Bernard Ugalde, Remove that and use this:
if (window.location.href.indexOf("requests/new?ticket_form_id=") < 1) {$('.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
}
Team
HiIfra Saqlain,
That finally did it. Thank you so much.
I am running into difficulty understanding the steps in this guide and the information provided in the comments. One of my colleagues had tried the following code in our script.js files
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 1900000103125) {
$('.form-field.request_description').hide(); // Hide description
$('.form-field.request-attachments').hide(); // Hide attachment upload
$('#request_description').val('A new report request has been subitted. See details in the fields to the left'); // autofill description
}
我们最初想要隐藏在一个描述of our forms, I now see multiple situations where we need to hide fields due to limitations with the Light Agent commenting and the Help Center.
I'd like to hide the description and the CC fields on different forms. This script currently resides at the bottom of our script.js file. We do not have JQuery installed and I am not a developer, any advice would be appreciated.
嘿Paul, get back to you soon ,with the solution :)
嘿Adam Ashby-Clarke,
This is using theMutation Observerand, 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
HiChris,
That's correct - paste your codeto line 10 before function closest (element, selector).
@...-
Building on the great answer from@..., you can use this same method to copy the ticket fields into the description.
{"ticket": {
"subject": "Product Update Request - {{ticket.ticket_field_12345}} -
{{ticket.ticket_field_67890}}",
comment": { "public": false, "body": "My Field: {{ticket.ticket_field_67890}}"}}Hope this helps!
@...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
Hello everyone!
I've managed to hide the subject line and description with the code suggested in this article:
var formId = $("#request_issue_type_select").val();
if (formId === '12345') {
$('.form-field.request_subject').hide(); // Hide subject
$('.form-field.request_description').hide(); // Hide description
$('#request_subject').val('test'); // autofill subject
$('#request_description').val('test'); // autofill description
}
However the page doesn't always seem to load correctly. Sometimes the fields disappear, sometimes they do not and only disappear when you reload the page. I'm guessing the script is not being loaded correctly, but I have no idea why or how to fix it.
I tried using document.addEventListener('DOMContentLoaded', function() {}) and
$(document).ready(function() {}), as both of them have been suggested in the comments of this article. I get the same results for both. It's also the same across Chrome, Firefox and Microsoft Edge.
Hope someone can help!
HiPaul H,试试这个;
Removewysiwyg=true(If you don't want the toolbar at the top of description field)from the form helper and then let me know.
Current:
After:-
Text is adding in the textarea not in hc-wysiwyg.
OR
You can remove the code (If this is useless) and then test above code is working or not.
Adding JQuery was the part we were missing, I am now hiding the description, attachment upload, and CC on another form utilizing the code I posted previously with the minified JQuery in the document_head.hbs file.
I have been successful in getting the value input from a previous textfield and populating the Subject field with it:
$('#request_custom_fields_1').keyup(function(e) {var txtVal = $(this).val();
$('#request_subject').val(txtVal);
});
but I haven't been able to do it when the field is a datepicker type:
$('#request_custom_fields_2').click(function(e) {var txtVal = $(this).val();
$('#request_subject').val('Date is ' + txtVal);
});
It is actually pulling the value just fine, but I think the problem is with the event. Only when I click on the label above the field does it populate the Subject field with "Date is xx-xx-xxxx" but I want the event to fire when a date is picked using the datepicker. I have tried various event types but none of them seem to work.
I can't get a drop-down field to populate my Subject with values at all.
HiPaul H:), I know It's too much late to answer.
So, do the following:-
Remove your previously added script code and add the given below.
$(document).on('change', '#request_custom_fields_5362232247188', function() {
hideSubject();
hideDescription();
});
function hideDescription() {
var selected = $('#request_custom_fields_5362232247188').val();
if (selected == "student_assistant_fund_request") {
$('.form-field.request_description').hide();
var descText = 'Hello Zendesk!';
$('#request_description').val(descText);
}
else {
$('.form-field.request_description').show();
$('#request_description').val('');
}
}
function hideSubject() {
var selected = $('#request_custom_fields_5362232247188').val();
if (selected == "student_assistant_fund_request") {
$('.form-field.request_subject').hide();
var descText = 'Hello Zendesk!';
$ (' # request_subject ') .val (descText);
}
else {
$('.form-field.request_subject').show();
$('#request_subject').val('');
}
}
student_assistant_fund_request:TagName of your option in the dropdown.
#request_custom_fields_5362232247188:Custom field ID.
That's my field ID, remove it and add yours.
That's my tagName, remove it and add yours.
Get the field ID:- Support > Admin Center > Objects and rules > Tickets > Fields > See the 'Request Type' > Copy the ID > Add as I did above (#request_custom_fields_ADD HERE)
Find the tagName of your dropdown option,Student Assistant Fund Request :- Support > Admin Center > Objects and rules > Tickets > Fields > Click on 'Request Type' > Now, you have entered to get the tagName > Copy the tagName and add as I did above (student_assistant_fund_request)
If any confusion feel free to ask :)
Thanks
Glad to hear :)
Paul HA solution for hiding unwanted custom fields from the customer view is available at:Tip: How to hide blank ticket fields on customer side
com有几种不同的修改ments of the post, depending on if you want to hide checkboxes, etc. as well!
HiPaul H:)
Can you share your URL here?
嘿Cory!
To hide the CC field I used the following:
$('.form-field.string.optional.request_cc_emails').hide();// Hide CCs@...We use JSON and an HTTP target that fills in this information when a ticket is created.Be aware that using Zendesk to update Zendesk tickets through the API is not supported by Zendesk itself.To achieve this:
1. Create an HTTP target with the following values:
OR
1. Create a Webhook target with the following information:
2. Create a trigger that notifies the HTTP target on ticket creation
{"ticket": {
"subject": "Your text here - {{ticket.ticket_field_12345}} -
{{ticket.ticket_field_option_title_12345}}"
}
}
{"ticket": {
"subject": "Product Update Request - {{ticket.ticket_field_12345}} -
{{ticket.ticket_field_67890}}"
}
}
的above would set your ticket subject to "Product Update Request - Testing1 - 123456" based on your screenshot.
If you need dropdown values, refer to the first block of sample code - You will need {{ticket.ticket_field_option_title_12345}} to get the value title.
Hope this helps!
So you can try this snippet instead of form ID:
if($("#new_request a.nesty-input").is(':contains("MY Form Name")')){console.log("yes!");
}else{
console.log("no!")
}
I simply tested it by console message.
Please try and let me know :)
And,
This is not the way to give feedback, be humblePLEASE:)
Thanks
嘿Ifra Saqlain,
This is what I now see:
的description is removed from all the forms, I want it to show for ONLY the standard form - is this possible?
Thanks
Ifra Saqlainthank you for trying! Back to the drawing board. :)
Ifra SaqlainDeployed the same code which you shared, but still i am getting same error.
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 10322663005972) {
$('.form-field.request_description').hide(); // Hide description
$('.form-field.request_anonymous_requester_email').hide(); // hide your email address
$('#request_description').val('Description of Incident Activity'); // autofill description
$('#request_anonymous_requester_email').keyup(function(e) {
var mailId = $(this).val();
$('#request_custom_field_10475189470356').val(mailId);
});
}
If you have sometime can we connect through Zoom meeting to go through this code.
We have this working perfectly on many forms but when weuse a URL to pre-fill certain fieldson 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?
HiDave Potts,
这是解决方案:https://support.zendesk.com/hc/en-us/community/posts/4409515169946-Requiring-a-ticket-attachment-if-a-particular-dropdown-option-is-selected
and also, I'm sharing with you some screenshots below.
i). Select 'Admin Center' in the dropdown list .
ii). Go to the 'Objects and rules' Option in the left sidebar, click on 'Fields' option now you will have your all fields of tickets. Select you field which you want to make 'Required'.
iii). After reaching inside of your field, check the 'Required to solve a ticket' option.
Thanks
️
Hi Ifra,
Thanks for your reply. I tried your code and at first it did not do anything and also no errors in the console, but then I think you just forgot the # on this line for the custom field:
$('request_custom_fields_2').click(function(e) {
I added it, but now it functions the same way as my code previously. I mean, the Subject field does not populate with "Date is xxxx" upon selecting a date from the DatePicker, rather it populatesonce I click on the label of request_custom_fields_2. I don't really understand the reason for this.
In other words, I click on the textfieldrequest_custom_fields_2to open the Datepicker... then I select a date... the selected date appears as text in this field ONLY... until I click on the label above it. When I click on the label above the custom field, then Subject populates with the date.
Have you added this Javascript code to each of your brands' themes?
Hi Sam
I followed your recommendation on the first page of comments this articles to set up a webhook & trigger to updates the subject field with a title & placeholders. (https://support.zendesk.com/hc/en-us/articles/4408882841498/comments/4408894285466)
Everything has been fine until I've got to the last bit on the trigger, where in the JSON body I'm getting a Parse error:
Any tips on how I can rectify this please?
Thank you so much in advance
Hi there!
I suppose the answer to my question may be found somewhere above, but I've spent quite some time trying to make it work, but cannot succeed. So my situation is the following.
I am trying to hide and autofill Description and Subject fields in one of the forms we want to start using.
I've managed to make this piece of code hide Description and seeking an advice here what should be added to to hide and autofill Subject as well:
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");
descriptionWarpper.style.display= "block";
descriptionLabel.innerHTML = 'Please specify the details of your request';
if(window.location.href.indexOf('6863676337042' ) > 1) {
descriptionWarpper.style.display= "none";
descriptionField.innerHTML = 'Hello Zendesk!';
}
}
checkTicketId();
});
Some things which potentially may be the code behavior:
document.addEventListener('DOMContentLoaded', function() {
var select = document.getElementById('request_issue_type_select');
if (!select) return;
var selectedOption = select.querySelector('option[selected="selected"]');
var urlParams = new URLSearchParams(window.location.search);
if (!selectedOption) return;
var selectContainer = select.closest('.request_ticket_form_id');
var selectedFormId = selectedOption.value;
var targetFromId = urlParams.get('ticket_form_id');
if (selectedFormId === targetFromId) selectContainer.style = "display: none;";
});
I would really appreciate any help with my question..
Pleasesign into leave a comment.