1

im having problems to modify html of drupal search form. Currently it looks like this:

<form action="/" method="post" id="search-block-form--2" accept-charset="UTF-8">
<div>
    <div class="form-item form-type-textfield form-item-search-block-form">
        <label class="element-invisible" for="edit-search-block-form--4">Recipe Finder </label>
        <input title="Enter the terms you wish to search for." placeholder="Search" type="text"
               id="edit-search-block-form--4" name="search_block_form" value="Search" size="15" maxlength="128"
               class="form-text">
    </div>
    <div class="form-actions form-wrapper" id="edit-actions--3">
        <input type="submit" id="edit-submit--3" name="op" value="GO!" class="form-submit">
    </div>
    <input type="hidden" name="form_build_id" value="form-eHe5OqwUBJ_6iNuySpN1domgBeOYb4utKirLlh58QHY">
    <input type="hidden" name="form_token" value="ADv5U92njeULDgBszbJ6nDHTaGTxTEJMCCL2Qk3SAMk">
    <input type="hidden" name="form_id" value="search_block_form">
</div>

and i need something like this:

<form action="/" method="post">
            <div class="form-item">
                <label for="search">Recipe finder</label>
                <input type="text" name="search" class="search" id="search">
                <button type="submit">Search</button>
            </div>
        </form>

So i need to:

  • Change input to a button

  • Put that button in same div as input and label

    I dont mind having this invisible elements and i know drupal needs them.

I know i need to use hook_form_alter for this but not rly sure how to do it.

1
  • 1
    I suggest that you add some more specific stuff to your question. The way it's written right now it seems like you want someone to write this code for you. what exactly are you struggling with hook_form_alter?
    – jdu
    Commented Mar 17, 2014 at 17:25

1 Answer 1

1

I wanted to do the same thing and after struggling with all kind of hooks/theme functions, I finally found a solution directly inspired from bootstrap.

Here the 2 links of bootstrap implementation:

  1. bootstrap_form_alter
  2. bootstrap theme function

And for my purpose, I've created a custom module to implement a custom search block. So in MYMODULE.module file, I've put:

/**
 * Implements hook_theme()
 */
function MYMODULE_theme() {
  return array(
    'MYMODULE_search_form_wrapper' => array(
      'render element'  => 'element',
    ),
  );
}

/**
 * Implements hook_form_alter()
 */
function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    //other implementations in themes/MY-THEME/template.php
    $form['actions']['submit']['#attributes']['class'][] = 'element-invisible';
    $form['search_block_form']['#theme_wrappers'] = array('MYMODULE_search_form_wrapper');
  }
}

function theme_MYMODULE_search_form_wrapper($variables) {

  $output = $variables['element']['#children'];
  $output .= '<button type="submit" class="btn-foldingsearch">';
  $output .= t('Search');
  $output .= '</button>';
  $output .= '<span class="icon-search icon-foldingsearch rotated"></span>';

  return $output;
}

Anyway, you'll have to adapt it to your configuration. Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.