A common web design feature is to move the label for a form field into the field value, then clear the field once it gains focus. There are many ways to implement this functionality, but this is the Drupal 7 theming method.

These steps assume your theme contains no custom Javascript. They describe how to add the word Search to the regular Drupal search block text field.

• Open your template.php file.

• We will use hook_form_alter() to change the value of the search field:

  function mytheme_form_alter(&$form, &$form_state, $form_id) {
    if ($form_id == 'search_block_form') {
      $form['search_block_form']['#default_value'] = t('SEARCH');
    }
  }
  

• Save and close the file.

• Open the theme .info file.

• To automatically load a JavaScript file specify it in the the .info.

  scripts[] = js/clear_search.js
  

• Save and close the file.

• Create a js directory within your theme directory

• Create a file titled clear_search.js within the js directory and enter the following:

  (function ($) {
  Drupal.behaviors.clear_search = {
    attach: function(context) {
      $('#block-search-form .form-text', context).once(function() {
        this.defaultValue = this.value;
        $(this).click(function(){
          if(this.value == this.defaultValue){
            $(this).val("");
          }
          return false;
        });
        $(this).blur(function(){
          if(this.value == ""){
            $(this).val(this.defaultValue);
          }
        });
      });
    }
  }
  })(jQuery);
  

  Drupal Behaviors run automatically after page load is completed. The click() and blur() function are applied to the Search Block text field. They work together to show/hide the text.

• Save and close the file.

Review How to Customize the Block Search Form for more information about using hook_form_alter() to modify the search block.

Comments

(Statically copied from previous site)

Rob replied on April 27, 2012 - 6:09pm

thanks! worked like a champ.

Chris replied on May 31, 2012 - 9:29am

Hello, I have created a contact form with the webform module. My Textfields have default values like “Name”, “Street”, … Now I want to clear the fields on click, but I can’t find any solutions for Drupal 7. Can you possibly help me?

Thanks a lot Chris

brad replied on June 3, 2012 - 1:37am

You’ll use the method described in this article, but extend it to change all of the fields on the contact form. Add all of the jQuery form field identifiers for the contact form to the JavaScript.

rocky replied on July 7, 2012 - 4:56pm

I tried the script and it works except for the email field. Please tell me how to hide email field created with Webform.

Josh replied on August 3, 2012 - 8:35am

Thanks for this. Helpful, very clear, and works well.

Anna replied on September 15, 2012 - 2:36pm

Thank you very muchly! I’ve been trying to use Custom Search module for this, but its localization is completely broken. This works and default text gets properly localized. You’re my hero!

Ryan replied on November 9, 2012 - 1:19pm

How do you alter this if you want the field to start with the word Search in the field, then when the user clicks on it the word Search disappears so they may type in the words they need? Tried messing around with it a bit, but nothings seems to be working.

brad replied on November 19, 2012 - 12:29pm

Unless I misunderstand your question, you should simply need to implement the above.