How can I disable the subject and description fields from the request form?

Zendesk Team

Edited May 05, 2023 10:45

Question

How can I hide or remove the subject and description fields on the submit a request form in the help center?

request form

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.

Disclaimer: This article is provided for instructional purposes only. Zendesk doesn't support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Post any issues you have in the comments section or try searching for a solution online.

Return to top

185 Comments

François Bellavance
- June 01, 2022 18:30
Hi Ifra Saqlain

It all worked perfectly. I now just need to find how to hide the CC part, followers do not hide CCs.

// Formulaire Bookings STNRI
if(ticketForm == 6646835498899) {
$('.form-field.request_subject').hide(); // Hide subject
$('.form-field.request_description').hide(); // Hide description
$('.form-field.request_followers').hide(); // Hide CCs
$('#request_subject').val("Création d'une instance de Bookings - calendrier"); // autofill subject
$('#request_description').val("Création d'une instance de Bookings - calendrier"); // autofill description
$('.form-field label:contains("Attachments")').hide(); // Hide label for Attachments
$('#upload-dropzone').hide(); // Hide upload box for Attachments
}

0
Ifra Saqlain
- June 02, 2022 09:41
Community Moderator
Hi François Bellavance. :)

You can disable CCs part using the settings:

https://support.zendesk.com/hc/en-us/articles/4408843795482-Configuring-CC-and-follower-permissions#topic_x3t_4p5_cq

OR

Share the public URL of your HC then I can share script code to hide via code.

Thanks

0
François Bellavance
- June 02, 2022 12:06
I don't know what's the public URL of our HC because we have setted it to only connected users, it's not public at all. Yet we have another brand wich is public.

Transport Scolaire (zendesk.com)

I'm also hiding some parts of the public brand.

0
Ifra Saqlain
- June 03, 2022 04:59
Community Moderator
François Bellavance,

You are hiding CC field for this form:-

I opened this form:

there doesn't exist this field.

0
Paul H
- June 09, 2022 16:25
Hi Ifra Saqlain

Im following all the code provided here and all is working great code below, I have two functions one for hiding the subject and one to hide the description and it works when i select from one of the choices in my dropdown. I have two choices

Dropdown One is Submit a request

Dropdown Two is Student Assistant Fund Request

Issue im facing is, when i select Student Assistant Fund Request it will hide the subject and description like i want, but when i click back on Submit a request the boxes stay hidden and I would like them to be shown again, is this possible? It seems to only way for these boxes to reappear is by refreshing the page.

Code:

  // Hide the Subject and Description boxes when these fields are selected.

$(document).on('change', '#request_custom_fields_4940267078044', function() {
hideDescription();

});


function hideDescription() {
var selected = $('#request_custom_fields_4940267078044').val();

if (selected != "4940267078044") {
$('.form-field.request_description').hide();
tinymce.get("request_description").setContent("<p>Student Assistance Fund - Full Time Application 2021/2022</p>");
}
else {
$('.form-field.request_description').show();
tinymce.get("request_description").setContent("");
}
}

$(document).on('change', '#request_custom_fields_4940267078044', function() {
hideSubject();

});

function hideSubject() {
var selected = $('#request_custom_fields_4940267078044').val();

if (selected = "4940267078044") {
$('.form-field.request_subject').hide();
$('#request_subject').val('Student Assistance Fund - Full Time Application 2021/2022'); // Autofill subject

}
}


0
Ifra Saqlain
- June 11, 2022 04:14
Community Moderator
Hi Paul H :)

Can you share your URL here?

1
Paul H
- June 17, 2022 21:56
- Edited
Hey Ifra Saqlain

Thanks for coming back so fast,

Here's the link to my form: My Form

0

Ifra Saqlain

June 15, 2022 19:34
Edited

Community Moderator

Hi Paul 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

Paul H
- June 17, 2022 21:58
Hi Ifra Saqlain,

No never too late to answer, your code worked perfectly, you are a life saver.

Thank you so much,

Paul

0
Ifra Saqlain
- June 18, 2022 04:22
Community Moderator
😊️

0
Kevin Sanchez
- June 30, 2022 18:35
Hello! Hoping to get some assistance here.

We have a use case where we hide the subject & description fields on certain forms.

But we've encountered an issue where we're using custom URL's to pre-populate some fields, but when those URL's are used it seems that the Javascript doesn't execute and the Subject & Description fields are then shown. Is there a solution to this?

Or some way to ensure the javascript executes no matter how the request page is loaded?

0
Ifra Saqlain
- July 01, 2022 05:29
- Edited
Community Moderator
Hello Kevin Sanchez,

Can you share the URL of your HC?

Thanks

0
Brett Bowser
- July 06, 2022 13:29
Zendesk Community Manager
Hey Hazel,

Can you confirm that you've made the fields both visible and editable to end-users in the agent interface? If that's not the issue, can you share the code you're using that's not functioning properly?

Thanks in advance!

0
Paul H
- August 18, 2022 12:39
- Edited
Hi Ifra Saqlain

Wondering if you might be able to help me here as you did before.

