最近の検索

最近の検索はありません

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

投稿日時：2022年10月20日

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

69

69件のコメント

日付
    新しい順
      image avatar

      Pete

      Hi Ifra Saqlain

      I had previously used the below code to prefill and hide the subject and description field on our form but it stopped working.

        //Hiding description and subject lines from specific new request form
        var ticketForm = location.search.split('ticket_form_id=')[1];

      if(ticketForm == 11425629164941) {
      $('.form-field.request_subject').hide(); // Hide subject
      $('.form-field.request_description').hide(); // Hide description
      $('.form-field.request_collaborators_').hide(); // Hide CCs
      $('.form-field.request-attachments').hide(); // Hide attachment upload
      $('#request_subject').val('Comp Account Req'); // autofill subject
      $('#request_description').val('Comp Account Req'); // autofill description
      }

      I tried using your example in this thread but it still didn't work.  Any chance you are able to help?

      Thanks

      0

      image avatar

      Ifra Saqlain

      @Marc, are these anchor tag of dropdown fields?

      var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
      var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
      var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');

       

      Can you please share the public URL here?, so it would be easy for me to figure out.

       

       

      0

      image avatar

      Marc

      Hi Ifra, 

      Thank you for your response. I attempted to add the closing tags but unfortunately it did not resolve the issue. Upon added the missing the closing tags the hidden subject line appeared. 

      I tested a few things to isolate the issue and noticed that when using the variable bn with .text; I lose all formatting and the subject line only read "FORM Request". 

      $('#request_subject').val(rt.text + " - "+ cn.text + " - " + bn.text);

      However, when using the variable cn twice (ref: below) the subject line read as expected "RT String - CN String - CN String"

      $('#request_subject').val(rt.text + " - "+ cn.text + " - " + cn.text);

      I'm wondering if since bn is not a drop-down menu selection but is instead a numerical value / regex field type, if that makes any difference.

      Below is the reposted code including the beginning if statement. 


        if(location.href.indexOf("/hc/en-us/requests/new?ticket_form_id=360001541692") !=-1){
              
          $('#request_subject').val("FORM Request");
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
           var pt = rt.parentElement;
          
           let reminder = document.createElement('reminder');
           pt.appendChild(reminder);
           let req = document.createElement('req');
          
           $(".request_custom_fields_360040294151").change(function () {   
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
               $('#request_subject').val(rt.text + " - "+ cn.text + " - " + bn.text);
           });
               $(".request_custom_fields_5975694187661").change(function () {   
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
               $('#request_subject').val(rt.text + " - "+ cn.text + " - " + bn.text);

      0

      image avatar

      Ifra Saqlain

      Marc, first thing is, closing tags are missing at the end of the code

         $('#request_subject').val("FORM Request");
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
           var pt = rt.parentElement;
          
           let reminder = document.createElement('reminder');
           pt.appendChild(reminder);
           let req = document.createElement('req');
          
           $(".request_custom_fields_360040294151").change(function () {   
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
               $('#request_subject').val(rt.text + " - "+ cn.text + " - "+ bn.text);
           });
               $(".request_custom_fields_5975694187661").change(function () {   
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
               $('#request_subject').val(rt.text + " - "+ cn.text + " - "+ bn.text);

      }) // Missing

       

      And, If you share URL of your theme where you working with this code it would be good to catch the issue.

      0

      image avatar

      Marc

      Hi Ifra Saqlain

      I was hoping you could assist with the below js script. We're encountering a situation where the subject line was prefixing the subject line variables. Once we added bn it removes everything. Note - bn is regex while rt is a drop down and CN is text.

          $('#request_subject').val("FORM Request");
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
           var pt = rt.parentElement;
          
           let reminder = document.createElement('reminder');
           pt.appendChild(reminder);
           let req = document.createElement('req');
          
           $(".request_custom_fields_360040294151").change(function () {   
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
               $('#request_subject').val(rt.text + " - "+ cn.text + " - "+ bn.text);
           });
               $(".request_custom_fields_5975694187661").change(function () {   
           var rt = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_5975694187661 > a');
           var cn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360040294151 > a');
           var bn = document.querySelector('#new_request > div.form-field.string.required.request_custom_fields_360017033972 > a');
               $('#request_subject').val(rt.text + " - "+ cn.text + " - "+ bn.text);
                 

      1

      image avatar

      Alyssa

      That worked perfectly! Thank you again, Ifra Saqlain, for your fast and thoughtful help. You're an absolute superstar! Are there any Zendesk resources that would help me better grasp vanilla Javascript?

      0

      image avatar

      Ifra Saqlain

      Alyssa, use this code to hide form from th users:

      document.querySelector(".list-group a[href*='12864137196941']").remove();

      document.querySelector(".list-group a[href*='12863836871949']").remove();

       

      The given id will hide your first and second forms form in the list:

      12864137196941 - I am creator and I need support

      12863836871949 - I have a support question, and I am not a creator on petreon

       

      you just need to add form IDs in the given line:

      document.querySelector(".list-group a[href*='Form ID']").remove();

       

      See the anchor tag in this image, there is form ID (inspect tool) in URL, only copy that numbers from the URL and paste in the code as I did:

       

      The given code is complete code , it will hide form from dropdown list and from that page where all forms are listed

      document.addEventListener("DOMContentLoaded", function() {

       document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
        
       event.target.querySelector('li[id="0000000"]').remove();
          
       event.target.querySelector('li[id="1111111"]').remove();

        });


      document.querySelector(".list-group a[href*='12864137196941']").remove();

      document.querySelector(".list-group a[href*='12863836871949']").remove();

      });

       

      0

      image avatar

      Alyssa

      Ifra Saqlain that worked to hide the forms from the dropdown, however, it's not working for this page (see the image below). I need to hide the option from all lists for the visitor. Thank you so much for your help!

      0

      image avatar

      Ifra Saqlain

      No problem Alyssa !

      completely hide forms from the new_request list

      Means, you are hiding forms from dropdown list?

      If Yes, use the below code: add the given code to your script.js file at the bottom area.

      document.addEventListener("DOMContentLoaded", function() {

       document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
        
       event.target.querySelector('li[id="0000000"]').remove();
          
       event.target.querySelector('li[id="1111111"]').remove();



        });
      });

       

      0000000 and 1111111 is my form ID which I wanna hide from dropdown list on new request page.

       

      Replace these ids with your IDs and you can hide mode forms just adding this single line of code:

       event.target.querySelector('li[id="222222"]').remove();

       

       

      Credit: @Sam

      https://support.zendesk.com/hc/en-us/community/posts/4409515399066-How-to-disable-the-ticket-form-dropdown-

       

       

      0

      サインインしてコメントを残してください。

      その他のコンテンツ

      詳細
      Resources to customize your help center
      Best practices for your help center

      お探しのものが見つかりませんか？

      新規投稿