Adding a hint below the attachment field | Community
Skip to main content

Adding a hint below the attachment field

  • April 22, 2020
  • 14 replies
  • 0 views
S

Hi everyone,

We had a requirement for our customers to send us particular documents when dealing with a certain type of request. The way we tackled this was to add a hint below the attachment field asking our customers for the required documents.

How it's done

This is done by editing the code in the script.js file.

Import jquery

If you're on templating API v2, you'll need to import jquery. Instructions are here.

Edit the script.js file

If you don't have it, you'll need to add the following code to the top of the script.js file.

$(document).ready(function(){

})

Within that function, add the following code, changing "Test hint" to whatever text you want to display.

$('div#upload-dropzone').parent().append('<p id=attachment_field_hint>Test hint</p>')

This will create a new element at the bottom of the attachment field and give it the ID of attachment_field_hint. The ID comes in handy if you ever want to make changes to the hint based on conditions.

      14 replies

      Devan
      • Devan
      • April 22, 2020

      Hello @Simon Lee,

      I love this user tip you submitted! I'll be sure to add this to our weekly digest this week so that other members can take a look at this epic tip.

      Best regards. 

      J
      • Jonathan23
      • February 25, 2021

      Hello, do you know how to add a hint to the subject field? 

       

      Frits
      • Frits
      • April 22, 2021

      Hi Jonathan,

      For most (if not all) other ticket fields you can use the Description shown to end users field in the the Ticket Field configuration.

      Guillermo11

      Hello Simon,

      As a complement to your useful contribution, through our App you can tag tickets as per their attachment extension (ri_application/pdf, ri_application/docx, ri_application/jpg, etc.): https://www.zendesk.com/apps/support/respira-tag-files/

      C
      • Chris43
      • June 24, 2022

      Hello
      Thanks a lot for your help.
      Is there a way to change attachments to required?
      (optional -> required)

      raphael12
      • raphael12
      • November 18, 2022

      Hi everyone!

      Anyone found a way to add a custom fields below the attachment zone?

      Best regards!

      Raphaël

      N
      • Nicole12
      • February 20, 2023

      Hi @raphael12, I'm not sure if this will help you, but I did come across an article on a similar topic: 

      https://support.zendesk.com/hc/en-us/community/posts/4514859863834-Re-order-the-Your-email-address-field

      It may help with an idea on how to move around the system generated/required fields. 

      N
      • Nicole12
      • February 20, 2023

      Hi @simon29, do you know how to apply this to the end user email field? I tried the following code but it didn't work: 

      $('div#upload-dropzone').parent().append('<p id=request_anonymous_requester_email_field_hint>Our custom hint/description</p>') // Add text after email field 

      Thanks!

      Tipene
      • Tipene
      • February 22, 2023
      Hi Nicole,
       
      The $('div#upload-dropzone') portion of this code snippet is what is used to select the element to add the hint to. You’ll want to update this code to $('input#request_anonymous_requester_email') for it to target the email address field i.e:
       
      $('input#request_anonymous_requester_email').parent().append('<p id=request_anonymous_requester_email_field_hint>Test hint</p>’)
       
      I hope this helps!
       
      Tipene
      N
      • Nicole12
      • February 22, 2023

      Thanks, @tipene! I did try that code but it didn't work for me. And oddly enough, when I tried the code it actually unhid the form dropdown selector. This is the code I tried:

       

      if ($("#request_issue_type_select").val() == "formid") {
          $(".request_ticket_form_id").hide() 
          $('input#request_anonymous_requester_email').parent().append('<p id=request_anonymous_requester_email_field_hint>Test hint</p>’)

       

      It didn't show the hint on the email field, and also unhid the selector. 

       

      Tipene
      • Tipene
      • February 22, 2023

      Sorry Nicole, it looks like the formatting got messed up there somehow!

      Can you try updating the single quote marks around the <p> tags to make sure they're the same, and also adding double quotes around the id value i.e id="request_anonymous_requester_email_field_hint"

      N
      • Nicole12
      • February 22, 2023

      That worked, @tipene, thank you! I did have the single quote off a the end, and then adding the quotes around the id was also part of the issue. I appreciate your help!

      N
      • Nicole12
      • July 28, 2023

      @tipene would the cc field (optional for logged in users) follow the same path to add a hint? 

       

      $('input#request_cc_emails').parent().append('<p id="request_cc_emails_field_hint">Test hint</p>')
      Greg29
      • Greg29
      • July 31, 2023

      Hi Teresa! Since you're appending to a class instead of a div in this situation, you need to specify the class like this: `.request_cc_emails` (note the period before the class name)

      So the complete code would be:

      $('.request_cc_emails').append('<p id="request_cc_emails_field_hint">Test hint</p>')
      Terms & ConditionsCookie settingsAccessibility statement