Help Center - Change default placeholder text in your Search Box

ModeratorWes

• 2013年10月24日 01:00

Zendesk level: Beginner
Knowledge: Copy and Paste :-)
Time Required: 5 minutes

There are two options you can use to change the placeholder text associated with the Search Bar.

OPTION 1 - Use the curlybar framework (preferred option)

Default from Home Page tab

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

We are going to add placeholder='Search our Forums' like below

{{search submit=false instant=true class='search search-full' placeholder='Search our Forums'}}

Option 2 - Use JQuery

This option works fine but there could be a small delay while the DOM loads.

1. Select the “JS” tab
2. Find the following line: $(document).ready(function() {
3. Add the following code right below the line above

$('#query').attr('placeholder','Search our Forums');

1. Save and Publish your site and you should notice the text change in your Search box.

 

Before

After

• Jessie Schutz

  • 2018年12月28日 16:19

  Zendesk Customer Care

  Thanks for sharing, Iggy!

• William Grote

  • 2019年06月10日 13:49

  The Placeholder option was a snap!  Just searched for the placeholder on the home page and change the text after the placeholder =' to anything you want...'}}

   

  {{search submit=false instant=true class='search search-full' placeholder='Search Box – I’m wicked smart, please ask me anything...'}}

• Brett Bowser

  • 2019年06月10日 15:00

  Zendesk Community Manager

  Glad to hear Wes' solution worked for you above William :)

• Tahmid Mozaffar

  • 2020年09月16日 17:12

  How can I use dynamic content as placeholder in search bar?
  
  I know this is not valid, I want to do something like this. so that I can show dynamic content in search bar.

  {{search placeholder={{dc 'search_text'}} submit=false instant=settings.instant_search class='search search-full'}}

  Here, search_text is the name of key I added in the dynamic content section of zendesk support.

• Dan Ross

  • 2020年09月16日 21:39

  Community Moderator

  Hey @...

  I would expect the Dynamic Content to work correctly in that instance but if it doesn't render, you can also use the locale helper to have conditional messages in your template

  ex:

  {{#is help_center.locale '$locale'}} {{search submit=false instant=true class='search search-full' placeholder='What are you searching for?'}}{{/is}}
  
  {{#is help_center.locale '$locale2'}} {{search submit=false instant=true class='search search-full' placeholder='Another search string'}}{{/is}}

  where the $locale is the ISO language code of your HC (ex: 'en-us', 'fr', 'nl', 'de')

• Tahmid Mozaffar

  • 2020年09月16日 23:56

  Hi, thank you for the reply. your approach is working. But in that way I have to put strings in the template code. However I wanted to show dynamic content value that I have added in the Dynamic Content section in Zendesk support admin.
  
  I was able to do it like below. It is kind of hack, but served my purpose.
  
  
  

  in the home_page.hbs
  
  {{search placeholder='Search' submit=false instant=settings.instant_search class='search search-full home-page-search'}}
  
  
  

  at the bottom of the file I have added...
  
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script>
    const searchPlaceHolder = "{{dc 'search'}}";
    $(".home-page-search > input#query")[0].placeholder = searchPlaceHolder;
  </script>
  
  here 'search' is the key of the dynamic content I have added in support admin

• Greg Katechis

  • 2022年03月01日 19:30

  Zendesk Developer Advocacy

  Hi Ivy Gilbert! Both of these options are still valid, so could you share what you have added to your home page template and a screenshot of the search bar placeholder so that we can see what's going on in your situation?

• Derek Young

  • 2023年05月23日 14:46

  Hello,

  We're using the Copenhagen theme, and I'm not finding either spot to change the Search Box placeholder text.

  Home: {{search submit=false instant=true class='search search-full'}}
  JS: $(document).ready(function() {
  

  Has the location or code changed for this?

• Jupete Manitas

  • 2023年05月29日 04:56

  Zendesk Customer Care

  Hi Derek, thanks for writing in! 
   
  We can find the Search bar code under home_page.hbs template and you can add them after the search-full'. We followed ModeratorWes' tip and so far it is working on our end. 
  
   
  
   
  We hope this information helps!
  

サインインしてコメントを残してください。