• Tracy Scobba

  • October 27, 2021 19:18

  What happened to all of the older comments on this topic? I'm looking for information on how to pull custom field text into my subject, and I believe it used to be here. Plus, I've done some searching in Google and several hits show as "page doesn't exist." Did Zendesk do a clean-up? I miss the old content.

• Sam

  • October 27, 2021 20:16

  Community Moderator

  HiTracy Scobba! I posted a comment covering thishere. Hope it helps!

• Dave Dyson

  • October 28, 2021 01:33

  Thanks Sam!
  
• Tracy Scobba

  • November 03, 2021 16:59

  Thanks,Sambut I worry about using the HTML target that will be going away. Can I do the same thing with a Web Hook?

• Tracy Scobba

  • November 03, 2021 17:00

  Has anyone got this error after making the changes to the java script? What's weird is that I don't get the error if I'm not logged in but I do if I am.

  

• Sam

  • November 03, 2021 22:33
  • Edited

  Community Moderator

  HiTracy Scobba!

  You certainly can. I updated the instructions to reflect! The fields are essentially the same:

  • Endpoint:https://subdomain.亚博zendesk.com/api/v2/tickets/{{抽搐ket.id}}.json
  • Request Method: PUT
  • Request format: JSON
  • Username: email address/token
  • Password: API token
• 이지훈

  • December 13, 2021 06:08

  I realized there was acritical problemwith this method.

  If the end user accidentally clicks thesubmitbutton without filling in the required fields(*) in the ticket form that hides the title and description using .hide(), the title and description are exposed on the redirected page. This opens a hole for end users to change their titles and descriptions.

  

  Has anyone confirmed this or solved it?

• Brandon Tidd

  • December 14, 2021 18:47

  User Group Leader Community Moderator

  

  Thanks for reaching out! You could try using JavaScript to confirm required fields before submitting:

  for(constelofdocument.getElementById('form').querySelectorAll("[required]")) {if(!el.reportValidity()) {return; } }

• Tyler Rutledge

  • January 05, 2022 17:54
  • Edited

  We have this working perfectly on many forms but when weuse a URL to pre-fill certain fieldson the form, the code to hide other fields stops working.

  Example of code we use:

  if(ticketForm == 4418185168269) {
  $('.form-field.request_subject').hide(); // Hide subject
  $('.form-field.request_description').hide(); // Hide description
  $('#request_subject').val('subject text here'); // autofill subject
  $('#request_description').val('description text here.'); // autofill description
  }

  Example of URL with pre-filled element. I've tried the URL with and without subject/description.

  https://mycompany.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269&tf_anonymous_requester_email=test@mycompany.com

  Anyone have any ideas why this type of URL may break the function that hides subject/description or what I could do about it to get both working?

• Tipene Hughes

  • February 07, 2022 23:30

  Zendesk Developer Advocacy

  HiTyler Rutledge,

  Sorry for the delay in getting back to you!

  Not sure if you're still experiencing issues with this, but if you are can you try running the code below on your end and let me know if that has any effect on correctly hiding the fields?

  const autoFill = () => {
  document.getElementById("request_subject").value = "test subject"
  document.getElementById("request_description").value = "test description"
  }
  
  const hide = () => {
  document.querySelector('.request_subject').style.display = 'none'
  document.querySelector .sty(“.request_description”)le.display = 'none'
  };
  
  if(ticketForm == 4418185168269) {
  autoFill();
  hide();
  }

• Tyler Rutledge

  • February 08, 2022 18:39

  HelloTipene Hughes!

  Thanks for the support on this! I got this working but the same problem exists with this script. When I implement your suggested script, the fields are hidden correctly. Accessing the form via the normal link like:https://companyname.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269works correctly.

  As soon as you prepopulate any custom fields using the URL such as:https://companyname.zendesk.com/hc/en-us/requests/new?ticket_form_id=4418185168269&tf_360049698092=testemail@gmail.com, the subject and description show again.

• Tipene Hughes

  • February 08, 2022 20:35

  Zendesk Developer Advocacy

  HeyTyler Rutledge,

  I'm going to create a ticket so we can troubleshoot this in a bit more detail. You should see a message come through shortly!

• Adam Ashby-Clarke

  • March 14, 2022 17:36

  Brandon TiddIm facing the same issue, when you accidentially click submit, it unhides my fields I have hidden, can you share where to put that code that uses JS to confirm required fields before submitting? Thanks!

