Prefill and hide Subject & Description fields of specific form on New Request Template
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";
}
Thanks :)
-
Hi Ifra Saqlain you seems very skilled(congrats!)
Do you know the way to align side to side some fields? please
Like this:
Best regards! 🙏
-
@Raphaël Péguet, you can get it by CSS, pick the ID of your fields which you wanna set side by side and add the given CSS.
.request_description,
.request_subject {
margin-right: 10px;
float: left;
width: 35%;
}
Only for example but you need to add your custom field's classes and set the width per your requirements.I took the class of subject field and description field and then add css code to style.css file.
Output:
If any confusion feel free to ask :)
Thanks
Team
-
Dear Ifra Saqlain,
Sorry for the lateness of my answer I was in holidays just after asking,
Thank you a lot for this incredible tip, so useful !
Best regards,
Raphaël
Please sign in to leave a comment.
3 Comments