Recent searches


No recent searches

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



Edited Feb 07, 2025


9

235

235 comments

ok thanks Ifra Saqlain - I look forward to your response.

0


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
}

We initially wanted to hide the description on one 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. 

1


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. 

1


Hey Ifra Saqlain - thanks for all your help. Just checking if you've managed to have a look at my recent comment?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Shobbir Ahmed,

Try this. By default, the description box is showing for your 'Standard Request' form.

Remove the previous script code and paste this new given code.

You only need to remove '00000', '11111', '2222', etc, and add the rest of the 5 forms IDs that would be shown in your search engine bar (as I mentioned in my previous comment).

 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('0000000' ) > 1) {
        descriptionWarpper.style.display= "none";
          descriptionField.innerHTML = 'Hello Zendesk!';
     }  else if(window.location.href.indexOf('111111') > 1) {
         descriptionWarpper.style.display= "none";
          descriptionField.innerHTML = 'Hello Zendesk!';
     } else if(window.location.href.indexOf('22222222') > 1) {
         descriptionWarpper.style.display= "none";
          descriptionField.innerHTML = 'Hello Zendesk!';
     }
      else if(window.location.href.indexOf('33333') > 1) {
         descriptionWarpper.style.display= "none";
          descriptionField.innerHTML = 'Hello Zendesk!';
     }
      else if(window.location.href.indexOf('44444') > 1) {
         descriptionWarpper.style.display= "none";
          descriptionField.innerHTML = 'Hello Zendesk!';
     }
      else if(window.location.href.indexOf('555555') > 1) {
         descriptionWarpper.style.display= "none";
          descriptionField.innerHTML = 'Hello Zendesk!';
     }
     }
    
    checkTicketId();
});

 

 

 

Select the form instead of 'Standard Request' in your dropdown bar:

 

 

You will get the ID of your form:

 

Remove the '00000' from the script code and paste the form ID.

Do the same for, the second form, remove '11111' and copy your second form ID and then paste that.

Do the same for, the third form, remove '22222' and copy the form ID from the search engine bar and paste that.

Do this for all your rest forms except the 'Standard Request' form because the ID of this form isn't showing in the search engine, right?

 

Try this and let me know, hope it worked :)

Thanks

 

 

 

0


Hey Ifra Saqlain

 

Thanks for getting back to me.

 

Unfortunately I can't see the id's for any of my forms:

https://rewardinsight.zendesk.com/hc/en-gb/requests/new

Please have a look for yourself.

Thanks

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Okay, I saw the request page, remove the previously shared script code and only 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");
      
       const nestyInput = document.querySelector('a.nesty-input');
       descriptionWarpper.style.display= "none";
       descriptionLabel.innerHTML = 'Please specify the details of your request';
      
     
      if (nestyInput.textContent.includes('Standard Request')) {
        descriptionWarpper.style.display = "block";
      }
        if (!nestyInput.textContent.includes('Standard Request')) {
        descriptionField.innerHTML = "Hello Zendesk!"
        }
      }
  
checkTicketId();
});

 

and let me know because it's working on my request forms.

 

0


Hey Ifra Saqlain,

 

This is what I now see:

 

The description is removed from all the forms, I want it to show for ONLY the standard form - is this possible?

Thanks

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Try this new snippet:

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");
      
       const nestyInput = document.querySelector('a.nesty-input');
       
     
      if (nestyInput.textContent.includes('Standard Request')) {
        descriptionLabel.innerHTML = 'Please specify the details of your request';
        descriptionWarpper.style.display = "block";
      }
        if (!nestyInput.textContent.includes('Standard Request')) {
            descriptionWarpper.style.display= "none";
            descriptionField.innerHTML = "Hello Zendesk!"
        }
      }
  
     checkTicketId();
  
});

Both snippets are working for me.

 

 

OR

 

Try this one: Add at the bottom of script.js file

$(document).ready(function () {
 $(".form-field.text.required.request_description > label").innerhtml("Please specify the details of your request");
  
if ($('a.nesty-input:contains("Access Request")').length > 0) {
    $('.form-field.request_description').hide();
}else if ($('a.nesty-input:contains("External Access Request")').length > 0) {
    $('.form-field.request_description').hide();
}else if ($('a.nesty-input:contains("Leaver Form")').length > 0) {
    $('.form-field.request_description').hide();
}else if ($('a.nesty-input:contains("New Starter Form")').length > 0) {
    $('.form-field.request_description').hide();
}else if ($('a.nesty-input:contains("Software Request")').length > 0) {
    $('.form-field.request_description').hide();
}
})