• Brandon Tidd

  • March 15, 2022 05:47

  User Group Leader Community Moderator

  

  HeyAdam Ashby-Clarke,

  This is using theMutation Observerand, as a general rule, this code should go inside a $(document).ready(function(){ //Code }); function to load with the page (using jquery).

  Hope this helps!

  Brandon

• Adam Ashby-Clarke

  • March 15, 2022 17:27

  HiBrandon Tiddthanks very much. Apologies, im not massively knowledgable around this, should I be adding this to my new_request_page or to the script.js file?

  Any pointers would be appreciated, thanks!

  Adam

• Brandon Tidd

  • March 15, 2022 18:58

  User Group Leader Community Moderator

  

  HeyAdam Ashby-Clarkemy pleasure!

  The code itself should be added to the script.js file.
  (you'll also need to install jQuery by followingthese instructions).

  Let me know how it goes!

  Brandon

• Adam Ashby-Clarke

  • March 15, 2022 20:11

  HiBrandon Tidd- thanks, I still seem to be struggling - can you advise if this is correct? I have the document ready function in my script.js and I have the Jquery installed in my document_head.hbs as per the instructions, but still, when I hit submit on a form, it behaves the same way (red boxes showing required fields, and any hidden fields re-appear). Thanks in advanced for all your help.

  Adam

  

• Brandon Tidd

  • March 17, 2022 04:45

  User Group Leader Community Moderator

  

  Hmmm - let's try a different approachAdam Ashby-Clarke:

  This approach uses something called a Mutation Observer, that looks for changes in specific fields. If it doesn't see an update on a required field, it prevents the form submission from executing, thus preventing the 'error' that exposes your hidden fields.

  This example looks specifically for a change in the checkbox (customfield_123456789) that indicates an attachment is required. Note - you'll want to replace the field IDs with your field IDs in both the CSS and JS

  CSS

  /* required attachment */ #request_custom_fields_123456789_label, #request_custom_fields_123456789 { display: none; } .form-field label span.optional { display: none; }

  JS
  make sure to change the field ID in
  var attachmentCheckboxField = ‘request_custom_fields_123456789’;
  and
  var formDropdownClass = ‘.request_custom_fields_123456789’;

  / /开始observ所需附件/ /功能ing node for mutations var startObserveMutations = function (nodeSelector, options, callbackFunction) { var node = document.querySelector(nodeSelector); if (node) { var observer = new MutationObserver(callbackFunction); observer.observe(node, options); return observer; } }; // Callback function to execute when mutations in form attachments or dropdown are observed: // clear or select Attachment checkbox according to dropdown var mutationObservedForm = function (mutationsList) { mutationsList.forEach(function (mutation) { if (mutation.type == 'childList') { setFormAttachmentCheckbox(); } }); }; // Define some variables for requiring form attachments var attachmentCheckboxField = 'request_custom_fields_123456789'; var attachmentCheckboxId = '#' + attachmentCheckboxField; var attachmentErrorNotification = 'Attachment required to submit'; var formDropdownClass = '.request_custom_fields_123456789'; var formObserveMutationOptions = { childList: true, subtree: true }; // Clear or select checkbox according to dropdown and attachments: // Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it function setFormAttachmentCheckbox() { if (isFormAttachmentRequired()) { if ($('#request-attachments-pool .upload-item').length) { selectCheckbox(attachmentCheckboxId); } else { clearCheckbox(attachmentCheckboxId); } } else { selectCheckbox(attachmentCheckboxId); } } // Return true if dropdown option 'ABCD' is selected function isFormAttachmentRequired() { return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') && $(formDropdownClass + ' a.nesty-input').text() === 'ABCD'; } // Select checkbox function selectCheckbox(eltselector) { $(eltselector).prop('checked', true); } // Clear checkbox function clearCheckbox(eltselector) { $(eltselector).prop('checked', false); } // If attachment checkbox field exists: // Select the checkbox if attachment is not required // Watch for changes to attachments and dropdown if ($(attachmentCheckboxId).length) { if (!isFormAttachmentRequired) { selectCheckbox(attachmentCheckboxId); } startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm); startObserveMutations(formDropdownClass,formObserveMutationOptions, mutationObservedForm); } // Adjust attachment error notification var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error'); if (attachmentErrorElt.length) { attachmentErrorElt.text(attachmentErrorNotification); }

  Let me know how this goes for you. Please note that this also uses the already installed jQuery.

• Tyler Rutledge

  • March 18, 2022 21:05
  • Edited

  HelloTipene Hughes!

  I apologize for missing your previous reply and ticket about this. I would still appreciate the support on this request and our account assumption is enabled. Is it possible we could resume the conversation on this topic?

  https://support.zendesk.com/hc/en-us/articles/4408882841498/comments/4419957278618

• Shobbir Ahmed

  • March 30, 2022 10:27

  Hey all,

  I have very little experience of coding - where/how would I add code to hide the description field?

  

  I have one form with conditional fields:

  

  I want to get rid of the default description field only (changed to any other relevant info):

  

• Ifra Saqlain

  • March 31, 2022 04:40

  Community Moderator

  

  

  Hey Shobbir, first of all you need to remove the required condition from the description field, and then you can easily hide it with the CSS.

  Remove require condition from description field:https://support.zendesk.com/hc/en-us/articles/4408846008218

  ADD CSS on style.css file
  
  .request_description{display:none}
  
  
  
  Screenshot to get idea - Where:
  
  

  Team

• Shobbir Ahmed

  • March 31, 2022 07:51

  Hey Ifra,

  I am unable to make that field not required:

  

  The conditional fields I have used don't include the description field but it always appears as it is a system field (from what I can understand).

  Thanks for help

• Brandon Tidd

  • March 31, 2022 16:06

  User Group Leader Community Moderator

  

  HiShobbir Ahmed-

  Unfortunately the description field is required to have *some* content as you can't have a blank ticket. That said, you can prefill and hide the field using the instructions outlined in the article.

  Hope this helps!

  Brandon

• Shobbir Ahmed

  • April 01, 2022 07:22

  HeyBrandon Tidd&Ifra Saqlain- I don't know where/how to deploy the code to autofill the description and hide it.

  This is what my script shows:

  

  Thanks

• Ifra Saqlain

  • April 01, 2022 10:43

  Community Moderator

  

  

  HelloShobbir Ahmed:), follow the steps below:

  1). Copy the below code snippet and paste it at the bottom of your script.js file.

  document.addEventListener("DOMContentLoaded", function () {
  function hideDescriptionField(){
  var descriptionField = document.querySelector('#request_description');
  descriptionField.innerHTML = 'Hello users';
  descriptionField.style.display= "none";
  }
  hideDescriptionField()
  });
  
  
  
  Screenshot for the same:
  

  将预先填充description字段,然后你好de that. If any confusion, feel free to ask.

  Thanks

  Team

• Shobbir Ahmed

  • April 01, 2022 11:06
  • Edited

  Thanks very muchIfra Saqlain- this is what I now have:

  

  Is there any way to remove the highlighted part?

  It also looks like the autofill part comes up when an end user submits a ticket:

  

  

  I entered test2 in the 'Please specify ..' box but that shows only to agent on back end. I want the user's message to be displayed instead of the autofill 'hello users'

  Thanks

• Ifra Saqlain

  • April 01, 2022 11:25
  • Edited

  Community Moderator

  

  

  Remove the previous JS code and add the below:

  document.addEventListener("DOMContentLoaded", function () {
  
  
  function hideDescriptionField(){
  var descriptionWarpper = document.querySelector('.form-field.request_description');
  var descriptionField = document.querySelector('#request_description');
  descriptionField.innerHTML = 'Hello users';
  descriptionWarpper.style.display= "none";
  }
  hideDescriptionField();
  
  });

  Give me some time and please share your public Help Centre URL, so I can see your new request page and will share the exact solution.

  You have multiple forms and you want to hide the description field only on one form, not for all, right?

  Thanks

• Shobbir Ahmed

  • April 01, 2022 11:43

  ThanksIfra Saqlain- the description box is now completely hidden.

  We have one form with conditional fields - which comes to 6 forms in total. We want the description field hidden for all forms which I have now managed to do.

  The remaining issue is for one of our forms (Standard Request) we have a field called 'Please specify the details of your request' - we want to use this like the description field - so when end users submit a ticket the info will appear at the back end:

  

  

  hello users should be replaced by the highlighted part.

  the other option is to remove the description field from all the other forms and just have it on the 'Standard Request' form - not sure if this can be done with conditional fields.

  Thanks

• Ifra Saqlain

  • April 02, 2022 05:49
  • Edited

  Community Moderator

  

  

  Hey Shobbir Ahmed,

  Good Idea:

  the other option is to remove the description field from all the other forms and just have it on the 'Standard Request' form - not sure if this can be done with conditional fields.

  1). Remove the description box from all forms.

  2). Only have it on theStandard Requestform.

  3). Change the label of the description box:DescriptiontoPlease specify the details of your request.

  Let's do this

  Remove the previously shared JS code and copy-paste the below code:

  document.addEventListener("DOMContentLoaded", function () {
  function checkTicketId(){
  var descriptionWarpper = document.querySelector('.form-field.request_description');
  var descriptionField = document.querySelector('#request_description');
  var descriptionLabel = document.querySelector(".form-field.text.required.request_description > label");
  
  if(window.location.href.indexOf('00000000') > -1) {
  descriptionWarpper.style.display= "block";
  descriptionLabel.innerHTML = 'Please specify the details of your request';
  
  } else {
  descriptionWarpper.style.display= "none";
  descriptionField.innerHTML = 'Hello Zendesk!';
  }
  }
  
  checkTicketId();
  });
  
  
  
  
  Note:Remove00000000in the script code and add your "Standard Request" form ID.
  
  

  Q.How can you get the ticket form ID?

  A.Select your form "Standard Request" and see it in the search bar of your window.

  

  Here, you will get the form ID in the searchbar.

  

  Copy the ID>Remove00000000in the script code>Paste your form ID which you have been copied.

  If any confusion feel free to ask :)

  Thanks

• Shobbir Ahmed

  • April 04, 2022 08:11

  HeyIfra Saqlain- thank you for your help. Still having some issues, this is the code I pasted:

  

  The form ID I found here:

  

  As mentioned I only have one form with fields which are overridden by conditional fields:

  

  I copied the ID from the url as it doesn't show in guide:

  

  Thanks for your help

Pleasesign into leave a comment.