Add description to the Attachments field for "Submit a request" form

Answered

61 Comments

  • Trapta
    Community Moderator

    Hi @Huong-Ly Dang,

    Try putting your code at the bottom of the footer.hbs template under <script> tag.

    Thanks

    Team Diziana

    0
  • Huong-Ly Dang

    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

    0
  • Huong-Ly Dang

    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

    0
  • Huong-Ly Dang

    Additional question : how can I make this description appear in my web widget as well ?

    0
  • Trapta
    Community Moderator

    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

    0
  • Huong-Ly Dang

    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

    0
  • Gitte Kjargaard Jensen

    How should the code look, if i want to have line break eg

    "Step 1: uploade picture

    Step 2: ...."

     

    BR Gitte

    0
  • Vladan Jovic
    Community Moderator

    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>");
    0
  • Gitte Kjargaard Jensen

    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

    0
  • Vladan Jovic
    Community Moderator

    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 :)

    0
  • Jacob J Christensen - Cloudhuset A/S
    Community Moderator

    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!

     

    0
  • Vladan Jovic
    Community Moderator

    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 :)

     

    0
  • Jacob J Christensen - Cloudhuset A/S
    Community Moderator

    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.

    0
  • Amie B

    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

    0
  • Vladan Jovic
    Community Moderator

    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?

    0
  • Amie B

    Thanks @Vladan, that did the trick. Appreciate your help with this one. :)

     

    0
  • Grant Foster

    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.

     

    0
  • Dan Ross
    Community Moderator

    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!

    2
  • Grant Foster

    Legend thank you Dan. Works perfectly!

    0
  • Raul

    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?

    1
  • Cust Admin KN

    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

     

    0
  • Vladan Jovic
    Community Moderator

    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! 

    1
  • Cust Admin KN

    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 

     

     

    0
  • Vladan Jovic
    Community Moderator

    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>
    0
  • Cust Admin KN

    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

     

    0
  • Vladan Jovic
    Community Moderator

    Glad to hear that, Andrea! Cheersss!

    0
  • Maruthi Kavi

    Hello Help desk team

     

    Can someone guide me how to access my JS code to edit my attachment description field ? 

    0
  • Grant Foster

    Maruthi Kavi 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)

    https://support.zendesk.com/hc/en-us/articles/115015722628-Editing-the-code-for-your-live-Help-Center-theme-Guide-Professional-and-Enterprise-

    0
  • Nicole S.
    Zendesk Community Team

    Thanks for jumping in, Grant!

    0
  • Marci Abraham

    I am very happy to report that Vladan Jovic'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!

    0

Please sign in to leave a comment.

Powered by Zendesk