Add description to the Attachments field for "Submit a request" form
BeantwortetAt the bottom of our "Submit a request" form in our Help Center is an automatic upload form for adding attachments. I would like to add a description similar to the description I've added to my other fields. The problem is, the Attachments field is not accessible in our Ticket Fields Admin Settings so I'm not able to add a description yet I am able to add one to all the other fields (i.e. Subject, etc). Below is an example showing our "Submit a request" form for context.
I looked at the HTML for our Help Center and found there is a template called "New Request Page" with a reference to "{{request_form}}" but I'm not sure how to access that or edit it.
-
Hi @Huong-Ly Dang,
Try putting your code at the bottom of the footer.hbs template under <script> tag.
Thanks
Team Diziana
-
Hi Vladan,
I have verified, no line break at the end&beginning of my string in the DC item.
Here is the link of my HC : https://e-education.zendesk.com/hc/en-us/requests/new
Many thanks,
Ly
-
Hi @Trapta,
Thank you so much for your tips : it works.
However it works for all languages except French, any idea why ?
Her is the link of my HC : https://e-education.zendesk.com/hc/fr/requests/new
Many thanks,
Ly
-
Additional question : how can I make this description appear in my web widget as well ?
-
Hi @Huong-Ly Dang,
Glad to hear that it works for you. To make it work for French replace your code from
$('form#new_request .upload-dropzone').parent().append('<p>{{dc 'attachment_system_field_description'}}</p>');to
$('form#new_request .upload-dropzone').parent().append("<p>{{dc 'attachment_system_field_description'}}</p>");and it will work.
Let me know if you face any issue.
Thanks
Team Diziana
-
Hi @Trapta,
You tips is awesome ! Works for French now. :D
Additional question : how can I make this description appear in my web widget as well ?
Kind regard,
Ly
-
How should the code look, if i want to have line break eg
"Step 1: uploade picture
Step 2: ...."
BR Gitte
-
Hi Gitte, something like this will work:
"Step 1: uploade picture<br><br>Step 2: ...."
So the code will be like:
$('form#new_request .upload-dropzone').parent().append("<p>Step 1: uploade picture<br><br>Step 2: ....</p>"); -
Thanks :-)
Does the same apply if i want: to have it looking like this:
“For at kunne hjælpe dig bedst muligt, har vi brug for :
- billeder af fejl/mangel tæt på,
- billede på afstand,
- billede af hele møblet,
- billeder af labels, emballage og følgeseddel.
Se eksempel her (link)”
Thanks in advance Gitte
-
Hmm no, it will not, it should be like:
$('form#new_request .upload-dropzone').parent().append("<p>For at kunne hjælpe dig bedst muligt, har vi brug for :</p><ul><li>billeder af fejl/mangel tæt på,</li><li>billede på afstand,</li><li>billede af hele møblet,</li><li>billeder af labels, emballage og følgeseddel.</li></ul><p>Se eksempel her (link)</p>");Here what you will get https://cl.ly/a9e709e61cd5 so you will need just some CSS styling. like:
.form-field ul {
list-style: disc;
list-style-position: inside;
padding-left: 20px;
}
.form-field p {
font-size: 15px;
color: #000;
}Hope this helps :)
-
Hi Vladan and Trapta,
I have an issue with the Dynamic Content not rendering the text below the upload dropzone. I expected the following script to render the Dynamic content, but it doesn't.
<script>
if(window.location.href.indexOf("360000138579") > -1) {
$('form#new_request .upload-dropzone').parent().append("<p>{{dc 'exhibits'}}</p>")
}
</script>The same script, but with plain text instead of DC works as expected.
<script>
if(window.location.href.indexOf("360000138579") > -1) {
$('form#new_request .upload-dropzone').parent().append('Exhibits-text')
}
</script>The DC is valid and outputs fine, when applied elsewhere in the template.
Any ideas what I messed up? Thanks!
-
Hey Jacob, maybe your DC text contains quote symbol? That will break the code.
In that case instead of eg
"we're"
just put
"we\'re"
Hope this helps. If not, please provide us with more infos :)
-
Thanks Vladan!
There was a quote symbol, but removing it didn't make the DC content appear.
It appears that my problem was line breaks in the DC, once I formatted the content to remove any line breaks the content appeared.
-
Hi friends,
I've been trying to follow this along but not having much luck. I'm trying to adjust the text which is associated with the email field. Instead of saying "your email address" i want it to say "email address associated with your online account"
I'm not having much luck with the code suggestions in the comments on this article. Wondering if anyone out there might know how I can do this at all?
Best,
Amie
-
Hey Amie, it should work if you put this code at the end of your "New request page":
<script>
$( document ).ready(function() {
$('.form-field.request_anonymous_requester_email label').text('Whatever whenever');
});
</script>Do you know how to edit your theme files?
-
Thanks @Vladan, that did the trick. Appreciate your help with this one. :)
-
Hey team,
I'm using the original code suggested which works
<script>
$('form#new_request .upload-dropzone').parent().append('<p>{{dc 'here goes DC item title'}}</p>');
</script>However just wondering if it is possible to apply different descriptions on different forms? A generic one for the attachment field doesn't make sense across all of our forms.
-
Hey Grant,
You could do this with some conditional code on your new_request page just before the script you have above.
Try something like this:
<script>
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == "YOUR_TICKET_FORMID_HERE") {
$('form#new_request .upload-dropzone').parent().append('<p>{{dc 'here goes DC item title'}}</p>');
}
</script>You could have a case for each form ID you wanted to cover.
Hope that helps! -
Legend thank you Dan. Works perfectly!
-
Is there a way to change the "Attachment" placeholder text for the dropzone based on the selection in a specific field? We're trying to change the text based on the user selection of one of the dropdown menus in our contact form. We're also using dynamic text, so we'd want to be able to set that up with the dynamic string.
Based, on what I've read in the comments, the following should work to replace the placeholder with dynamic text, right? But, how do we make it so it is displayed based on a user's selection (similar to a conditional field).
<script>
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == "YOUR_TICKET_FORMID_HERE") {
$('form#new_request .upload-dropzone').parent().append('<p>{{dc 'here goes DC item title'}}</p>');
}
</script>If that isn't possible, is there a way to add the line of dynamic text below the dropzone based on the user's selection?
-
Hi all,
I see this post is 2 years old
I'm trying to insert a description in default form attachment
Is there any change ? I Can't see any text appearing in attach description, used all tips in thread but with no luck
Thanks in advance for help
-
Hey Andrea, is you submit a ticket page visible outside? If yes, could you send me a link?
If not, please put your code here so I can check. Thanks!
-
Yes is visible,
form is cutted in some part to make it easier embedding in website, but is visible to anonymous user
https://kasanova.zendesk.com/hc/it/requests/new
-
hey Andrea, thanks for the link. I just checked but I can't see the code there, is it already added?
Also, please include jquery in your page, just paste this code into the Document Head.
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script> -
YESSSSS !
Great job Vladan, with your script everything works like a charm, text appears as expected.
Thank you very much, I am ready to publish, now
Cheers
-
Glad to hear that, Andrea! Cheersss!
-
Hello Help desk team
Can someone guide me how to access my JS code to edit my attachment description field ?
-
@... I'm not from the Help Desk team but you should be able to edit your JS code from the Theme section (under edit code)
-
Thanks for jumping in, Grant!
-
I am very happy to report that @...'s suggested script worked perfectly for my needs:
<script>
if(window.location.href.indexOf("123456") > -1) {
$('div#upload-dropzone').parent().find('label').text('Please attach your proof of purchase below')
}
// replace 123456 with the 'hardware fault' form ID
</script>Mine is not for a hardware fault report, but I needed custom text for the attachments field on just ONE form, not all of them. And now I have it. Thanks Vlad!
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
81 Kommentare