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

32 Comentarios

  • Raphaël Péguet - Officers.fr

    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! 🙏

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @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

    0
  • Raphaël Péguet - Officers.fr

    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

    0
  • Teresa

    Hi Ifra Saqlain, 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!

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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

    0
  • Teresa

    Hi Ifra Saqlain! 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!

     

     

     

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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. 

    0
  • Teresa

    Hi Ifra Saqlain , 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? 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

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

    0
  • Teresa

    Hi Ifra Saqlain! 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!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Nicole, copy and paste the given code and see the output:

    $("#request_subject").val("New request");
    $("#request_custom_fields_12929052282519").keyup(function(event) {
      var stt = $(this).val();
      $("#request_subject").val(stt + " New Request");
    });





    Output:

     

    let me know if it works for you.

    1
  • Teresa

    Ifra Saqlain Just tried the code. When I use this, it unhides the Subject field. I did try to add the line of code to hide it, but even with that in it didn't hide. 

    I added : $('.form-field.string.required.request_subject').hide();

    I tried it at a couple spots (above the new code, below the new code) and nothing worked. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Nicole I just tried again:

    URL

     

    It is working, subject field already hidden in the form, I pasted that code and that is working.

     

     

     

    0
  • Teresa

    Hi Ifra, 

    I just messed with the code a little bit and got it to work! Thank you for being such a rockstar! I'm going to list what worked for me below in case anyone else stumbles on this. If you can unlink our HC that would be great. I wish I could upvote your posts more than once, lol!!

     

    //hide subject and autofill subject on submission for form
    if ($("#request_issue_type_select").val() == "FormID") {
      $("#request_subject").val("New request");
      $("#request_custom_fields_fieldID").keyup(function(event) {
      var stt = $(this).val();
      $("#request_subject").val(stt + " New Request");
    });
        $('.form-field.string.required.request_subject').hide(); // Hide subject 
    };

     

     

     

    0
  • Teresa

    Hi Ifra Saqlain Can you possibly unlink our HC two comments up? Thank you so much, and as always, I appreciate your help so very much!!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Thanks Nicole!

     

    0
  • Teresa

    Hi Ifra Saqlain, its the link in your comment on this page. TY!

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Done!

    0
  • Alyssa

    Hi Ifra Saqlain I'm trying to adapt this code to completely hide forms from the new_request list. 

    This is what I've got so far, but it's not working

    if (window.location.href.indexOf("new_request") > -1) {
        document.querySelector('.ticket_form_id=4719898103693').style.display= "none";
        document.querySelector('.ticket_form_id=360000334451').style.display= "none";
    }

    I'm using a Zenplates theme, and there isn't a DOMContentLoaded line at the top of the script.js template page. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • 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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • 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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Great that it worked !

     

    I think: https://support.zendesk.com/hc/en-us/articles/4408836487450-Help-center-JavaScript-cookbook

     

     

     

     

    0
  • 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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • 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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @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
  • 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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Pete,  add the given code to your script.js file, it will work for you:

     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";
      }

     

    00000000: Remove this zeros and add your form ID.

    If any issue let me know :)

    Thanks 

     

     

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk