Disabling the subject and description fields on the new request form in Help Center

Return to top

100 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    I'll get back to you, at office yet :)

    0
  • Shobbir Ahmed

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

    0
  • Rob Lees

    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
  • Rob Lees

    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
  • Shobbir Ahmed

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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
  • Shobbir Ahmed

    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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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
  • Shobbir Ahmed

    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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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
  • Shobbir Ahmed

    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
  • Sam
    Community Moderator

    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
  • Shobbir Ahmed

    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
  • Sam
    Community Moderator

    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
  • Shobbir Ahmed

    Aah, my bad!

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

    0
  • Shobbir Ahmed

    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
  • Sam
    Community Moderator

    Hi Shobbir!

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

    0
  • Shobbir Ahmed

    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
  • Sam
    Community Moderator

    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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

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

     

     

     

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

    0
  • Shobbir Ahmed

    That has worked perfectly, thank you both!

    0
  • François Bellavance

    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
  • Dave Dyson
    Zendesk Community Manager
    Hi François, 
     
    Have you added this Javascript code to each of your brands' themes?
     
    0
  • François Bellavance

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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
  • François Bellavance

    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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi François Bellavance. :)

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

     

    Thanks

    0
  • François Bellavance

    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
  • François Bellavance

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

Please sign in to leave a comment.

Powered by Zendesk