Recent searches


No recent searches

Prefill and hide Subject & Description fields of specific form on New Request Template



image avatar

Ifra Saqlain

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

Posted Oct 20, 2022

Hello Everyone,

Credit

Zendesk Product(s): Zendesk Guide

Code Requirement: JavaScript

Template: New Request page

Scenario: Prefill the subject and description fields (if fields are required) and then hide both fields or only one field (depends on requirement).

 

Quetion: 

How to hide subject and description on new request template for the specific form?

 

Answer:

You want to hide the fields only for one form then check the form ID using the window location code with the IF condition using the JavaScript.

Source:
  
if (window.location.href.indexOf("00000000") > -1) {
      document.querySelector('.request_subject').style.display= "none";
      document.querySelector('.request_description').style.display= "none";
}



Note: Remove 00000000 and add your form-id.

 

 

Output:


Form One - With subject and description field.






Form Two - Subject and description fields are hidden because I added the form ID of this form in the script code.

 

 

Where to add the code?

You can see how I added the code to the script.js file inside the function.

Screenshot:

 

i). Go to Help Center > Guide Admin > Customize Design > Edit code.

ii). Find the script.js file.

iii). Add the shared code to hide subject and description field on new request template.

iv). Make sure code should be inside the DOMContentLoaded

 

Open Tag:

 

 

Close Tag:

 

 

Quetion:

How to get prefilled subject and description fields of a ticket of a specific form on new request template?

 

Answer:

If both fields are required then you can't submit a ticket without filling these. 

To get prefilled fields of specific form, use the given code.

Source:

 if (window.location.href.indexOf("00000000") > -1) {
      document.querySelector('#request_subject').value= "Write your text for subject field.";
      document.querySelector('#request_description').innerHTML= "Write your text for description field.";
  }




Note: Remove 00000000 and add your form-id.
 

 

 

Output:

 

 

Where to add the code?

 

i). Go to Help Center > Guide Admin > Customize Design > Edit code.

ii). Find the script.js file.

iii). Add the shared code to hide subject and description field on new request template.

iv). Make sure code should be inside the DOMContentLoaded

 

Open Tag:

 

 

 

Close Tag:

 

 

 

Important: If your fields are required (if you have set) and you hide both then request form will not be submit. Use the below code to prefill and then hide the fields.

Source:

  if (window.location.href.indexOf("00000000") > -1) {
// Autofill subject field    
  document.querySelector('#request_subject').value= "Write your text for subject field.";  

// Autofill description field    
   document.querySelector('#request_description').innerHTML= "Write your text for description field.";
      
// Hide subject field     
  document.querySelector('.request_subject').style.display= "none";
     
// Hide description field 
 document.querySelector('.request_description').style.display= "none";
  }

 

NOTE: If this line of code doesn't work for anyone:-

  document.querySelector('#request_description').innerHTML= "Write your text for description field.";

they can use this line instead of the above line of code.

  document.querySelector('.request_description > textarea').value = 'Write your text for description field.';

 

 

Thanks :)

 

 


4

67

67 comments

Alex Thornhill I am experiencing the same issue. Since the upgrade to templating v4 it seems like every guide about editing the java code of the theme no longer work. I know this doesn't solve your issue, but maybe some comfort you are not alone?

Ifra Saqlain I appreciate I have come across this article on the same day as your latest comment but I would like to add it would be incredible appreciated if you were able to come up with an updated guide/solution. Thanks in advance!

0


Hello I was doing some digging and managed to find a solution to pre-fill and hide the Subject and Description fields with the following code in Copenhagen v4.2.4. 

As I'm rather new to JS, I appreciate this code may be more complicated than it needs to be, and possibly could be simplified by a pro, but it works! :) 

Make sure to change  wysiwyg: true, to    wysiwyg: false, in the new_request_page.hbs. 

I used the following, added to the bottom of my script.js:

// Pre-fill the Subject and Description fields for specific form
function prefillForm() {
   const container = document.getElementById("new-request-form");
   if (container) {
       // Wait for the form to render
       const observer = new MutationObserver(() => {
           const form = container.querySelector("form");
           const formField = container.querySelector("input[name='request[ticket_form_id]']");

           if (form && formField && formField.value === "insert form-id") // Replace with your form ID
           {
               const subjectField = container.querySelector("input[name='request[subject]']");
               const descriptionField = container.querySelector("textarea[name='request[description]']");

               if (subjectField && descriptionField) {
                   // Pre-fill values
                   subjectField.value = "Enter your pre-fill text here"; // Replace with your desired subject
                   descriptionField.value = "Enter your pre-fill text here."; // Replace with your desired description

                   // Hide fields by setting their style
                   subjectField.style.display = "none";
                   descriptionField.style.display = "none";

                   // Hide the labels for these fields
                   const subjectLabel = container.querySelector("label[for='" + subjectField.id + "']");
                   const descriptionLabel = container.querySelector("label[for='" + descriptionField.id + "']");
                   if (subjectLabel) subjectLabel.style.display = "none";
                   if (descriptionLabel) descriptionLabel.style.display = "none";

                   // Hide additional header texts or descriptions
                   const subjectHeader = container.querySelector("h2:contains('Subject')");
                   const descriptionHeader = container.querySelector("h2:contains('Description')");
                   const descriptionDetails = container.querySelector("p:contains('Please enter the details of your request.')");

                   // Disconnect observer after fields are populated
                   observer.disconnect();
               }
           }
       });

       // Observe the container for changes
       observer.observe(container, {
           childList: true,
           subtree: true
       });
   }
}

// Ensure the script runs when the DOM is fully loaded
window.addEventListener("DOMContentLoaded", prefillForm);
})();

