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

Return to top

154 Comments

  • Tracy Scobba

    What happened to all of the older comments on this topic? I'm looking for information on how to pull custom field text into my subject, and I believe it used to be here. Plus, I've done some searching in Google and several hits show as "page doesn't exist." Did Zendesk do a clean-up? I miss the old content.

    0
  • Sam
    Community Moderator

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

    0
  • Dave Dyson
    Zendesk Community Manager
    Thanks Sam!
    0
  • Tracy Scobba

    Thanks, Sam but I worry about using the HTML target that will be going away. Can I do the same thing with a Web Hook?

    0
  • Tracy Scobba

    Has anyone got this error after making the changes to the java script? What's weird is that I don't get the error if I'm not logged in but I do if I am.

    0
  • Sam
    Community Moderator

    Hi Tracy Scobba!

    You certainly can. I updated the instructions to reflect! The fields are essentially the same:

    0
  • 이지훈

    I realized there was a critical problem with this method.

    If the end user accidentally clicks the submit button without filling in the required fields(*) in the ticket form that hides the title and description using .hide(), the title and description are exposed on the redirected page. This opens a hole for end users to change their titles and descriptions.

    Has anyone confirmed this or solved it?

     

    0
  • Brandon Tidd
    Community Moderator
    The Humblident Award - 2021

    Thanks for reaching out!  You could try using JavaScript to confirm required fields before submitting:

    for (const el of document.getElementById('form').querySelectorAll("[required]")) {
      if (!el.reportValidity()) {
        return;
      }
    }
    0
  • Tyler Rutledge

    We have this working perfectly on many forms but when we use a URL to pre-fill certain fields on 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? 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hi Tyler Rutledge,

    Sorry for the delay in getting back to you!

    Not sure if you're still experiencing issues with this, but if you are can you try running the code below on your end and let me know if that has any effect on correctly hiding the fields? 

    const autoFill = () => {
      document.getElementById("request_subject").value = "test subject"
      document.getElementById("request_description").value = "test description"
    }

    const hide = () => {
    document.querySelector('.request_subject').style.display = 'none'
      document.querySelector('.request_description').style.display = 'none'
    };

    if(ticketForm == 4418185168269) {
    autoFill();
      hide();
    }

     

    0
  • Tyler Rutledge

    Hello Tipene Hughes!

    Thanks for the support on this! I got this working but the same problem exists with this script. When I implement your suggested script, the fields are hidden correctly. Accessing the form via the normal link like: https://companyname.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269 works correctly.

    As soon as you prepopulate any custom fields using the URL such as: https://companyname.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269&tf_360049698092=testemail@gmail.com, the subject and description show again. 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Tyler Rutledge,

    I'm going to create a ticket so we can troubleshoot this in a bit more detail. You should see a message come through shortly!

    0
  • Adam Ashby-Clarke

    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
  • Brandon Tidd
    Community Moderator
    The Humblident Award - 2021

    Hey Adam Ashby-Clarke,

    This is using the Mutation Observer and, 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

    1
  • Adam Ashby-Clarke

    Hi Brandon Tidd thanks very much.  Apologies, im not massively knowledgable around this, should I be adding this to my new_request_page or to the script.js file?

    Any pointers would be appreciated, thanks!

    Adam

    0
  • Brandon Tidd
    Community Moderator
    The Humblident Award - 2021

    Hey Adam Ashby-Clarke my pleasure!

    The code itself should be added to the script.js file.
    (you'll also need to install jQuery by following these instructions).

    Let me know how it goes!

    Brandon

    0
  • Adam Ashby-Clarke

    Hi Brandon Tidd - thanks, I still seem to be struggling - can you advise if this is correct?  I have the document ready function in my script.js and I have the Jquery installed in my document_head.hbs as per the instructions, but still, when I hit submit on a form, it behaves the same way (red boxes showing required fields, and any hidden fields re-appear).  Thanks in advanced for all your help.

     

    Adam

     

    0
  • Brandon Tidd
    Community Moderator
    The Humblident Award - 2021

    Hmmm - let's try a different approach Adam Ashby-Clarke:

    This approach uses something called a Mutation Observer, that looks for changes in specific fields.  If it doesn't see an update on a required field, it prevents the form submission from executing, thus preventing the 'error' that exposes your hidden fields.  

    This example looks specifically for a change in the checkbox (customfield_123456789) that indicates an attachment is required.  Note - you'll want to replace the field IDs with your field IDs in both the CSS and JS

    CSS
    /* required attachment */
    #request_custom_fields_123456789_label,
    #request_custom_fields_123456789 {
    	display: none;
    }
    .form-field label span.optional {
      display: none;
    }
    JS
    make sure to change the field ID in
    var attachmentCheckboxField = ‘request_custom_fields_123456789’;
    and
    var formDropdownClass = ‘.request_custom_fields_123456789’;
    // required attachment
    // Function to start observing node for mutations
    var startObserveMutations = function (nodeSelector, options, callbackFunction) {
    var node = document.querySelector(nodeSelector);
    if (node) {
       var observer = new MutationObserver(callbackFunction);
       observer.observe(node, options);
      return observer;
      }
    };
    
    // Callback function to execute when mutations in form attachments or dropdown are observed: 
    // clear or select Attachment checkbox according to dropdown
    var mutationObservedForm = function (mutationsList) {
      mutationsList.forEach(function (mutation) {
        if (mutation.type == 'childList') {
          setFormAttachmentCheckbox();
        }
      });
    };
    
    // Define some variables for requiring form attachments
    var attachmentCheckboxField = 'request_custom_fields_123456789';
    var attachmentCheckboxId = '#' + attachmentCheckboxField;
    var attachmentErrorNotification = 'Attachment required to submit';
    var formDropdownClass = '.request_custom_fields_123456789';
    var formObserveMutationOptions = { childList: true, subtree: true };
    
    // Clear or select checkbox according to dropdown and attachments:
    // Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it
    function setFormAttachmentCheckbox() {
      if (isFormAttachmentRequired()) {
        if ($('#request-attachments-pool .upload-item').length) {
          selectCheckbox(attachmentCheckboxId);
        }
        else {
          clearCheckbox(attachmentCheckboxId);
        }
      }
      else {
        selectCheckbox(attachmentCheckboxId);
      }
    }
    
    // Return true if dropdown option 'ABCD' is selected
    function isFormAttachmentRequired() {
      return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
             $(formDropdownClass + ' a.nesty-input').text() === 'ABCD';
    }
    
    // Select checkbox
    function selectCheckbox(eltselector) {
      $(eltselector).prop('checked', true);
    }
    
    // Clear checkbox
    function clearCheckbox(eltselector) {
      $(eltselector).prop('checked', false);
    }
    
    // If attachment checkbox field exists:
    //   Select the checkbox if attachment is not required
    //   Watch for changes to attachments and dropdown
    if ($(attachmentCheckboxId).length) {
      if (!isFormAttachmentRequired) {
        selectCheckbox(attachmentCheckboxId);
      }
      startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
      startObserveMutations(formDropdownClass,formObserveMutationOptions, mutationObservedForm); 
    }
    
    // Adjust attachment error notification
    var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
    if (attachmentErrorElt.length) {
      attachmentErrorElt.text(attachmentErrorNotification);
    }

    Let me know how this goes for you.  Please note that this also uses the already installed jQuery.

    0
  • Tyler Rutledge

    Hello Tipene Hughes!

    I apologize for missing your previous reply and ticket about this. I would still appreciate the support on this request and our account assumption is enabled. Is it possible we could resume the conversation on this topic? 

    https://support.zendesk.com/hc/en-us/articles/4408882841498/comments/4419957278618

    0
  • Shobbir Ahmed

    Hey all,

    I have very little experience of coding - where/how would I add code to hide the description field?

    I have one form with conditional fields:

     

    I want to get rid of the default description field only (changed to any other relevant info):

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

    Hey Shobbir,  first of all you need to remove the required condition from the description field,  and then you can easily hide it with the CSS.

     

    Remove require condition from description field: https://support.zendesk.com/hc/en-us/articles/4408846008218

     

    ADD CSS on style.css file

    .request_description{display:none}



    Screenshot to get idea - Where:

     

    Team

    0
  • Shobbir Ahmed

    Hey Ifra,

    I am unable to make that field not required:

     

    The conditional fields I have used don't include the description field but it always appears as it is a system field (from what I can understand).

     

    Thanks for help

    0
  • Brandon Tidd
    Community Moderator
    The Humblident Award - 2021

    Hi Shobbir Ahmed -

    Unfortunately the description field is required to have *some* content as you can't have a blank ticket.  That said, you can prefill and hide the field using the instructions outlined in the article.

    Hope this helps!

    Brandon

    0
  • Shobbir Ahmed

    Hey Brandon Tidd & Ifra Saqlain - I don't know where/how to deploy the code to autofill the description and hide it.

    This is what my script shows:

    Thanks

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

    Hello Shobbir Ahmed :),  follow the steps below:

     

    1). Copy the below code snippet and paste it at the bottom of your script.js file.

      document.addEventListener("DOMContentLoaded", function () {
      function hideDescriptionField(){
       var descriptionField = document.querySelector('#request_description');
        descriptionField.innerHTML = 'Hello users';
        descriptionField.style.display= "none";
      }
      hideDescriptionField()
    });



    Screenshot for the same:

     

    It would prefill the description field and then hide that. If any confusion, feel free to ask.

    Thanks

    Team

    0
  • Shobbir Ahmed

    Thanks very much Ifra Saqlain - this is what I now have:

    Is there any way to remove the highlighted part?

    It also looks like the autofill part comes up when an end user submits a ticket:

     

     

    I entered test2 in the 'Please specify ..' box but that shows only to agent on back end. I want the user's message to be displayed instead of the autofill 'hello users'

    Thanks

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

    Remove the previous JS code and add the below:

     document.addEventListener("DOMContentLoaded", function () {
        
        
        function hideDescriptionField(){
        var descriptionWarpper = document.querySelector('.form-field.request_description');
       var descriptionField = document.querySelector('#request_description');
        descriptionField.innerHTML = 'Hello users';
        descriptionWarpper.style.display= "none";
      }
      hideDescriptionField();

    });

     

     

    Give me some time and please share your public Help Centre URL, so I can see your new request page and will share the exact solution.

     

    You have multiple forms and you want to hide the description field only on one form, not for all, right?

    Thanks

     

     

     

     

     

     

    0
  • Shobbir Ahmed

    Thanks Ifra Saqlain - the description box is now completely hidden.

     

    We have one form with conditional fields - which comes to 6 forms in total. We want the description field hidden for all forms which I have now managed to do.

    The remaining issue is for one of our forms (Standard Request) we have a field called 'Please specify the details of your request' - we want to use this like the description field - so when end users submit a ticket the info will appear at the back end:

     

     

    hello users should be replaced by the highlighted part.

    the other option is to remove the description field from all the other forms and just have it on the 'Standard Request' form - not sure if this can be done with conditional fields.

     

    Thanks

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

    Hey Shobbir Ahmed,

     

    Good Idea:

    the other option is to remove the description field from all the other forms and just have it on the 'Standard Request' form - not sure if this can be done with conditional fields.

     

     

    1). Remove the description box from all forms.

    2). Only have it on the Standard Request form.

    3). Change the label of the description box: Description to Please specify the details of your request.

     

     

    Let's do this

    Remove the previously shared JS code and 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");
          
          if(window.location.href.indexOf('00000000') > -1) {
              descriptionWarpper.style.display= "block";
               descriptionLabel.innerHTML = 'Please specify the details of your request';
          
          } else {
            descriptionWarpper.style.display= "none";
              descriptionField.innerHTML = 'Hello Zendesk!';
          }
         }
        
        checkTicketId();
    });




    Note: Remove 00000000 in the script code and add your "Standard Request" form ID.

     

     

    Q. How can you get the ticket form ID?

     

    A. Select your form "Standard Request" and see it in the search bar of your window.

     

    Here, you will get the form ID in the searchbar.

     

    Copy the ID > Remove 00000000 in the script code > Paste your form ID which you have been copied.

     

    If any confusion feel free to ask :)

     

    Thanks

     

    0
  • Shobbir Ahmed

    Hey Ifra Saqlain - thank you for your help. Still having some issues, this is the code I pasted:

     

    The form ID I found here:

    As mentioned I only have one form with fields which are overridden by conditional fields:

    I copied the ID from the url as it doesn't show in guide:

    Thanks for your help

    0

Please sign in to leave a comment.

Powered by Zendesk