Drupal 6 :: Custom Search Box

hello Friends,

I came across a scenario where it was needed to customize Drupal 6 search box for my current drupal based theme and this customization was needed to :

1. Change Default text on submit button
2. Change Default text in search box (Search this site)
3. When user clicks on search box, default search box text should disappear

All of above tasks should be easily attainable if you are not working in Drupal but it doesn’t mean that these are very difficult while working in Drupal. Somehow, it is a little tricky.

Most recommendable and suitable way that i found was to create a new module and use form_alter hook to track the search form events and bring all above changes in these events.

I’ll recommend you to read this thread: http://drupal.org/node/214592 where Heine helped alot to get clear ideas about form_alter hooks and their usage. Hopefully it will help you too.

Now lets move towards the solution.

First of all create a new module under sites/all/modules with any name. Say it is named ‘abc’ (supposing that you will be aware of the process of module creation and all files needed to create for a new module in Drupal). Open your abc.module file and create a new function there named ‘abc_form_alter‘ having parameters (&$form, $form_state, $form_id).  Basically, ‘abc_form_alter‘ will implement hook_form_alter (explained well http://drupal.org/node/214592) and will use this function to grab search form events and implement my search box changes on triggering of those events.  So this is the summary of our solution and following code you’ll write in abc.module file.

function abc_form_alter(&$form, $form_state, $form_id) {
  if($form_id=='search_theme_form')
  {
	$form['submit'] = array('#type' => 'submit', '#value' => t('[ GO ]'));
	$form['search_theme_form']['#default_value'] = 'Search My Site';
	$form['search_theme_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search My Site') {this.value = '';}" );
  }
}

and That’s All 🙂 .

Lets make a short review on above code,

This condition if($form_id==’search_theme_form’) will check if ‘search_theme_form’ is about to render then do following stuff:

 $form['submit'] = array('#type' => 'submit', '#value' => t('[ GO ]'));

Above Line will change the default submit button text and make it to be [ GO ]

 $form['search_theme_form']['#default_value'] = 'Search My Site';

This code Line will Change Default text in search box and make it to be ‘Search My Site’

 $form['search_theme_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search My Site') {this.value = '';}" );

This final code line gives the way to change any attribute for this text box (you may use it to change the default css class used for search box, too). Here i changed the ‘onfocus’ attribute and wrote the javascript code so when user click on search box for searching some keyword, search box’s default text (Search My Site) should get vanished.

One last thing, if you’r at very basic level in Drupal or even not a programmer then i’ll recommend you to go for this module Custom Search Box. This module is good but keep in mind that you won’t have everything in your hand while using this module but above process can help you to play freely with search form attributes.

I hope this post will open new horizons for you to customize any Drupal based Form 🙂 .