Help Center - Change default placeholder text in your Search Box

ModeratorWes

• 24 octobre 2013 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

• Jens Troest

  • 11 décembre 2013 15:45

  How do you localize text with this?

• Andrea Saez

  • 11 décembre 2013 16:04

  if(currentLanguage === 'LANGUAGE') {
  $('input').attr('placeholder','TEXTINNEWLANGUAGE');}

  example, if using FR as a language

  if(currentLanguage === 'Français') {
  $('input').attr('placeholder','Recherche');}

• ModeratorWes

  • 11 décembre 2013 16:08

  

  @Jens - I had to call in the local expert here who has provided the code that you need.

  @Andrea - Thanks so much - you rock!

• Jens Troest

  • 12 décembre 2013 11:59

  Nice. Thanks!

  I assume extracting currentLanguage from the {{language_selector}} component like below is the most efficient approach?

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

• Andrea Saez

  • 12 décembre 2013 14:12

  That's certainly a way to do it. We literally hard coded the language because we need to make sure there's no mistakes or crossovers with anything :)

• Dani Johnson

  • 13 décembre 2013 21:57

  Awesome

   

• James

  • 18 décembre 2013 19:44

  I just noticed when I made this change to the search box, it's also showing up in some fields on our "Submit a request" form. Any ideas how I could fix this?

• Dani Johnson

  • 18 décembre 2013 20:03

  I noticed the same thing as James.

• ModeratorWes

  • 18 décembre 2013 20:11

  

  @James - I'm looking into this as so far I've been unable to duplicate it in my environment.  I'm about to switch over to one of my test environments and play around with it there.  When I inspect the ticket fields they are not labeled as a placeholder so it should not be showing up in those fields.  I'll get back with you soon.

• James

  • 18 décembre 2013 20:14

  Thanks Wes!! If it helps, I am using The Humble Squid theme. 

• James

  • 18 décembre 2013 20:18

  Think I found it. I've attached a screenshot when I opened the DevTools and it does look like it references a placeholder for my ticket fields. Think that's it?

• ModeratorWes

  • 18 décembre 2013 20:22

  

  @James - yes it is calling it from there.  I wonder if this was a recent change that Zendesk made.  Either way let me do some testing and get the code to only change the Placeholder on the main page.

• ModeratorWes

  • 18 décembre 2013 20:36

  

  @James & Dani - Give this code a try as it worked in my test environment and hopefully this id is not being used anywhere else.  Before I edit and change my post let me know if you run into any issues:

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

• James

  • 18 décembre 2013 20:38

  Success! Thanks Wes, you rock!

• Mike Clark

  • 28 mai 2014 14:45

  is there a way to update the text on the button as well?  I'm using the " {{search}}" component native to zendesk and any CSS changes don't seem to be taking effect.

• ModeratorWes

  • 28 mai 2014 16:53

  

  @Michael - Not all Zendesk themes have the Search button at the end of the Search Bar.  However we can change the wording with JQuery.  Please add the following into your JS below the $(document).ready(function() {

  // change wording inside of Search Button

  $( "input[value='Search']" ).attr('value','Search Me' );

   

  Just change 'Search Me' to whatever you like for your button to say.  Let me know how it goes.

• Mike Clark

  • 30 mai 2014 21:10

  thank you Wes, that works just fine....still very new to JQuery.  Do you think its possible to use a similar technique to add an image like a magnifying glass which is pretty standard for search buttons.

• ModeratorWes

  • 31 mai 2014 04:08

  

  @Michael - yes this should be possible via JQuery.  I'm currently on vacation but when I get back I'll see if I can do some testing.  I'll get back to you later next week.  Have a great weekend.

• Christopher Stock

  • 5 août 2014 11:20

  Community Moderator

  Hi Wes, we have the same question as Michael.  How do we replace the search button text with an entypo icon?

  I tried changing the CSS to:

  .search input[type=submit] {
    font-family: "entypo";}

  Then modifying your JQuery to:

  $( "input[value='Search']" ).attr('value','🔍' );

   

  But this this just replaced the search button text with the ascii code for the entypo magnifying glass (🔍).

   

  Any ideas?

• ModeratorWes

  • 6 août 2014 17:20

  

  @Christopher - I normally replace the entypo icons with Font Awesome icons however let me play around a little and see what I can come up with.  School starts up for us this week so it's been very hectic so give me a few days and I'll respond back once I do some testing.  If you come up with something in the mean time please let me know.

• Christopher Stock

  • 7 août 2014 07:54

  Community Moderator

  @Wes - I know the feeling!

  I've also tried with Font Awesome, but no joy.  I've been working with this - http://jsfiddle.net/christopherstock/1kfkLLb1/

  If I change the input value to the Font Awesome unicode in the HTML I can see the magnifying glass, but if I change the value using JS it just puts the unicode in the input. 

   

• Manuel

  • 25 février 2015 21:02

  @Wes - I tried to input the code to get the translation of the Search box placeholder when the language is French but it doesn't work. I just get the English text for both languages. Here's the code I have in my JS:

  $(document).ready(function() {
  $('#query').attr('placeholder','Search AQUAOVO Help Center');
  if(currentLanguage === 'Français') {
  $('input').attr('placeholder','Recherche support AQUAOVO');}

• ModeratorWes

  • 25 février 2015 22:00

  

  I don't have multiple languages setup so I can really help you there.  Try the code below and make sure you are logging in with a user with that language selected in their profile.

  if(currentLanguage === 'Français') {

  $('#query').attr('placeholder','Recherche support AQUAOVO');}

• Xuan Wang

  • 3 mars 2015 17:21

  Hi Wes,

  Thanks for the great tip. I am using the Humble Squid template and I have tried both lines, 

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

  $( "input[value='Search']" ).attr('value','Search Me' );

  Somehow neither works for me. The placeholder text is not changed. Do you perhaps have any idea ? 

  Thanks, 

  Xuan 

   

   

• ModeratorWes

  • 3 mars 2015 20:27

  

  @Xuan - Did you make sure the code was directly under the $document. ready function.  I just tested the below code and did verify its still valid.

  // change wording inside of Search
  $('#query').attr('placeholder', 'Search our HelpCenter');

  If you are live could you include a URL to your Help Center as you may have other code structured incorrectly.

• Xuan Wang

  • 4 mars 2015 09:52

  Hey Wes, 

  Thanks for your reply! Our Help Center is not live yet. But here is the screenshot. I made sure to save and publish the changes. However, it just does not work for me. Thanks!

  

• Xuan Wang

  • 4 mars 2015 11:50

  Hi Wes, 

  Once I am in the Knowledge base, I see that the search text is changed. However, the search text on the home page is not updated. 

  Thanks, 

  Xuan

• Andrew Checkley

  • 22 avril 2015 15:03

  Hi,

  I have been searching the CSS for this to change the font size and placement but have been unable can anyone advise?

  I am going to change the size of the search box but it looks odd without doing the text also.

   

  Thanks

• ModeratorWes

  • 23 avril 2015 12:54

  

  @Andrew - You can change the font size with the following CSS.

  #query {
       font-size: 14px !important;

  }

  Let me know if this works for you.

• Chris Nungesser

  • 12 mai 2015 19:02

  Wes, this was super helpful. Thank you very much!

Vous devez vous connecter pour laisser un commentaire.