Recent searches


No recent searches

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

Posted Oct 20, 2022

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

67

67 comments

Hi,

We are able to populate the ticket subject but we can't seem to populate the ticket description with the provided code. We're on Copenhagen 2.16.1. Please advise.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Shubham Aggarwal,

After adding the above code, do one thing, go to your request_page.hbs and find this strig:   {{request_form wysiwyg=true}}

 

See the screenshot --

 

 

Make wysiwyg false as below:

 

 

It will resolve your query.

 

Thanks

 

 

0


Can someone provide some help?

I was able to hide and fill the subject and description with the following code but I would like to autopopulate de description with a custom ticket field that is being filled in the same ticket form. Is that possible?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Ulises Soto

What's your ticket custom field type? 

Dropdown list?

 Text Field?

Checkbox ?

Or something else?

0


Hi Ifra Saqlain,

It's a multi-line field 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Ulises Soto,

multi-line field, means what?

Dropdown field means when you click on the field a list will be open.

Text field means simple box as the subject field.

0


Hi Ifra Saqlain I tried to do what Nicole did where it inputted the field value into the subject and description but I couldn't get it to work. It kept showing as undefined like her results. This is the code I have and I'm working on jQuery so not javascript which is probably why I'm having some issues. Would you be able to assist? Thank you!

 

 //SET SUBJECT AND DESCRIPTION FOR FORMS
   var ticketForm = location.search.split('ticket_form_id=')[1];
     if(ticketForm == 12345) {
    var requestType = $("#custom-field-id-9876").html();
      $('#request_subject').val(requestType + ' ' + 'Portal Credential Request');
             $('#request_description').val('Request for' + ' ' + requestType);
   }

 

 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

 

 

Hi Noelle Cheng, 

 you didn't copy the same solution that I gave to Nicole,  the below code is the exact solution that I gave to Nicole, please use this correct code:

 

 //hide subject and autofill subject on submission for the form


if ($("#request_issue_type_select").val() == "TicketFormID") {
 $("#request_subject").val("New request");
 $("#request_custom_fields_FieldID").keyup(function(event) {
 var stt = $(this).val();
 $("#request_subject").val(stt + " Portal Credential Request");
    $('#request_description').val(stt + " Request for");
});
 
};

 

 

 

 

And you adding the value in your description field so do this :

 

 

 

 

 

If any issue feel free to ask :)

 

Thanks

 

0


Hi Ifra Saqlain 

Thank you so much for your immense help to the community.

I'm attempting to hide the subject and description fields, and automatically fill them with default text if only one value from a drop-down list is selected.

I've succeeded in making it work for the subject, but I'm struggling to find a way to auto-fill the description (so I've omitted it from the code below). Could you please assist? (maybe there's a simpler way to do it with jQuery ?)

 

In the new_request_page.hbs: 

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Custom field you want to listen
  var selectElement = document.getElementById('request_custom_fields_12368015596316');

  // Subject and Description fields
  var sujetField = document.querySelector('.request_subject');
  var commentaireField = document.querySelector('.request_description');

  // Function to hide Subject and Description fields
  function masquerChamps() {
    sujetField.classList.add('masque');
    commentaireField.classList.add('masque');
  }

  // Function to show Subject and Description fields
  function afficherChamps() {
    sujetField.classList.remove('masque');
    commentaireField.classList.remove('masque');
  }

  // Listen to the changes in the custom ticket field
  selectElement.addEventListener('change', function() {
    var valeurSelectionnee = selectElement.value;
    // For a specific value, hide Subject and Description fields and auto fill with text
    if (valeurSelectionnee === 'désinscription_à_la_newsletter_et_sms') {
  		sujetField.querySelector('input').value = 'test subject'
      masquerChamps();
    } else {
  	sujetField.querySelector('input').value = ''
      afficherChamps();
    }
  });
});
</script>

In the style.css: 

.masque {
  display: none;
}

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Henri,

You need to do the same as I mentioned above, go to your new_request_page.hbs file and set wysiwyg=true’  to 'wysiwyg=false'.

 

Ex.

 

0


Ifra Saqlain  I'm still experiencing the same issue. The fields are hidden, but when I attempt to submit a ticket, I receive an error message. I can see that the subject worked, but not the description. Perhaps the issue lies with the following line ? : commentaireField.querySelector('input').value = 'test commentaire'

 // Listen to the changes in the custom ticket field
  selectElement.addEventListener('change', function() {
    var valeurSelectionnee = selectElement.value;
    // For a specific value, hide Subject and Description fields and auto fill with text
    if (valeurSelectionnee === 'désinscription_à_la_newsletter_et_sms') {
  		sujetField.querySelector('input').value = 'test subject'
  		commentaireField.querySelector('input').value = 'test commentaire'
      masquerChamps();
    } else {
  	sujetField.querySelector('input').value = ''
  	commentaireField.querySelector('input').value = ''
      afficherChamps();
    }
  });
});
</script>

 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Change the class to ID in your script code because there is only      id=request_description

 

 var commentaireField = document.querySelector('.request_description');
 
 TO 
 
 var commentaireField = document.querySelector('#request_description');

