Adding a hint below the attachment field
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.
-
Hello @...,
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.
-
Hello, do you know how to add a hint to the subject field?
-
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.
-
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/
-
Hello
Thanks a lot for your help.
Is there a way to change attachments to required?
(optional -> required) -
Hi everyone!
Anyone found a way to add a custom fields below the attachment zone?
Best regards!
Raphaël
-
Hi Raphaël Péguet - Officers.fr, I'm not sure if this will help you, but I did come across an article on a similar topic:
It may help with an idea on how to move around the system generated/required fields.
-
Hi Simon Lee, 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!
-
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
-
Thanks, Tipene Hughes! 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.
-
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"
-
That worked, Tipene Hughes, 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!
-
Tipene Hughes 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>') -
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>')
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
14 Kommentare