Prefill and hide Subject & Description fields of specific form on New Request Template | The place for Zendesk users to come together and share
Skip to main content
Ifra
Contributor
October 20, 2022

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

  • October 20, 2022
  • 69 replies
  • 590 views

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

 

 

69 replies

raphael12
November 4, 2022

Hi @ifra you seems very skilled(congrats!)

Do you know the way to align side to side some fields? please

Like this:

Best regards! 🙏

Ifra
IfraAuthor
Contributor
November 4, 2022

@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

Thank You
raphael12
November 14, 2022

Dear @ifra

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

March 14, 2023

Hi @ifra, not sure if you can help. I've been over a few pages on hiding the subject from a form and auto-populating it using the script.js file using the following: 

 

if ($("#request_issue_type_select").val() == "123456") {
    $('.form-field.string.required.request_subject').hide(); // Hide subject 
  $('#request_subject').val('Custom text here'); // Autofill subject

What I'm looking to do is add a custom text field from the form to the beginning of the subject, in addition to some standard custom text. However, I'm not sure how to accomplish this with js. I did find where you can do it using a webhook, but I'd like to stay away from that and stick to code in the js file if possible. 

Basically, I need to autofill the subject with (custom_text_field_12345) + ("Custom text here"). Do you know if this can be achieved? Thanks in advance for any input you can offer!

 

Ifra
IfraAuthor
Contributor
March 15, 2023

HI Nicole,

If you already have a custom-text-field-1234 then simply do the following:

// Autofill custom text field   
document.querySelector('#custom-field-id-17365969036').value= "Write your text here";

Where custom-field-id-17365969036, is the id of this element, you can get it by inspect tool

Mouse hover over the field > right-click > select Inspect > see the id of field > copy that >  remove custom-field-id-1736596903 and paste that here.

 

And,

Write your text here : Remove this text in the code and write yours.

 

To autofill the subject field then add the below code:

// Autofill subject field    
  document.querySelector('#request_subject').value= "Write your text for subject field.";

 

Here, subject id is same for all so you only need to update the text in the code.

 

 

If you don't have custom text-field then create that first.

Go to Admin Center click  Objects and rules in the sidebar, then select Tickets > Fields.

After creating, you can see that custom field in your form then do the points which I share above.

 

If any confusion feel free to ask :)

Thanks

Thank You
March 15, 2023

Hi @ifra! Thank you for helping! I may have not explained myself well. I don't need to autofill a custom field, the end user will still enter their value. I need to add a custom field to an autofill subject. Something like this: 

$('#request_subject').val(('#custom-field-id-17365969036') 'Custom text here'); // Autofill subject

 

The end result I'm looking for in the subject is something like: 

"John Doe New Ticket Request"

Where John Doe is what the end user entered for their name in the custom field, and New Ticket Request is what was autofilled for each ticket subject. I hope that better explains it!

 

 

 

 

Ifra
IfraAuthor
Contributor
March 15, 2023

Hi Nicole,  now I understood your query and it's possible, it could be done like this:

var _x = $("#custom-field-id-17365969036").html();
$('#request_subject').val(_x + ' ' + 'New Ticket Request');

After creating ticket using this technique and making t live, check the ticket title in Ticket dashboard of Support.

Try this and let me know. 

Thank You
March 17, 2023

Hi @ifra , I just got done testing this. Instead of showing:  John Doe New Ticket Request

Within Support it shows as:  undefined New Ticket Request

I'm wondering if this is because there isn't a value for the field until submission? 

Ifra
IfraAuthor
Contributor
March 17, 2023

Nicole, can you share public URL of your HC? I wanna see.

Thank You
March 19, 2023

Hi @ifra! I sure can! I'll leave the link up for a day or two. The direct form I'm trying to make this work for is: [link to HC]. The custom field I'm trying to get into the subject is the Name field. Ty!