0


hi Ifra Saqlain I added your code but now the incorrect values is showing in the fields. It used to say undefined and then the custom text but not the subject is saying new request and the description is blank. I have the updated jQuery in the document_head.hbs but it looks like your code requirement is javascript for this. I don't know if this matters, but also all my code uses ' and not " is that the issue?

 

Here is the code I entered.

0


Ifra Saqlain When I do this, the subject and description fields are no longer hidden, whereas they were before, and my text 'test' increments properly in the subject field, but nothing in the description field.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Henri Mercier (SEIF CONSULT) , please compare the code I have fixed it for you

 

  document.addEventListener('DOMContentLoaded', function() {
 // Custom field you want to listen
 var selectElement = document.getElementById('request_custom_fields_12368015596316');

 // Subject and Description fields
 var sujetField = document.querySelector('.request_subject');
 var commentaireField = document.querySelector('.request_description');

 // Function to hide Subject and Description fields
 function masquerChamps() {
   sujetField.classList.add('masque');
   commentaireField.classList.add('masque');
 }

 // Function to show Subject and Description fields
 function afficherChamps() {
   sujetField.classList.remove('masque');
   commentaireField.classList.remove('masque');
 }

 // Listen to the changes in the custom ticket field
 selectElement.addEventListener('change', function() {
   var valeurSelectionnee = selectElement.value;
   // For a specific value, hide Subject and Description fields and auto fill with text
   if (valeurSelectionnee === 'désinscription_à_la_newsletter_et_sms') {
         sujetField.querySelector('input').value = 'test subject';
     commentaireField.querySelector('textarea').value = 'test description';
     masquerChamps();
   } else {
     sujetField.querySelector('input').value = ''
     commentaireField.querySelector('textarea').value = 'test description';
     afficherChamps();
   }
 });
});

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@Noelle,

This is the exact code that you want, when you write something in your custom text field the subject and description will pick that text automatically, please test once.

 If not work then check the console, if you find any error let me know.

 

  //hide subject-description and autofill subject-description on submission for form


 if ($("#request_issue_type_select").val() == "TicketFormID") {
   $("#request_subject").val("Test Subject");
   $('#request_description').val("Test Description");
   $("#request_custom_fields_FieldID").keyup(function(event) {
   var stt = $(this).val();
      $("#request_subject").val(stt + " New Request");
      $('#request_description').val( + ' ' + stt +'Request for');
 });

 };

0


Bonjour Ifra Saqlain

J'ai suivi vos indications mais je n'arrive pas a ajouter aux champs “Sujet” et Description" la notion suivante : Demande de création de compte de (champ Nom) (Champ prénom) :

Mon script JS : 

  // Vérifie si l'URL contient le numéro spécifique du formulaire
 if (window.location.href.indexOf("18445823651613") > -1) { 
     // Cacher les éléments du formulaire
    document.querySelector('.request_subject').style.display = "none";
     document.querySelector('.request_description').style.display = "none"; 
     document.querySelector('.request_cc_emails').style.display = "none";   
     
     // Sélection de l'élément conteneur des pièces jointes
     var uploadContainer = document.querySelector('#upload-dropzone');
     // Cacher l'élément conteneur des pièces jointes
     uploadContainer.style.display = "none";
     
     // Sélection de l'élément contenant le libellé des pièces jointes
     var labelElement = document.querySelector('label[for="request-attachments"]');
     // Cacher l'élément contenant le libellé des pièces jointes
     labelElement.style.display = "none"; 
     
     // Ajouter les titres aux champs du formulaire
     // Titre pour les champs identité
     var nomUtilisateurTitle = document.createElement('h3');
     nomUtilisateurTitle.textContent = 'Identité :';
     nomUtilisateurTitle.id = 'titre_nom_utilisateur';
     document.querySelector('.request_custom_fields_18445875745437').parentNode.insertBefore(nomUtilisateurTitle, document.querySelector('.request_custom_fields_18445875745437'));

     // Ajouter un saut de ligne avant le titre Nom et prénom du manager
     var lineBreak = document.createElement('br');
     document.querySelector('.request_custom_fields_18460920253469').parentNode.insertBefore(lineBreak, document.querySelector('.request_custom_fields_18460920253469'));

     // Titre pour le champ Materiel Necessaire
     var nomMaterielNecessaireTitle = document.createElement('h3');
     nomMaterielNecessaireTitle.textContent = 'Materiels et applications nécéssaires :';
     nomMaterielNecessaireTitle.id = 'titre_nom_prenom_manager';
     document.querySelector('.request_custom_fields_18460920253469').parentNode.insertBefore(nomMaterielNecessaireTitle, document.querySelector('.request_custom_fields_18460920253469'));
     
     // Préremplissage des champs "sujet" et "description"
     var nom = document.querySelector('.request_custom_fields_18445875745437 input').value;
     var prenom = document.querySelector('.request_custom_fields_18445894528285 input').value;
     var sujet = "Création d'un compte siège - " + nom + " " + prenom;
     var description = "Création d'un compte siège - " + nom + " " + prenom;
     document.querySelector('.request_subject input').value = sujet;
     document.querySelector('.request_description textarea').value = description;
   
 };

