Can I change the text of Submit a request in the Help Center?

Return to top

30 Comments

  • Nick Sturrock

    I found the simplest approach to change all instances of elements with text 'Submit a request' (in this case hyperlinks, page titles and breadcrumbs) in the Copenhagen theme was using the following Javascript, placed at the top of the script.js function inside the document.addEventListener('DOMContentLoaded', function():

      // translate 'submit a request' to 'contact us'
    Array.prototype.forEach.call(document.querySelectorAll('a,h1,li'), function(a) {
    if (a.textContent.includes("Submit a request")) {
    a.textContent = 'Contact Us';
    }
    });
    1
  • Vovwe Muoghereh

    Thank you @.... Your comment was exactly what I needed. I have next to no coding experience but was able to change the text by following your approach.

    0
  • Yvey Colla

    Hello, 
    I'm looking to add more fields to the Submit a Request Page in the Community section of our website. 
    In new_request_page.hbs I can see it's looking for {{request_form}} but where do I find the form to add new fields?

    0
  • Jake Bantz
    Zendesk Customer Care

    Hi Yvonne, ticket fields and forms are managed from within the Zendesk Support interface. Depending on your plan type, you can view what options are available by following the content attached to Designing and Optimizing your Ticket Forms.

    I hope that is helpful to guide you through making the needed updates.

    0
  • CREDO Mobile

    Hello!  I am wondering if I can make the "Submit a request" link send users to a special ticket form when clicked on specific articles...but send users clicking it anywhere else to the default ticket form as it does today.

    From Jake's comment here, it appears you can set a specific ticket form for EVERY article...but what I want to do is a bit different, so hoping someone has some advice! 

    I believe it should be possible using if/else statements or is/isnt statements, but am having trouble constructing code that will work on the article page template.  Below is code that I got to sort of work...but it only worked for the isnt block  (the default form appeared on those articles) and not the is block (nothing appeared in the article footer on those articles).  

    CODE that partially works using sections

    Note: 

    • If possible I would prefer to use category to target the articles (as they are all in one) but can also use sections (there are 3).
    • Also, on the articles it works on the user first sees a "please choose your issue" drop down where it lists both forms which I don't want.  It's doing this whether I replace the request_callout with a specific form id or not.
    <div class="article-more-questions">
    {{#with section}}
    {{#isnt id 999999999999}}
    {{#isnt id 888888888888}}
    {{#isnt id 777777777777}}
    {{../request_callout}}
    {{/isnt}}
    {{/isnt}}
    {{/isnt}}
    {{#is id 999999999999}}
    {{#is id 888888888888}}
    {{#is id 777777777777}}
    <p>Have more questions?</p> {{#link 'new_request' class='submit-a-request' ticket_form_id='1234'}}TEST Special Contact Form{{/link}}
    {{/is}}
    {{/is}}
    {{/is}}
    {{/with}}
    </div>
    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Lila Kingsley,

    You can achieve your point by doing this. 

    1). Check the section ID on article page.

     

    2). Add the custom link for specific first ticket form of first section's articles.

     

    3). Do same for specific second ticket form of second section's articles.

     

    First_Ticket_Form_ID

    Second_Ticket_Form_ID

    Remove these strings and add the special ticket form IDs from the custom links:

    {{#link 'new_request' class='submit-a-request' ticket_form_id='Ticket_Form_ID'}}Contact Us{{/link}}
    {{#link 'new_request' class='submit-a-request' ticket_form_id='Second_Ticket_Form_ID'}}

     

     

    3). Now, add the script code at the script.js file. This code is checking the form's ID of specific articles.

    I can hide the dropdown by CSS but that's hiding by default for all ticket form so I have do like this.

    function checkTicketId(){
    var formDropdownField = document.querySelector('.form-field.select.optional.request_ticket_form_id');
    if(window.location.href.indexOf('Form_ID')>0){ //Enter the first ticket form ID
    formDropdownField.style.display = "none";
    }else if(window.location.href.indexOf('Form_ID')>0){ //Enter the second ticket form ID
    formDropdownField.style.display = "none";
    }
    }
    checkTicketId();

    Screenshot for the same:

     

    here, Form_ID denotes the ID of that specific form where you want to hide the dropdown bar field. You will get the form ID in the searchbar.

     

    4). When you have done with this, test well.

    5). Example, I have two different sections with the articles and both section's articles contain different different ticket form because I have did the above code for two different section's articles.

     

    Hope, you will get your point. If any confusion let me know, I can explain more :)

    Thanks

    Ifra

     

     

     

    0
  • CREDO Mobile

    Thanks Ifra, I appreciate your help!

    One thing about the code for the article.hbs page though:  I need

    • ALL users who click the submit a request link on articles in my 3 sections to go to form A
    • BUT everyone else clicking it in any other article to our default form, form B

    I'd prefer not to have to list all sections in the template code as that would be a maintenance headache.  So I think I need nested IS/ISNT or nested IF statements + an ELSE statement.  I've tried various approaches to this like the code in my original message above but nothing works--when article.hbs allows a save it either shows only one of the form links or NO form links.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    I'll get back soon.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi, I have also tried working only nested isnt is working.

    You can try this type:

     

    Add regex for breadcrumb  and check the category ID, If you would check the category ID then you won't need to check much IDs. By default your special form link would be hide.

     

    Thanks

     

    0
  • CREDO Mobile

    @...  Thanks again!  I'm currently learning JavaScript so it's cool to see this code :)  What is the $('.special-link') value you're setting specialForm to?  I set the variables as written and did console.log() on them in the console, but I don't understand the results it returns for specialForm.  Would it be the ticket form url for the users who click the submit request link on articles in the category/sections I want going to a new form  (form A in my prior comment)?  

    And as a side note, I got the original section based code working using IS/ELSE using the structure posted by Chris in this comment

    <div class="article-more-questions">
    {{#with section}}
    {{#is id 1}}
    Have more questions? {{#link 'new_request' class='submit-a-request' ticket_form_id='1'}}Special Contact Form{{/link}}
    {{else}}
    {{#is id 2}}
    Have more questions? {{#link 'new_request' class='submit-a-request' ticket_form_id='1'}}Special Contact Form{{/link}}
    {{else}}
    {{#is id 3}}
    Have more questions? {{#link 'new_request' class='submit-a-request' ticket_form_id='1'}}Special Contact Form{{/link}}
    {{else}}
    Have more questions? {{#link 'new_request' class='submit-a-request' ticket_form_id='2'}}Standard Contact Form{{/link}}
    {{/is}}
    {{/is}}
    {{/is}}
    {{/with}}
    </div>
    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Cool that you got it finally.

     

    $('.special-link') value you're setting specialForm to?

    $('.special-link') - Class name

    specialForm - variable

     

    By default special form would be hidden and you are showing special form on specific articles by checking the category ID in the JS.

    If those articles belong to that category then a special link would be. shown otherwise that would be hidden.

     

     

     

     

     

    0
  • CREDO Mobile

    Ah yes, I should have caught that...thank you @...!!!

    I may investigate hiding the class '.form-field.select.optional.request_ticket_form_id' in CSS...I think we can update all our help center's contact form links to a specific form id and not use the generic helper  {{request_callout}} or href="/hc/en-us/requests/new".

    0
  • Craig Rich

    Is there a way of changing the Channel Name when a user submits a request on the help center? Currently we get an email confirmation that says "Channel Web Form" and I would like to change this to make it clearer for tracking purposes (we have a number of different web forms across our business).  Thanks all.

    0
  • Dave Dyson
    Zendesk Community Manager

    Hi Craig,

    It's not possible to change how the channel is referenced within Zendesk, but assuming the email notification is being sent by a trigger (and presumably using the ticket.channel placeholder), I think you could use Liquid Markup in the trigger to detect that the channel is web form, and display a different text (whatever you want) instead of using the placeholder. For more information on using Liquid Markup, see Understanding Liquid markup and Zendesk Support

    0
  • Allen Lai / Head of CX @ Otter.ai

    I'd like to change the URL to point to a custom form we created. How would I accomplish that by leveraging "article-more-questions" in the article_page.hbs template?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Allen, you will have to follow the below simple steps:

     

    1). Go to your script.js file

    2). Now, you only need to copy and paste the below code at the bottom but under the DOM function.

    document.querySelector('.article-more-questions>a').setAttribute('href', 'https://XYZ/hc/en-us/XYZ/XYZ');

     

    See the screenshot of how I added it on script.js file:

     

    If any issue, do let me know :)

     

    Thanks

     

    1
  • Chloe

    Hi Ifra Saqlain,

    We need as what Allen mentioned, to change the URL to our customised one. I done what you suggested by literally pasting your code at the bottom part of script.js file but it was not working (sorry that I am really a layman of coding and technical stuff). Maybe my format is wrong? Would you mind helping to take a look? Thanks a lot!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay don't worry, I'll fix it. I think you are out of

    document.addEventListener('DOMContentLoaded', function() { 

    ......

    });

     

    See how I added inside the 

    document.addEventListener('DOMContentLoaded', function() {

     

    .....

     

     

    });

     

    Please have a look at the below screenshot:

     

     

    Now, still having any issue, please share your HC public URL after setting the live your working theme, so I can figure out the issue :)

    Thanks

    0
  • Chloe

    Oh yes, it works now Ifra Saqlain, thanks so much!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Awesome!

    0
  • Ifechi Okobi

    Hi Ifra Saqlain,

    Please I want to do this for just the "Submit a request" button, how would I go about it?

    Thanks in advance for your help.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hey Ifechi,  you just need to copy and paste the below code into your script.js file as I mentioned above.

     

     document.querySelector('a.submit-a-request').setAttribute('href', 'https://support.zendesk.com/hc/en-us/articles/4408882823834?page=1#comment_4414491995034');

    It's for header link - submit a request

     

     

    For the article page - submit a request

     document.querySelector('.article-more-questions > a').setAttribute('href', 'https://support.zendesk.com/hc/en-us/articles/4408882823834?page=1#comment_4414491995034');

     

     

    Change the URL whatever you want, remove this one - https://support.zendesk.com/hc/en-us/articles/4408882823834?page=1#comment_4414491995034 - and add yours.

     

    Thanks :)

    Team Diziana

     

     

    1
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hello Cris :)

    You can add the attribute to open link on new tab.

     

    In Jquery:

    $(document).ready(function(){
        $('header a.submit-a-request').attr({
         'href': 'https://support.zendesk.com/hc/en-us/articles/4408882823834?page=1#comment_4414491995034', 'target':'_blank'
        });
     });

    Screenshot:

     

     

    Add Jquery CDN on document_head.js.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

     

    Screenshot:

     

     

     

     

     

    By Javascript: Add the given line on script.js file.

    document.querySelector('header a.submit-a-request').setAttribute('target', '_blank');

    Screenshot:

     

    If any issue do let me know.

    Thanks

    Ifra

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Happy to hear :)

    0
  • Michael Laws

    Hello. The original instructions updated the text for the link at the top. A second response seemed to aim at changing every instance of 'Submit a request'.

    Different departments in my organization will use different forms, so I'd like to leave the link at the top and the list item (CompanyName > Submit a request) as they are. My goal is to change only the header text, and to change it per form ID so that each form can have its own header/title.

    I know basically zero JavaScript, so please go slow with the response. Thanks ahead of time. :)

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Michael Laws,

    You want something like this as in the given screenshots: Change the title for every form template.

     

    First Form:

     

     

    Second Form:

     

     

     

    To get the above on your forms, copy the code and paste it at the bottom of your script file:

      
      document.addEventListener("DOMContentLoaded", function () {
        
      function checkTicketId(){
        var formDropdownField = document.querySelector('.form-field.select.optional.request_ticket_form_id');  
        if(window.location.href.indexOf('0000000000')>0){   //Enter the first ticket form ID
            document.querySelector('.breadcrumbs  li:nth-child(2)').innerHTML =' One';
            document.querySelector('h1.new-request-title').innerHTML =' One';
        }else if(window.location.href.indexOf('111111111')>0){  //Enter the second ticket form ID
              document.querySelector('.breadcrumbs li:nth-child(2)').innerHTML =' two';
           document.querySelector('h1.new-request-title').innerHTML =' Two';
        }
      }
      checkTicketId();
        
    });




    Note: Remove 000000 and 111111, add your form IDs which you can get from the search-bar f your window.
    You can get the form IDs, I told above in this thread.




    Screenshot:






    new_request_page.hbs:Add a class in header (<h1 class-"new-request-title">)

     

     

    If any confusion feel free to ask :)

     

    Thanks

    Team

     

    0
  • Brandon D.

    I'm currently utilizing the method shared by Nick S. above and have implemented the following code:

      // translate 'submit a request' to 'contact us'
    Array.prototype.forEach.call(document.querySelectorAll('a,h1,li'), function(a) {
    if (a.textContent.includes("Submit a request")) {
    a.textContent = 'Contact Us';
    }
    });


    Does anyone know if it's possible to use dynamic content in addition to this? That way "Contact Us" can be translated when a different language is selected?

    I see that Zendesk automatically provides a translation, but I'd like to alter the wording a bit.

    Highlighted below, you can see the 3 different instances where "Contact Us" is being translated:


    Ideally, looking for a solution where I can implement Dynamic Content via 1 singular script that will replace, and translate, anywhere it's being referenced. 

    TIA!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi,

    You can create DC and add DC placeholder in your code. See how I did.

    i). Create DC.

    Read this document to create : https://support.zendesk.com/hc/en-us/articles/4408882999066-Providing-multiple-language-support-with-dynamic-content

     

    ii). Now, add DC placeholder into the JS code.

    <script>
    document.addEventListener('DOMContentLoaded', function() {
      Array.prototype.forEach.call(document.querySelectorAll('a,h1,li'), function(a) {
            if (a.textContent.includes("Submit a request")) {
                a.textContent = "{{dc 'contact_us'}}";
          }
      });
        });
    </script>




    Screenshot for the same:



     

    iii). Output

     

     

     

     

     

     

    OR

     

     

    Another way is:

    https://support.zendesk.com/hc/en-us/community/posts/4409515211674-Help-Center-Change-default-placeholder-text-in-your-Search-Box?page=2#comments

     

     

    If any confusion please ask :)

    Thanks

     

    0
  • Brandon D.

    Hi Ifra Saqlain

    Thank you so much for your quick response and help. After using your first method, I noticed that the "Submit a request" text did change over to "Contact Us" per my Dynamic Content rule, however, when I select Japanese as the language, it would still translate to the default translation of:

    リクエストを送信


    I was expecting, per my DC it should have been translated to:

    直接のお問合せ




    Just to note and clarify, even without the script in place, when you change the language to Japanese "Submit a request" changes to: リクエストを送信

    What finally worked was duplicating the code.

    The top script references Submit a request, while the bottom references リクエストを送信



    Submit a Request changed to Contact Us (English)

    リクエストを送信 changed to 直接のお問合せ (Japanese)

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hey Brandon D.,

    Now, you can try another way. Check the language using script code and add translations manually. 

    $(document).ready(function() {
      
      var htmllang = document.documentElement.lang;
      
      if (htmllang === "en-US") {
      $('h1.new-req-temp, a.submit-a-request').text('Contact Us');
        
        if(tempName == 'new_request_temp') {
         $('.breadcrumbs li:nth-child(2)').text('Contact Us');
        }
      } 
      


    if (htmllang === "ja") {
      $('h1.new-req-temp, a.submit-a-request').text('直接のお問合せ');
        
        if(tempName == 'new_request_temp') {
         $('.breadcrumbs li:nth-child(2)').text('直接のお問合せ');
        }
      } 




    if (htmllang === "zh-tw") {
    $('h1.new-req-temp, a.submit-a-request').text('TEXT');
        
        if(tempName == 'new_request_temp') {
       $('.breadcrumbs li:nth-child(2)').text('TEXT');
        }
      } 


    });




    Note:
    if (htmllang === "en-US"):- Remove en-US add your language symbol here,
    and change translations here -

    $('h1.new-req-temp, a.submit-a-request').text('Contact Us')
     $('.breadcrumbs li:nth-child(2)').text('Contact Us')




    Do this for all,
    check language and add translation.


    if (htmllang === "CHECK LANGUAGE") {
     $('h1.new-req-temp, a.submit-a-request').text('ADD TRANSLATION');
        
        if(tempName == 'new_request_temp') {
       $('.breadcrumbs li:nth-child(2)').text('ADD TRANSLATION');
        }
      } 




    It's up to you that how many languages you want to add for translated text:-

    https://support.zendesk.com/hc/en-us/articles/4408821324826-Zendesk-language-support-by-product#h_01EYXD2ANQC6GT2G0KC65PREFA

     

     

     

     

     

    How to do,

    i). Go to your new_request_page.hbs file.

    ii). Add class name to your heading-

     

    and, add template name at the top like this-

     

    iii). Add element by it's class name like below.

        $('h1.new-req-temp, a.submit-a-request').text('Contact Us');

        $('.breadcrumbs li:nth-child(2)').text('Contact Us');

     

     

    iv). Add the given code. Update the classes as per your classes of theme.

    $(document).ready(function() {
      
      var htmllang = document.documentElement.lang;
      
      if (htmllang === "en-US") {
      $('h1.new-req-temp, a.submit-a-request').text('Contact Us');
        
        if(tempName == 'new_request_temp') {
         $('.breadcrumbs li:nth-child(2)').text('Contact Us');
        }
      } 
      
       if (htmllang === "ja") {
       $('h1.new-req-temp, a.submit-a-request').text('直接のお問合せ');
        
        if(tempName == 'new_request_temp') {
         $('.breadcrumbs li:nth-child(2)').text('直接のお問合せ');
        }
      } 
    });

     

    v). Make sure document_head.hbs file must has CDN of jquery.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



    Screenshot below for the same:

     

    Hope, it's worked for you.

    Thanks 

    0

Please sign in to leave a comment.

Powered by Zendesk