Tuesday, April 24, 2018 04:28 am EDT

Using a Custom Image Button with Drupal 6 Search Form or Block

Bri's picture

So you decided that you want to use an image instead of styling the inputs for the Drupal search block or form. Luckily, this isn't a difficult task at all. Using the hook_form_alter you can accomplish this. You will need to create a small module in order to make this happen. I called mine "modified_search". Here is what the .info file looks like:

; $Id:
name = Modified Search
description = Inject the search how i want it to look.
package = Other
version = VERSION
core = 6.x

And now for the contents of the .module file:

function modified_search_form_alter(&$form, $form_state, $form_id) {
//if its the search block form (based on the id of the form which can be found by viewing the source)
//alter the submit button to use an image instead
$form['submit'] = array('#type' => 'image_button', '#value' => t(' '), '#src' => 'sites/all/themes/djcase/media/Button-Search.gif');
// alter the default value of the textbox to "Search..." on page load
$form['search_block_form']['#default_value'] = 'Search...';
// add in some javascript events to change the text when the cursor is placed in the box
$form['search_block_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search...') {this.value = '';}", 'onblur' => "if (this.value == '') {this.value = 'Search...';}" );

And that's all there is to it. The first line in the function is the most important one. This is testing to see which form ID is being altered. This example uses the id "search_block_form" which corresponds to the search block. If you wanted to use the search_theme_form instead, the code would be the same except for replacing the instances of search_block_form with search_theme_form. You can also use the same principle to change the way the login block or login form looks. Just find the ID of the form by viewing the source code. Good luck!