Domokos Wootsch

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! :)
 

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);
})();