Pouvez vous m'aider ? 

Edit : je suis finalement passer comme cela :

$(document).ready(function() {
   var ticketForm = location.search.split('ticket_form_id=')[1];
   if(ticketForm == 18445823651613) {
   // Ajouter des titres aux champs
   $('.form-field.request_custom_fields_18445875745437').prepend('<h2>Identité :</h2>');
   $('.form-field.request_custom_fields_18460920253469').prepend('<h2>Materiels et applications nécéssaires :</h2>');
 
   // Masquer les champs de sujet et de description
   $('.form-field.string.optional.request_subject').hide();
   $('.form-field.string.required.request_subject').hide();
   $('.form-field.request_description').hide();
   $('.form-field.string.optional.request_cc_emails').hide();// Masquer les CC
   $('.form-field label:contains("Pièces jointes")').hide(); // Masquer l'étiquette des pièces jointes
        $('#upload-dropzone').hide(); // Masquer la boîte de téléchargement des pièces jointes
 
   // Récupérer les valeurs des champs Nom et Prénom de l'utilisateur
   var nom = $('.form-field.request_custom_fields_18445875745437 input').val();
   var prenom = $('.form-field.request_custom_fields_18445894528285 input').val();
 
   // Concaténer les valeurs dans le sujet et la description
   var sujet = 'Demande de création du compte de ' + nom + ' ' + prenom;
   var description = 'Demande de création du compte de ' + nom + ' ' + prenom;
 
   // Remplir automatiquement les champs de sujet et de description
   $('#request_subject').val(sujet);
   $('#request_description').val(description);
}

Et c'est Ok ! 

 

Par contre, est il possible de masquer un formulaire dans la liste déroulante tout en gardant un raccourcis dans l'en-tête ? 

Merci par avance pour vos retours !

0


HI Ifra Saqlain it doesn't seem to be working. The custom field is a dropdown selection, I noticed that you mentioned if we write something it would updated but since this custom field is not a text field and is a dropdown, would something need to be different? See below. The subject and description shows the text but when the “What would you like to request?” field is selected the subject and description don't update. It should update to the following once that field selection is made.

SUBJECT: Add Processor Portal Credential Request

DESCRIPTION: Add Processor request

 

Here is the before and after:

 

BEFORE

AFTER

 

There looks like there is an issue

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Noelle Cheng,

Working with custom dropdown values is not easy, I've tried so many times but didn't get any results :(   I hope someone else can help you in this case. 

 

Thanks

0


Ifra Saqlain Bummer! No problem! Thought this could make it easier for our agents but I can go with a more standard populating without the customization of adding the selection from the dropdown. Thank you for all your help!

0


Hi,

 

I was wondering if anyone could assist with this functionality. I am trying to hide & prepopulate the Description and Subject Fields on one specific form, however the below code has no effect on my form: 

 

 if (window.location.href.indexOf("21346992414237") > -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 

 

Mikey

0


Ifra Saqlain  - Long time since we've talked. I hope you've been well! Echoing everyone else's sentiment here about how awesome you are!!! :)

As always, I'm here to ask for your help. Are you able to assist with making the subject and description field hide on a specific drop-down value? We have a team that has several different functions and they want to have their subject line pre-populate and hidden on specific topic selections. Additionally, they want the description field to have a pre-populate text (not necessarily hidden). Is this possible? Here's the field id and the drop-down values:

<label id="request_custom_fields_29365922002331_label" for="request_custom_fields_29365922002331">What can we help you with?</label>

                           <input type="hidden" name="request[custom_fields][29365922002331]" id="request_custom_fields_29365922002331" autocomplete="off" data-tagger="{&quot;label&quot;:&quot;Associate Lease&quot;,&quot;options&quot;:[{&quot;label&quot;:&quot;Apply for an Associate Lease&quot;,&quot;value&quot;:&quot;associate_lease__apply_for_an_associate_lease&quot;},{&quot;label&quot;:&quot;Associate Lease Renewal&quot;,&quot;value&quot;:&quot;associate_lease__associate_lease_renewal&quot;},{&quot;label&quot;:&quot;Associate Move Outs&quot;,&quot;value&quot;:&quot;associate_lease__associate_move_outs&quot;}]}]" aria-required="true" aria-labelledby="request_custom_fields_29365922002331_label"/>

0


Hi all, 

Hoping to get some help with hiding and auto-filling the subject and description fields for a single form. I had gotten it working on a previous form but mirroring the changes isn't giving me any results. Currently testing this code and it doesn't seem to be working properly:
 

I've also tried some of the other solutions that have been given in this article without any luck. 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Hannah, I'm good I hope you also. 

 

You can use this code to autofill and then hide the both fields.

 

Step 1: Remove  'wysiwyg=true' from the form.

 

Current-

 

 

 

 

After-

 

 

 

 

Step 2: Add this given code at the bottom in the script file.

 

 

 

Code- 

 if (window.location.href.indexOf("360003074611") > -1) {
     document.querySelector('#request_subject').value= "Write your text for subject field.";
     document.querySelector('#request_description').innerHTML= "Write your text for description field.";
     document.querySelector('.request_subject').style.display= "none";
     document.querySelector('.request_description').style.display= "none";
 }

 

 

You need to remove my form ID and add your form ID where you wanna hide these fields.

 

First, open that form and then you will see the form ID in the search-bar.

 

 

 

Copy that and add in the script code here:

 

  if (window.location.href.indexOf("Add Here") > -1) {

 

 

 

If any query Feel free to ask :)

Thanks

 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Jenny,I hope you got your solution as well if not please let me know :)

 

 

Thank You

 

0


I created the brand and help center that this form is connected to within the last couple of weeks and have noticed that its new_request_page.hbs and document_head.hbs are significantly different from my other brands. The others look similar to your screenshots, however this new brand's new request page code looks like this and unfortunately isn't responding correctly to the code you provided.

<div class="container-divider"></div>
<div class="container">
 <div class="sub-nav">
   {{breadcrumbs}}
   <div class="search-container">
     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
       <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
       <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
     </svg>
     {{search submit=false}}
   </div>
 </div>

 <h1>
   {{t 'submit_a_request'}}
 </h1>

 <div id="main-content" class="form">
   <div id="new-request-form"></div>
 </div>
</div>

<script type="module">
 import { renderNewRequestForm } from "new-request-form";

 const container = document.getElementById("new-request-form");

 const settings = {{json settings}};

 const props = {
   requestForm: {{json new_request_form}},
   newRequestPath: {{json (page_path 'new_request')}},
   parentId: {{json parent.id}},
   parentIdPath: {{json parent.url}},
   locale: {{json help_center.locale}},
   baseLocale: {{json help_center.base_locale}},
   hasAtMentions: {{json help_center.at_mentions_enabled}},
   userRole: {{json user.role}},
   userId: {{json user.id}},
   brandId: {{json brand.id}},
   organizations: {{json user.organizations}},
   answerBotModal: {
     answerBot: {{json answer_bot}},
     hasRequestManagement: {{json help_center.request_management_enabled}},
     isSignedIn: {{json signed_in}},
     helpCenterPath: {{json (page_path 'help_center')}},
     requestsPath: {{json (page_path 'requests')}},
     requestPath: {{json (page_path 'request' id=answer_bot.request_id)}}
   },
 };

 renderNewRequestForm(settings, props, container);
</script>

I removed the "wysiwyg: true," line from the new request page as well during testing.

When I attempt to update the page to look similar to my other brands, I'm prompted with “request_form does not exist”.
 

0


I just realized the new brand has Copenhagen v4.1.0, while the previous one is at Copenhagen v3.3.0. 

Do you know how we might be able to get similar code for the 4.1 version, or perhaps how to set up the new brand with an older version of Copenhagen?

0


Hi Ifra Saqlain, this is something i've been searching a while for and just come to implement in our help centre but i think i'm experiencing the same issue as its now V4.1.0 so anything referenced here is not right. Is anyone able to help as I really need the ability to input some wording by default into the description on our requests

1



Ifra Saqlain I added the code but still the subject and description field is not hidden.
Can you help fixing it
 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Sheena, I'll get back to you soon :), give me some hours.

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post