Pages

Tuesday 12 May 2015

How to Customize the Block Search Form

Drupal 7

Add the following code snippet to template.php in your theme and you can:
  • change the submit button to an image
  • change the text of the submit button to 'Go!' (just remove the // in front of that line of code, and delete the image_button code below it)
  • add default 'Search this site' text in the input form and make it disappear when users click in the input form
  • <?phpfunction YOURTHEME_form_alter(&$form, &$form_state, $form_id) {
      if ($form_id == 'search_block_form') {
        $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('GO!'); // Change the text on the submit button
        $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search-button.png');
    
        // 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');
      }
    } ?>
    Note: When you copy the above snippet to an existing template.php in your theme - you need to replace YOURTHEME with the name of your theme (sure - it's obvious ...). You also have to pay attention to the use of the php brackets - <?php and ?>. The first one <?php should already be at the top of an existing template.php file and the closing one might not be useful if you later add more snippets, etc.
    Alternatively and probably better practice is to add the brackets to each snippet individually - this would mean you may have to add a closing bracket ?> to an existing template.php file before adding the above snippet.

    Change drupal default search input type Format:

    type="text" to type="search"

    It's works well in D6 and D7:

    /**
    * Changes the search form to use the "search" input element of HTML5.
    */
    function YOURTHEME_preprocess_search_block_form(&$vars) {
    $vars['search_form'] = str_replace('type="text"', 'type="search"', $vars['search_form']);
    }

    This snippet goes into the template.php file of your theme. In my case it's tao, that is why the function starts with "tao_". You have to rename it to match it your theme name.

    Reference Node is--
    https://www.drupal.org/node/154137
    https://www.drupal.org/node/45295

    No comments:

    Post a Comment