Help Center - Change default placeholder text in your Search Box


  • Wes Drury

    @Chris - Glad I could help and let me know if you run into any Help Center issues.  Best of luck.

  • Larisa Moore

    Two (somewhat related) questions:

    1. Is it possible to use dynamic content for the text? We have 9 languages so it's going to be a LONG string of code if I have to hand-code it separately for each language. I can do that, of course, I'm just lazy and we already have the dynamic content set up for the text I want to use. :)

    2. Is it possible to change the text just for one language, and leave the rest as the default? We were thinking of testing the change just in English first, as we have a few different phrases we want to try out to encourage more searching.

  • Wes Drury

    @Larisa - It gets a little tricky but it should be possible.  What you have to do is display the dynamic content in a div on the page but hide it and then swap it out with the placeholder text.  If you just had a few then you could always use IF statements.

  • Marcel V

    Thanks for this: super! 

  • Larisa Moore

    Hi, me again. We just realized that while the customized text is appearing correctly localized on the home page, on the section and article pages and contact page only the English-US customized text is appearing, regardless of the language in which you are viewing our site ( Since the code is in the JS I assumed it would carry through all the applicable pages. Any idea what I might have done wrong?

  • Wes Drury

    @Larisa - If you are hiding the text on the home page then the other pages will not be able to read it.  You will need to add and hide the text on those pages as well and then the JS code should work across all the pages.  I know theres got to be a better solution so let me think about it some more and see if I can come up with something else.

  • Larisa Moore

    I'm not hiding the text on the home page, it's still what I think was the default:

    <section class="hero-unit search-box">

    and on the other pages it's

    <nav class="sub-nav">

    Here's what I put in the JS:

       //change search box text
      $('#query').attr('placeholder','Start typing to find answers!');
      if(lang == "en-GB") {
    $('#query').attr('placeholder','How can we help you?');}

      if(lang == "de") {
    $('#query').attr('placeholder','Wie können wir helfen?');}

    if(lang == "it") {
    $('#query').attr('placeholder','Cosa possiamo aiutarti?');}

    if(lang == "fr") {
    $('#query').attr('placeholder','Comment pouvons-nous vous aider ?');}

    if(lang == "es") {
    $('#query').attr('placeholder','¿En qué podemos ayudarle?');}

    if(lang == "pt-BR") {
    $('#query').attr('placeholder','Como podemos ajudá-lo?');}
      if(lang == "ko") {
      if(lang == "ja") {
      if(lang == "zh-TW") {


  • Starr McFarland

    Strangely, this was working for me, but now is not.  I am working on a re-design of our Help Center in the Sandbox.  This line...

    $('#query').attr('placeholder','Find your answers now');

    ...was working until today.  Now it isn't.  It is still working on our production system.

  • Wes Drury

    @Starr - Are you using the exact same search box across all your pages or are you using a different search box on the articles and section page.  Take a look at the {{placeholders}} on those pages.

  • Starr McFarland

    I am using a {{search_in_category}} on the category pages.  But it's not working on the homepage either, which is just a plain {{search}}.

  • Daniel Sagaya Raj


    I am using the place holder {{link 'new_post' role='button'}} for new post button. Right now the link gets rendered with the display name "New Post". How do i request the service to render the link with my custom name. is there any way i can use {{link 'new_post' role='button' text='Click to Post'}} where the text attribute represents the text i want the <a> tag to hold.

  • Wes Drury

    @Daniel - that would be nice however I just verified that you can't change the test from the curlybars placeholder.  You would need to trigger that via JQuery.

    Add this below your $(.document.ready) function

    $('.post-to-community a').text('Post Your Ideas');

  • Iggy Pritzker

    Just add placeholder to search tag

    {{search placeholder='Search our support' instant=true}}

    It works now, but we need a way to make dynamic content there for multiple languages...

  • Edwin Schukking

    We have a multi-language setup and I have tried to implement the JS as described in this thread, but the text in the search box did not change:

    // START change search box text
    // Edwin Schukking 2016.06.20
    // Source:

    var currentLanguage = $('.language-selector a:first').text();

    if(currentLanguage === "Deutsch") {
    $('.search #query').attr('placeholder','Knowledge base durchsuchen');}

    if(currentLanguage === "English (AU)") {
    $('.search #query').attr('placeholder','Search knowledge base au');}

    if(currentLanguage === "English (UK)") {
    $('.search #query').attr('placeholder','Search knowledge base gb');}

    if(currentLanguage === "English (US)") {
    $('.search #query').attr('placeholder','Search knowledge base us');}

    // END change search box text

    Is there something I have missed, since my knowledge of JS is very limited. 

    Thanks in advance!


  • Iggy Pritzker

    /* search placeholder change text */
    var currentLanguage = $('html').attr('lang').toLowerCase();
    if(currentLanguage === "de") {
    $('.search #query').attr('placeholder','Suchen Sie in unserer Unterstützung');

  • Edwin Schukking

    Thanks, Iggy.

    I will try your suggestion!

  • Jessie Schutz
    Zendesk team member

    @Iggy: thanks for jumping in and helping out!

    @Edwin: be sure to come back and let us know how it goes!

  • Edwin Schukking

    I will, Jessie. Our DEV team is looking into this solution and I will surely let you know whether this worked for us!

  • Stefan Wright

    Thanks @Iggy! @Zendesk if Iggy's solution works would it be possible for the help documentation to be updated? It took me way to long to find that information and the jQuery version seemed intermittent when I was testing it in the sandbox (plus it showed "Search" for a split second before changing the text so it was not a useable solution for me.

  • Jessie Schutz
    Zendesk team member

    Hey Stefan!

    Since our Support team isn't able to support these types of customizations, we generally can't add them to our official documentation.

    However, I'm sure Wes would update his tip when he finally gets time, if we ask nicely. :) I'll check with him!

  • Harold

    Hi, I've been searching for a while but didn't find anything on how to change the appearance of the search field box. Our website style guide demands a square box, so I have to change the rounded default search box.

  • Harold

    Nevermind, I've found it ;)

      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  • Jessie Schutz
    Zendesk team member

    Hey Harold! Glad you got it figured out, and thanks for coming back to tell us our solution!

  • Karsten M. Jensen

    We want to use Option 1, but in combination with Dynamic Content.

    How can I add something like: {{dc 'hc-home_page_heading_search'}}

    To: {{search submit=true instant=true class='search search-full' placeholder=''}}

    Help very much appriciated.

  • Trapta
    Community Moderator


      You cannot use DC in search component. However, you can add your translated placeholder in the search bar using a bit of JS.

      Here's a post you can refer to -

      Let me know if you face any issue.


  • Sherri Anderson

    Thank you so much, worked perfectly!


  • Jennifer Eolin

    Does this work on the Copenhagen theme?

  • Wes Drury

    @Jennifer, for the Copenhagen theme all you need to do is edit the HomePage.hbs. The screenshots above are from an modified Copenhagen theme.

     {{search submit=false instant=true class='search search-full'}}

    Change to:

    {{search submit=false instant=true class='search search-full' placeholder='Search for everything ....'}}

    Just edit the text after placeholder=.  This solution works great on a single language Help Center.  You will need to do this on each page that the search bar is located.  This is option 1 from my post.  Option 2 still works as well however we try to only use JQuery/Javascript code when necessary.  Both these solutions will work for single language Help Centers.

  • Jennifer Rowe
    Zendesk Documentation Team

    Hey Jennifer,

    I talked to Wes and told him that you support multiple languages. So he recommended this tip, using dynamic content:

    If you need help with it, you can message him here or

    Good luck!


  • Iggy Pritzker

    we can also do without javascript in template:

      {{#if alternative_locales}}
             {{#is 'English (US)'}}
                {{search placeholder='Search Resources' instant=true}}
                 {{search placeholder='Buscar Recursos' instant=true}}


Please sign in to leave a comment.

Powered by Zendesk