make sure you document_head.hbs file has jQuery CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
  integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
  crossorigin="anonymous"></script>


Screenshot for the same:


0


Thanks Ifra Saqlain - Unfortunately now the description box is hidden for all the forms:

 

 

I just need the description field to show for only the 'Standard request' form.

 

This is the code I copied:

 

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");
      
       const nestyInput = document.querySelector('a.nesty-input');
       
     
      if (nestyInput.textContent.includes('Standard Request')) {
        descriptionLabel.innerHTML = 'Description';
        descriptionWarpper.style.display = "block";
      }
        if (!nestyInput.textContent.includes('Standard Request')) {
            descriptionWarpper.style.display= "none";
            descriptionField.innerHTML = "Hello Zendesk!"
        }
      }
  
     checkTicketId();
  
});

0


Hi Shobbir Ahmed! It looks like the "Standard Request" is not actually a new ticket form, but rather a dropdown ticket field that's included on your standard ticket form. You'll want to use the code sample below that applies to the type of description field you use.

Your Description field type can be found on the new_request_page.hbs, and will either show as:

{{request_form}} OR {{request_form wysiwyg=true}}

If yours does not have wysiwyg=true, you'll want the standard code. If you do have wysiwyg=true, use the "rich" code block towards the bottom.

If you use the standard non-TinyMCE "rich" description field:

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

});

function hideDescription() {
var selected = $('#request_custom_fields_CUSTOMFIELDID').val();
    
if (selected != "CUSTOMFIELDTAG") {
    $('.form-field.request_description').hide();    
    var descText = 'Hello Zendesk!';
    $('#request_description').val(descText);
    }
  else {
     $('.form-field.request_description').show();
$('#request_description').val('');
  }
}

If you use the TinyMCE "rich" description field:

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

});

function hideDescription() {
var selected = $('#request_custom_fields_CUSTOMFIELDID').val();
    
if (selected != "CUSTOMFIELDTAG") {
    $('.form-field.request_description').hide();    
   tinymce.get("request_description").setContent("<p>Hello Zendesk!</p>");
    }
  else {
     $('.form-field.request_description').show();
tinymce.get("request_description").setContent("");
  }
}

You will need to replace CUSTOMFIELDID with the ID for your "Type of request" ticket field, and the CUSTOMFIELDTAG with the tag that matches "Standard Request."

Both of the above can be found by going to Support -> Admin Center -> Objects and rules -> Tickets -> Fields.

  1. Copy the Field ID to the right of the "Type of request" field for your CUSTOMFIELDID. 
  2. Open the ticket field in Admin Center, then to the right of the Field values header, select Show Tags. Copy the tag that appears below "Standard Request" and use for CUSTOMFIELDTAG

In the above example, you'll replace the Hello Zendesk! portion with whatever you want the box to say. It will replace it with a blank value if anything other than the Standard Request form is selected.

0


Hey Sam,

Thanks for your help, unfortunately the description box is still showing for all forms:

 

Above is the code I copied. 

 

I used this field ID:

 

 

Any ideas on why it isn't working?

0


Hi Shobbir Ahmed! There's an extra spot for CUSTOMFIELDID that you'll need to also replace, near the top, in this line:

$(document).on('change', '#request_custom_fields_CUSTOMFIELDID', function() {

 

 

0


Aah, my bad!

Thank you very much for your help! It is now all working :)

0


Hey Sam / Ifra Saqlain

I want to make one final change to autofill the description differently based on the choice, this is my code:

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

});


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

if (selected = "standard_request") {
$('.form-field.request_description').show();
$('#request_description').val('');
}

else if (selected = "access_request") {
$('.form-field.request_description').hide();
var descText = 'This is an Access Request';
$('#request_description').val(descText);
}

else if (selected = "software_request") {
$('.form-field.request_description').hide();
var descText = 'This is a Software Request';
$('#request_description').val(descText);
}

else if (selected = "external_access_request") {
$('.form-field.request_description').hide();
var descText = 'This is an External Access Request';
$('#request_description').val(descText);
}

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

else if (selected = "leaver_form") {
$('.form-field.request_description').hide();
var descText = 'This is a Leaver Starter Form';
$('#request_description').val(descText);
}

}

 

Unfortunately it is now showing the description box in all options - any help?

Thanks

0


