I have a search box on my homepage, and to style it correctly I need the button to come before the text box in the markup. The current block code looks like the following.

<form action="/drupal-7.22/search" method="get" id="views-exposed-form-commerce-search-page" accept-charset="UTF-8"><div><div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
          <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
                  <label for="edit-search-api-views-fulltext">
            Search for products          </label>
                        <div class="views-widget">
          <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
 <input type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="30" maxlength="128" class="form-text required error">
                    <div class="views-exposed-widget views-submit-button">
      <input type="submit" id="edit-submit-commerce-search" name="" value="Go!" class="form-submit">    </div>

I've looked at hook_form_alter() and a few template files, but I think that's the wrong way to do it and I'm far from an expert.

I wouldn't mind being able to clean up that tangle of divs too!

  • 1
    Have you tried hook_form_alter()? Specifically, #weight – Chris Rockwell Aug 8 '13 at 16:21
  • I've looked at #weight, but I don't see a way of applying it to a specific <div> via hook_form_alter(), as changing the weight of the #submit element does nothing - its parent <div> needs changing. – Koozer Aug 8 '13 at 17:29

After setting up a test environment and doing some digging, #weight isn't going to do you any good. This is what I did to move the button:

Create a new document in your theme folder and name it views-exposed-form--commerce-search-page.tpl.php. Now, copy the contents of sites/all/modules/views/theme/views-exposed-form.tpl.php to your new file. Next find

<div class="views-exposed-widget views-submit-button">
  <?php print $button; ?>

And move it wherever you please, for my test I moved it directly below:

<div class="views-exposed-widgets clearfix">

which made it the first item in the form. Finally, clear the cache and reload the page.

Further, you should look into the Theme Developer module if you're not using it already. It is very handy for figuring out which .tpl.php file you should create, or which _preprocess() function should be used, to effect the element you're targeting.

  • Just came back to say this is the solution I found, after 4life pointed me in the right direction. Accepted this answer as it's more detailed. – Koozer Aug 9 '13 at 0:06

You can create your own views-exposed-form.tpl.php file and move the submit button to the top, or add a class to it and use css to float left and right. This however would affect all exposed filter on your site.

If you want to alter the form you should use the function

function MODULENAME_form_views_exposed_form_alter(&$form, $form_state)

Your best option is however to try manipulating it with css.


You have add them in

$form['#info']['filter-byline-names']['value'] = 'abc'; $form['#info']['filter-byline-profile-type']['value'] = 'efg';

where abc, efg are the newly added form element

$form['abc'] = array(
        '#type' => 'textfield' ,
        '#title' => 'ABC' ,
      $form['efg'] = array(
        '#type' => 'select' ,
        '#title' => 'Profile Type',
        '#options' => array('asdasd','rajveer','gangwar'),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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