I had all my code working and it was perfectly hiding the subject and description and auto filling both, worked great. But I'm after changing themes and for some annoying reason now the Description is not auto filling, it still disappears but doesn't auto fill, if you have any ideas of what might be causing this id be so grateful as I've tried everything.

Here's a link to my page.

Code below:

$(document).on('change', '#request_custom_fields_5290902356252', function() {
hideSubject();
hideDescription();

});

function hideDescription() {
var selected = $('#request_custom_fields_5290902356252').val();

if (selected == "msc_research_project_internship") {
$('.form-field.request_description').hide();
var descText = 'MSc Research Project / Internship Public Cloud Requirements Form has been submitted to the NCI Support Hub';
$('#request_description').val(descText);
}

else if (selected == "new_starter_form") {
$('.form-field.request_description').hide();
var descText = 'New Starter Form has been submitted to the NCI Support Hub';
$('#request_description').val(descText);
}

else {
$('.form-field.request_description').show();
$('#request_description').val('');
}
}

function hideSubject() {
var selected = $('#request_custom_fields_5290902356252').val();

if (selected == "msc_research_project_internship") {
$('.form-field.request_subject').hide();
var descText = 'MSc Research Project / Internship Public Cloud Requirements Form';
$('#request_subject').val(descText);
}

else if (selected == "new_starter_form") {
$('.form-field.request_subject').hide();
var descText = 'New Starter Form';
$('#request_subject').val(descText);
}

else {
$('.form-field.request_subject').show();
$('#request_subject').val('');
}
}

0
Ifra Saqlain
- August 10, 2022 04:07
- Edited
Community Moderator
Hey Paul, get back to you soon ,with the solution :)

1
Paul H
- August 15, 2022 10:22
Hi Ifra Saqlain,

Thank you,

0
Ifra Saqlain
- August 16, 2022 04:51
Community Moderator
Hi Paul H, I can't access your new request page cause of authentication.

Can you check your console in dev tool?,

i). Go to your new_request page. Right click of your mouse.

ii). Open Inspect in the opened list.

iii). And the, click Console in the dev tool.

iv). Is there any error ?

0
Paul H
- August 16, 2022 14:58
Hi Ifra Saqlain,

Thanks for coming back, that's strange that your getting an authentication error as this page should be open to the public, NCI Support Hub

I got the error below after I checked the console.

0
Paul H
- August 18, 2022 09:56
Hi Ifra Saqlain,

I got an update from you but the link to the comment is broken and the images are all missing, its like the comment doesn't exist?

0
Ifra Saqlain
- August 19, 2022 11:27
- Edited
Community Moderator
Hi Paul H, try this;

Remove wysiwyg=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.

1
Paul H
- August 18, 2022 12:40
- Edited
Hi Ifra Saqlain,

Thank you so much, once again your knowledge and skills have saved the day. That worked perfectly.

0
Ifra Saqlain
- August 18, 2022 12:39
Community Moderator
Glad to hear :)

1
Paul H
- August 18, 2022 14:33
- Edited
Hi Ifra Saqlain,

I meant to ask one more question.

I have a form that has conditions that show certain questions depending on what the requester picks. If a user picks the New Starter form for example it hides the subject description and presents a new set of questions, one really annoying piece about this is the requesters view under my activates shows all the questions within that form, but none of these questions are related.

The ones highlighted yellow are not presented to the user when submitting the ticket, is there way to hide these from the myactivities section?

0
Sam
- August 18, 2022 14:11
Community Moderator
Paul H A solution for hiding unwanted custom fields from the customer view is available at: Tip: How to hide blank ticket fields on customer side

There are a few different modifications in the comments of the post, depending on if you want to hide checkboxes, etc. as well!

1
Paul H
- August 18, 2022 14:34
Thanks Sam,

That worked for me.

Paul

0

Andrii Kharkavyi

August 31, 2022 14:46

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:

We are using a custom theme which was customized years ago.
We are hiding form selector field and are providing access to ticket form via direct link with this piece of code:

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..

Tipene Hughes
- September 06, 2022 18:37
Zendesk Developer Advocacy
Hey, Andrii Kharkavyi!

Can you send through the URL to your help center so I can take a look at this in a bit more detail?

Thanks!

Tipene

0
Ifra Saqlain
- September 07, 2022 07:19
Community Moderator
Hello Andrii Kharkavyi, please share the URL here so I can get more detail as Sir (Tipene Hughes) said and provide you the solution.

0
Teresa
- October 01, 2022 11:22
- Edited
Ifra Saqlain can you possibly try to help? I am also trying to hide the subject on one particular form. Sandbox HC is here. I've tried code several different ways and I can't seem to get it to hide. Can you maybe pinpoint what I'm doing wrong? Thank you!

0
Ifra Saqlain
- October 01, 2022 05:52
Community Moderator
Hi Nicole,

See the issue in your script code:

Remove those last brackets:

Team

0

Please sign in to leave a comment.

How can I disable the subject and description fields from the request form?

Question

Answer

185 Comments

Related articles