Hi Shobbir!

Instead of using “else if” just try “if” - that’s how we use it in our environment!

0


Hey Sam

That has semi-worked:

Only problem now is that we get the same message for each type of request:

Should say this is a software request

 

Should say this is an access request.

 

Code below:

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

});


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

if (selected = "standard_request") {
$('.form-field.request_description').show();
$('#request_description').val('');
}

if (selected = "access_request") {
$('.form-field.request_description').hide();
var descText = 'This is an Access Request';
$('#request_description').val(descText);
}

if (selected = "software_request") {
$('.form-field.request_description').hide();
var descText = 'This is a Software Request';
$('#request_description').val(descText);
}

if (selected = "external_access_request") {
$('.form-field.request_description').hide();
var descText = 'This is an External Access Request';
$('#request_description').val(descText);
}

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

if (selected = "leaver_form") {
$('.form-field.request_description').hide();
var descText = 'This is a Leaver Form';
$('#request_description').val(descText);
}

}

0


Hi Shobbir Ahmed! Apologies for the delay. Please ensure you are using double-equals signs in each if statement. They should read like so:

if (selected == "leaver_form") {

Let me know if that takes care of it for you. I was able to replicate your behavior in my test environment when using single = symbols in the if statement.

Thanks!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@Shobbir Ahmed, happy to hear that you get your solution by @Sam.

 

 

 

My bad! I should have thought about custom field IDs.

0


That has worked perfectly, thank you both!

0


I am able to hide fields from my main help page but no on my other brands. Is there something else to do in this case? Like specifying wich brand it applies?

0


Hi François, 
 
Have you added this Javascript code to each of your brands' themes?
 

0


I added it at least on the brand theme I want these to be hidden. I have 3 brand themes actually.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey François Bellavance,  :)

 

You need to add the JS code all of your 3 brand themes or if you have already done this and not getting the same solution then share your URLs here to see the bug.

You can check your console of dev tool.

 

Thanks

0


Hi Ifra.

You mean I can copy/paste the link of my pages here? They are not public though except one.

Here is the master one :

/*
 * jQuery v1.9.1 included
 */

