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

Return to top

203 Comments

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

     😊️

    0
  • Mark

    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 populates once 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 textfield request_custom_fields_2 to 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.

    0
  • Dave Dyson
    Hi François, 
     
    Have you added this Javascript code to each of your brands' themes?
     
    0
  • Charli

    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

    0
  • Andrii Kharkavyi

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

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

    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
  • Nicole

    Ifra Saqlain I just had a thought. Only one field is pulling in. That field is a text field. The other two are dropdowns and they don't add to the subject. Would the type affect anything? 

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

    :)

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

    Hi Vamshi R,

    Add the code to your script.js file but you need to add your form ID and field ID or class name as I mentioned below where to add.

     

    To hide description field:

     if (window.location.href.indexOf("00000000") > -1) {

    // Hide description field
    document.querySelector('.request_description').style.display= "none";
      }

    Note: Remove 00000000 and add your form ID for which form you want to hide.

     

    To hide the Email address field:

    if (window.location.href.indexOf("00000000") > -1) {

    // Hide description field
    document.querySelector('.request_description').style.display= "none";
      }

    Note: Remove 00000000 and add your form ID for which form you want to hide.
    Remove .request_description and add field ID or class.

     

    You can find your form ID in your search-bar.

     

    Team

    0
  • Sam

    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
  • Dave Potts

    All these tweaks are fine, except for the fact that if the customer forgets to fill in a mandatory field, the page resets to load the warning messages and you lose the ticket id in the url, rendering your custom script useless when trying to customise a specific ticket form ID.

    Does anyone have a fix for this?

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

    Hey Marsy Franco (admin),

    There was an extra curly bracket which I removed, now use the below code:

    document.addEventListener("DOMContentLoaded", function () {
        
        function hideDescriptionField(){
        var descriptionWarpper = document.querySelector('.form-field.request_description');
       var descriptionField = document.querySelector('#request_description');
        descriptionField.innerHTML = 'PostSurvey';
        descriptionWarpper.style.display= "none";
    }
      hideDescriptionField();
      
      
    });
    0
  • François Bellavance

    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
  • Adam

    Brandon Tidd Im facing the same issue, when you accidentially click submit, it unhides my fields I have hidden, can you share where to put that code that uses JS to confirm required fields before submitting? Thanks!

    0
  • Nicole

    So if you hide the description field, I know we can auto-populate/fill the field with a static phrase. Is there a way to copy a particular field on the form into the description field instead? 

    0
  • Sam

    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
    Zendesk Luminary
    Most Engaged Community Member - 2022
    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
  • 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
  • Bernard Ugalde

    Hi Ifra,

    Same result, they're still there

     

    0
  • Shobbir Ahmed

    Aah, my bad!

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

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

    My pleasure Brett Sir! and I'm glad that it's working for David :)

    0
  • Kevin Sanchez

    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
  • Brett Bowser
    Zendesk Community Manager
    Thanks for jumping in to help with this one Ifra! Glad you were able to ge this working on your end David :)  
    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Nicole,

    See the issue in your script code:

     

     

    Remove those last brackets:

     

     

     

    Team

    0
  • Sam

    Hi Tracy Scobba! I posted a comment covering this here. Hope it helps!

    0
  • Sam

    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
  • Test Con1

    Ifra Saqlain I used the same code which you shared with me, but still its asking for your email address field. Below is the code which i used.

     

    0
  • Sam

    Hi Shobbir!

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

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

    Nicole, when I select an option in dropdown, subject field does not afftect even after clicking both dropdown field but when I write something in textfield (at the end), subject field does affect with the both dropdown's selected values.

    I tried few ideas but but nothing is working.

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

    Okay, so remove previous code and use this one,  it's working as you wanna do:

    $("#request_custom_fields_0000000000,#request_custom_fields_1111111111,#request_custom_fields_222222222").keyup(function(event) { 
    var a = $("#request_custom_fields_0000000000").val();
    var b = $("#request_custom_fields_111111111").val();
    var c = $("#request_custom_fields_22222222222").val();
       $("#request_subject").val(a +" "+ b + " "+c+" " + " hey"); 
    });

    $('.request_subject').hide(); 


    000000000 -- My custom text field IDs, your custom fields have different ids, so update those.
    111111111 -- My custom text field IDs, your custom fields have different ids, so update those.
    22222222 -- My custom text field IDs, your custom fields have different ids, so update those.

     

    Thanks

    0

Please sign in to leave a comment.

Powered by Zendesk