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

Beantwortet

64 Kommentare

  • Vladan Jovic
    Community Moderator

    Hi Huong, from this perspective your code looks fine. Could you please just paste here a text from your DC item please?

    0
  • Huong-Ly Dang

    hi Vladan, 

    My text is the following : Please attach as much screenshots / printscreens as possible to illustrate the issue

    If I only use that text without the dynamic content, it works perfectly. But when putting it in a dynamic content, it won't work anymore...

    Ly

     

    0
  • Vladan Jovic
    Community Moderator

    Hmm, please check maybe you have a line break at the end/beginning of your string in the DC item.
    Or if you can share your Help center link with us, that would help us for sure. 

    0
  • 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
    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
    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
  • Grant Foster

    Legend thank you Dan. Works perfectly!

    0
  • 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
  • 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 Saunders
    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

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk