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

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


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

0


Thanks Sam!

0


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


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


Hi Tracy Scobba!

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

0


image avatar

Brandon (729)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

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


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. 

0


image avatar

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


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


image avatar

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


Brandon (729) 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


image avatar

Brandon (729)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

Hey Adam,

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


Hi Brandon (729) 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


image avatar

Brandon (729)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

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


Hi Brandon (729) - 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


image avatar

Brandon (729)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

Hmmm - let's try a different approach Adam:

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


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


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


image avatar

Ifra Saqlain

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

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


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


image avatar

Brandon (729)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

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


Hey Brandon (729) & 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


image avatar

Ifra Saqlain

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

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


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


image avatar

Ifra Saqlain

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

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


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


image avatar

Ifra Saqlain

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

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


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


image avatar

Ifra Saqlain

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

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

0


Please sign in to leave a comment.