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 🙂 .

Advertisements

13 thoughts on “Drupal 6 :: Custom Search Box

    • John says:

      Joe:

      Thank you for your simple solution to making text in search box disappear. I’ve been trying to do that for some time and could not get anything to work.

      I tried to thank you for this on your website, but wouldn’t let me leave comment, so doing so here.

      Ahsan:

      I couldn’t make your approach work. No doubt it does, but however I was doing it, it didn’t happen for me.

      I’m not much of a programmer, so no doubt I did something wrong. Perhaps a conflict with my existing theme .tpl.php file which already was handling the first two lines of your solution.

      But thanks anyway as it was helpful to try and got me to something that worked.

      John

  1. ron says:

    hi
    i have folowed this tutorial but it does not change anything. i am using an Hebrew version of drupal, and it is the first time i build something on drupal.
    can the fact that i am using an Hebrew version be the fault that the search box does not change?

    best regards

  2. ron says:

    hi

    well if i conver the theme to garlend the search box does change.

    so i guess it does mean that the problem is that i am using Hebrew?

    can i adapt that?

    best regards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s