Recent searches
No recent searches
Prefill and hide Subject & Description fields of specific form on New Request Template
Posted Oct 20, 2022
Hello Everyone,
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 comments
Jonathan Heggie
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
Domokos Wootsch
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
Bruce Chang On
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
Bruce Chang On
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
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! :)
1
Bruce Chang On
Amazing!! Thank you so much Domokos! This worked beautifully!
0
Anne-Flore Caire
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