0


Hi Domokos, 

 

thank you for this. Is there a specific place in the Script.js file where this should be input?

 

Also, can you point out which variables we should change to customize to our form? (i.e. Form ID, the info we want input into the subject and description etc.?


it's a bit confusing to figure out what should be replaced in the code for our particular scenario.

 

Thanks again for posting this. Super helpful!

 

0


Hi Domokos, 

 

so I added the code to the bottom of my script.js file and it worked. The only issue I have is that I am still seeing the description details, which I think is supposed to be hidden by this line:

 

const descriptionDetails = container.querySelector("p:contains('Please enter the details of your request.')");

 

Would you be able to help me also hide the attachments?

 

Thank you.

0


Hi Bruce,

 

I actually struggled with this and didn't manage to hide the description detail. In the end I just removed the description from the Field within zendesk admin and just updated the Title to be more suitable across multiple forms. 

For the attachment I have this:

 // Check if the form exists and contains the ticket form ID
 const attachmentField = container.querySelector("div[data-garden-id='forms.file_upload']");


//  Attachments fields and their labels/headers
 attachmentField.style.display = "none";

 // Hide the Attachments label
         const attachmentLabel = container.querySelector(`label[for='${attachmentField.querySelector("input").id}']`);
         if (attachmentLabel) attachmentLabel.style.display = "none";

 

________________________________________________________________________________

an updated code that i use for multiple forms now looks like this:
Replace 000000000-000000003 with your form IDs. Subject, Description and Attachment fields will be hidden all these forms. 

 

 


// Pre-fill Form & Hide Fields

function prefillForm() {
 const container = document.getElementById("new-request-form");
 if (container) {
   // Wait for the form to render
   const observer = new MutationObserver(() => {
     const form = container.querySelector("form");
     const formField = container.querySelector("input[name='request[ticket_form_id]']");

     // Check if the form exists and contains the ticket form ID
     if (form && formField) {
       const subjectField = container.querySelector("input[name='request[subject]']");
       const descriptionField = container.querySelector("textarea[name='request[description]']");
       const attachmentField = container.querySelector("div[data-garden-id='forms.file_upload']");
       const descriptionHint = container.querySelector("div[data-garden-id='forms.input_hint']"); // For the instruction text

       if (subjectField && descriptionField && attachmentField) {
         // Determine the form ID and apply specific pre-fill text
         if (formField.value === "000000000000000") {
           // Pre-fill for form ID 0000000000000
           subjectField.value = "ENTER YOUR TEXT HERE";
           descriptionField.value = "ENTER YOUR TEXT HERE";
         } else if (formField.value === "0000000000001") {
           // Pre-fill for form ID 00000000000001
           subjectField.value = "ENTER YOUR TEXT HERE";
           descriptionField.value = "ENTER YOUR TEXT HERE";
         } else if (formField.value === "00000000000002") {
           // Pre-fill for form ID 000000000002
           subjectField.value = "ENTER YOUR TEXT HERE";
           descriptionField.value = "ENTER YOUR TEXT HERE";
         } else if (formField.value === "000000000003") {
           // Pre-fill for form ID 0000000003
           subjectField.value = "ENTER YOUR TEXT HERE";
           descriptionField.value = "ENTER YOUR TEXT HERE";
         } else {
           // For other forms, exit without making changes
           observer.disconnect();
           return;
         }

         // Hide Subject, Description, Attachments fields and their labels/headers
         subjectField.style.display = "none";
         descriptionField.style.display = "none";
         attachmentField.style.display = "none";

         // Hide the labels for these fields
         const subjectLabel = container.querySelector(`label[for='${subjectField.id}']`);
         const descriptionLabel = container.querySelector(`label[for='${descriptionField.id}']`);
         if (subjectLabel) subjectLabel.style.display = "none";
         if (descriptionLabel) descriptionLabel.style.display = "none";

         // Hide the Attachments label
         const attachmentLabel = container.querySelector(`label[for='${attachmentField.querySelector("input").id}']`);
         if (attachmentLabel) attachmentLabel.style.display = "none";

        // Hide additional headers or instructions if present
         const subjectHeader = container.querySelector("h2:contains('Subject')");
         const descriptionHeader = container.querySelector("h2:contains('Description')");

         if (subjectHeader) subjectHeader.style.display = "none";
         if (descriptionHeader) descriptionHeader.style.display = "none";

         // Disconnect observer after making changes
         observer.disconnect();
       }
     }
   });

   // Observe the container for changes
   observer.observe(container, { childList: true, subtree: true });
 }
}

// Ensure the script runs when the DOM is fully loaded
window.addEventListener("DOMContentLoaded", prefillForm); 

 

___________________________________________________________________

ChatGPT done a lot of work on this and I suspect it can be simplified by someone who has more experience with JS. But hey, it works! :)
 

1


Amazing!! Thank you so much Domokos! This worked beautifully!

0


Hello. 

I have the code to add to new_request_page.hbs to condition a field according to the form ID, and it works fine.
And I'd like to do the same thing, but by conditioning a field according to the value of another custom field, either a drop-down list or a text field, but I can't manage to adapt the code. I must be missing something simple. 

Thanks in advance for your help!

 

Simple codes that work:

if ($("#request_issue_type_select").val() == "123456789") {
 $("#request_subject").val("New request");
};

if ($("#request_issue_type_select").val() == "123456789") {
$("#request_custom_fields_11111").val("value");
};

 

Simple codes that don't work:

if ($("#request_custom_fields_11111").val() == "value") {
 $("#request_subject").val("New request");
};

if ($("#request_custom_fields_22222").val() == "value") {
$("#request_custom_fields_11111").val("value");
};

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post