Round Rock / Austin, Texas
Drupal Web Developer

Theming the Search Form in Drupal

Theming the Search Form in Drupal

Theme Drupal Search Form using template.php

Want to customize the Drupal Search Form with a placeholder, custom size, custom submit button text, or use an image for the submit button?  All of the things can be accomplished by adding a function to your theme's template.php file.


function YOURTHEMENAME_form_search_block_form_alter(&$form, &$form_state, $form_id) {
    $form['search_block_form']['#title'] = t('Search'); // Change the text on the label element
    $form['search_block_form']['#title_display'] = 'invisible'; // Toggle label visibilty
    $form['search_block_form']['#size'] = 40;  // define size of the textfield
    $form['search_block_form']['#default_value'] = t('SEARCH'); // Set a default value for the textfield
    $form['actions']['submit']['#value'] = t(''); // Change the text on the submit button
    $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/YOUR-IMAGE-NAME.jpg');

    // Add extra attributes to the text box
    $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = 'Search';}";
    $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
    // Prevent user from searching the default text
    $form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }";

    // Alternative (HTML5) placeholder attribute instead of using the javascript
    $form['search_block_form']['#attributes']['placeholder'] = t('SEARCH');


Related Posts:

Additional Search Terms: 
theme, drupal theme, theming