Drupal 7 - Place field descriptions above the field

Question

By default in Drupal 7, field descriptions appear below the field. Is there anyway to move them above the field?

In Drupal 6, you could paste the following code in template.php to move the descriptions. However, the code does not work in Drupal 7:

/**
 * Place CCK Options above field .
 */

function ThemeNAME_form_element($element, $value) {
  $output  = ' <div class="form-item"';
  if(!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }  
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'.t('This field is required.').'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' <label for="'. $element['#id'] .'">'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label> \n";
    }
    else {
      $output .= ' <label>'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }   
  }

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">' . $element['#description'] ."</div> \n";
  }

  $output .= " $value\n";
  $output .= " </div> \n";
  return $output;
}

score 6 · Accepted Answer · answered Apr 04 '11 at 21:18

I had the same problem and accomplished this by adding it to my theme's template.php file.

/**
* Replacement for theme_webform_element() to enable descriptions to come BEFORE the field to be filled out.
*/
function danland_webform_element($variables) {
  $element = $variables['element'];
  $value = $variables['element']['#children'];

  $wrapper_classes = array(
    'form-item',
  );
  $output = '<div class="' . implode(' ', $wrapper_classes) . '" id="' . $element['#id'] . '-wrapper">' . "\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="' . t('This field is required.') . '">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    $output .= ' <label for="' . $element['#id'] . '">' . t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) . "</label>\n";
  }

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">' . $element['#description'] . "</div>\n";
  }

  $output .= '<div id="' . $element['#id'] . '">' . $value . '</div>' . "\n";

  $output .= "</div>\n";

  return $output;
}

Don't forget to clear your cache!

This works perfectly, except the function name should be _form_element ($variables) (instead of webform_element($variables)) — big_smile, Apr 12 '12 at 11:03

score 2 · Answer 2 · answered Nov 05 '13 at 15:44

2

https://drupal.org/project/label_help should also do the trick. Hope that helps

answered Nov 05 '13 at 15:44

gmclelland

187
3

Keep in mind, Label Help is not as of this writing [currently compatible](https://www.drupal.org/node/1882908) with Webform. – rjb Jul 11 '14 at 19:09
While this answer is over a year old and the link is helpful it would be better if you post the essential parts of the answer here, on this site, or your post risks being deleted [See the FAQ where it mentions answers that are 'barely more than a link'.](http://stackoverflow.com/faq#deletion) You may still include the link if you wish, but only as a 'reference'. The answer should stand on its own without needing the link. – Taryn Oct 13 '14 at 11:24

score 0 · Answer 3 · answered Mar 07 '13 at 23:51

Rumblewand's answer, with a conditional that prevents radio/checkboxes from also being thrown into a div above the input. (May be more efficient ways to do this.)

    function theme_form_element($variables) {

      $element = $variables['element'];
      $value = $variables['element']['#children'];

      $wrapper_classes = array(
        'form-item'
      );

      $output = '<div class="' . implode(' ', $wrapper_classes) . '" id="' . $element['#id'] . '-wrapper">' . "\n";

      $required = !empty($element['#required']) ? '<span class="form-required" title="' . t('This field is required.') . '">*</span>' : '';

        //Separate treatment for radio buttons & checkboxes
        if (($element['#type'] == 'radio') || ($element['#type'] == 'checkbox')) {
          //vs outputting input in its own div separate from label
          $output .=  $value . "\n";  

          if (!empty($element['#description'])) {
            $output .= '<span class="description">' . $element['#description'] . "</span>\n";
          }

          if (!empty($element['#title'])) {
            $title = $element['#title'];
            $output .= '<label class="option" for="' . $element['#id'] . '">' . t('!title !required', array('!title' => filter_xss_admin($title), '!required' => $required)) . "</label>\n";
          }

      } else {

          if (!empty($element['#title'])) {
            $title = $element['#title'];
            $output .= ' <label for="' . $element['#id'] . '">' . t('!title !required', array('!title' => filter_xss_admin($title), '!required' => $required)) . "</label>\n";
          }

          if (!empty($element['#description'])) {
            $output .= '<div class="description">' . $element['#description'] . "</div>\n";
          }

          $output .= '<div id="' . $element['#id'] . '">' . $value . '</div>' . "\n";  

      }

      $output .= "</div>\n";

      return $output;

    }

score 0 · Answer 4 · answered Mar 01 '11 at 16:38

0

You can do a theme override for the specific field you want to change or a more general override for all fields. Read this:

http://api.drupal.org/api/drupal/modules--field--field.module/function/theme_field/7

You shouldn't have to mess with template.php at all to do this.

answered Mar 01 '11 at 16:38

mattacular

1,849
13
17

I don't think this is valid. `theme_field` only affects the view of a node, and not the form used to edit or create the node. I'd have to double check that but I'm pretty certain. – Lester Peabody Oct 01 '12 at 17:42

Drupal 7 - Place field descriptions above the field

4 Answers4