$(document).ready(function() {
  // social share popups
  $(".share a").click(function(e) {
    e.preventDefault();
    window.open(this.href, "", "height = 500, width = 500");
  });

  // show form controls when the textarea receives focus or backbutton is used and value exists
  var $commentContainerTextarea = $(".comment-container textarea"),
    $commentContainerFormControls = $(".comment-form-controls, .comment-ccs");

  $commentContainerTextarea.one("focus", function() {
    $commentContainerFormControls.show();
  });

  if ($commentContainerTextarea.val() !== "") {
    $commentContainerFormControls.show();
  }

  // Expand Request comment form when Add to conversation is clicked
  var $showRequestCommentContainerTrigger = $(".request-container .comment-container .comment-show-container"),
    $requestCommentFields = $(".request-container .comment-container .comment-fields"),
    $requestCommentSubmit = $(".request-container .comment-container .request-submit-comment");

  $showRequestCommentContainerTrigger.on("click", function() {
    $showRequestCommentContainerTrigger.hide();
    $requestCommentFields.show();
    $requestCommentSubmit.show();
    $commentContainerTextarea.focus();
  });

  // Mark as solved button
  var $requestMarkAsSolvedButton = $(".request-container .mark-as-solved:not([data-disabled])"),
    $requestMarkAsSolvedCheckbox = $(".request-container .comment-container input[type=checkbox]"),
    $requestCommentSubmitButton = $(".request-container .comment-container input[type=submit]");

  $requestMarkAsSolvedButton.on("click", function () {
    $requestMarkAsSolvedCheckbox.attr("checked", true);
    $requestCommentSubmitButton.prop("disabled", true);
    $(this).attr("data-disabled", true).closest("form").submit();
  });

  // Change Mark as solved text according to whether comment is filled
  var $requestCommentTextarea = $(".request-container .comment-container textarea");

  $requestCommentTextarea.on("keyup", function() {
    if ($requestCommentTextarea.val() !== "") {
      $requestMarkAsSolvedButton.text($requestMarkAsSolvedButton.data("solve-and-submit-translation"));
      $requestCommentSubmitButton.prop("disabled", false);
    } else {
      $requestMarkAsSolvedButton.text($requestMarkAsSolvedButton.data("solve-translation"));
      $requestCommentSubmitButton.prop("disabled", true);
    }
  });

  // Disable submit button if textarea is empty
  if ($requestCommentTextarea.val() === "") {
    $requestCommentSubmitButton.prop("disabled", true);
  }
  
  // Submit requests filter form in the request list page
  $("#request-status-select, #request-organization-select")
    .on("change", function() {
      search();
    });

  // Submit requests filter form in the request list page
  $("#quick-search").on("keypress", function(e) {
    if (e.which === 13) {
      search();
    }
  });

  function search() {
    window.location.search = $.param({
      query: $("#quick-search").val(),
      status: $("#request-status-select").val(),
      organization_id: $("#request-organization-select").val()
    });
  }

  $(".header .icon-menu").on("click", function(e) {
    e.stopPropagation();
    var menu = document.getElementById("user-nav");
    var isExpanded = menu.getAttribute("aria-expanded") === "true";
    menu.setAttribute("aria-expanded", !isExpanded);
  });

  if ($("#user-nav").children().length === 0) {
    $(".header .icon-menu").hide();
  }

  // Submit organization form in the request page
  $("#request-organization select").on("change", function() {
    this.form.submit();
  });

  // Toggles expanded aria to collapsible elements
  $(".collapsible-nav, .collapsible-sidebar").on("click", function(e) {
    e.stopPropagation();
    var isExpanded = this.getAttribute("aria-expanded") === "true";
    this.setAttribute("aria-expanded", !isExpanded);
  });
  // Désactiver ^certaines sections de billets
  var ticketForm = location.search.split('ticket_form_id=')[1];
  if(ticketForm == 1500002823981) {
        $('.form-field.request_subject').hide(); // Hide subject
        $('.form-field.request_description').hide(); // Hide description
    $('.form-field.request_followers').hide(); // Hide CCs
        $('#request_subject').val("Formulaire d'accès VPN"); // autofill subject 
        $('#request_description').val("Formulaire d'accès VPN"); // autofill description
    }
   if(ticketForm == 4415076369683) {
        $('.form-field.request_subject').hide(); // Hide subject
        $('.form-field.request_description').hide(); // Hide description
    $('.form-field.request_followers').hide(); // Hide CCs
        $('#request_subject').val("Formulaire d'accès à Booking ou Sharepoint"); // autofill subject 
        $('#request_description').val("Formulaire d'accès à Booking ou Sharepoint"); // autofill description
    }
  if(ticketForm == 4415659212947) {
    $('.form-field.request_subject').hide(); // Hide subject
        $('.form-field.request_description').hide(); // Hide description
    $('.form-field.request_followers').hide(); // Hide CCs
        $('#request_subject').val("Formulaire de réactivation de compte générique"); // autofill subject 
        $('#request_description').val("Formulaire de réactivation de compte générique"); // autofill description
  }
  
  if(ticketForm == 4416428372243) {
    $('.form-field.request_subject').hide(); // Hide subject
        $('.form-field.request_description').hide(); // Hide description
    $('.form-field.request_followers').hide(); // Hide CCs
        $('#request_subject').val("Choix du formulaire"); // autofill subject 
        $('#request_description').val("Choix du formulaire"); // autofill description
  }
  
// Formulaire 1 Transport Scolaire
if(ticketForm == 6342745820819) {
    $('.form-field.request_subject').hide(); // Hide subject
  $('.form-field.request_description').hide(); // Hide description
  $('.form-field.request_followers').hide(); // Hide CCs
    $('#request_subject').val("Changement entre le RTC et l'autobus scolaire"); // autofill subject 
    $('#request_description').val("Changement entre le RTC et l'autobus scolaire"); // autofill description
  $('.form-field label:contains("Attachments")').hide(); // Hide label for Attachments
    $('#upload-dropzone').hide(); // Hide upload box for Attachments
}
});

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi François Bellavance. :)

Yes, I was talking about it. Do the same for all your brand's theme script.js files.

 

Thanks

0


Ifra Saqlain

You mean replace all the built in script.js from the other brands with the same that I have in my master brand? Because when I just add the same code lines, it do not work at all.

0


I have done it and the subject, description and attachment fields are still there.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Make sure your all brand's theme have jQuery CDN at your document_head.hbs file.

Your code should work.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



Screenshot:

 

Check your console in dev tool if there is any bug, share the screenshot here.

eg. Screenshot

 

 

And,

make sure form's ID would be same for all three brand's theme.

 

Thanks

 

 

0


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


Please sign in to leave a comment.