Add option to place descriptions above fields

I've the same query for 5.x-2.1.1

Not really an issue as such, more cosmetics giving subjects the opportunity to read what they're selecting above is nicer - especially if there are many differing options :-)

seems to be quite a few people who are wanting to know how to do this.

not yet, tried to apply suggestion posted, but it broke my webform, so at this stage still in same boat.

Heh, webform is hobby, not a job. I haven't even used Webform in *years*. So requests to improve the GUI will have to come with patches if they're ever going to be added.

Regarding putting a description above the select list, a quick fix is to use a markup field and place it above the select list.

Any update? I need my discription above the input field!
How can we do this?

I'm still looking for this option too, on any field (not just select fields).

I inserted the following code snippet (from mmilo at http://drupal.org/node/178247) into my theme's template.php to achieve this effect throughout my site. There has to be a way to implement it on a per-module or per-field basis, but I don't have time to delve into that right now unfortunately.

function pixture_reloaded_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;
}

Obviously you'll have to replace pixture_reloaded with your own theme name. Don't forget to flush your cache if this doesn't work at first.

Upon further inspection I believe that this is a matter that should be dealt with by themes, not by individual modules, because it's a problem that transcends Webform and really applies to form fields generated by all sorts of modules, both contrib and core.

I have revised my solution, originally given above, to be somewhat more intuitive - see #557162: Position field descriptions more intelligently. Also, for discussion on why this should be implemented at the theme level, see #314385: Make position of #description configurable via the API.

If anyone with more experience has a dissenting view, I'd love to hear it - but since quicksketch has already expressed disinterest in this I'm going to take the liberty of marking this won't fix.

Thank you for this helpful code snippet, Dane. It;s much appreciated! Kevin

Thanks for this patch Dane. I believe this is a much better UE (User Experience). The description qualifies or adds more detail to the question/form label, and it just strikes me as common sense, more intuitive to put this directly below the question/form label.

The reductio ad absurdum of the current default - of putting the description below the field/s - is where the list of options or size of the field is more than will fit in the available displayed form space: the user will not even see the description before filling in that part on the form...

It would be great if there was a global site preference for this, with the default of having the description directly under the label/title and above the field/s, as stated in this issue.

Made to work for drupal 7 with the code in the template.php

I changed it a bit to get my webform descriptions above the input field for drupal 7. Drupal 7 allows you to just make calls just to webform itself.

/**
* 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;
}

You will of course change the name "danland" to whatever theme you are using.

To make this an across the board change, would you use theme_form_element() instead? My use case is field descriptions on the node edit pages in an admin theme.

That is correct. Originally that is what I had it set to but I just needed it for webform. It has also since been pointed out to me that this recalls most of the form function and it could be written just to call the parts needed.

It may not matter in your case but I was also using webform conditional module (allows same page conditionals) and this function was overriding my ability to hide fields since it recalled so much of the original form function. It was since rewritten and is listed in the webform conditional module issue thread.

Thanks for your reply, especially the extra info, Rumblewand. It'll definitely help me end some errors before they start.

hi Rumblewand. Thanks for the snippet. It works for me.

Unfortunately #15 doesn't play well with the Webform Conditionals (http://drupal.org/project/webform_conditional) module for showing same-page conditional questions.

All my conditionals are now exposed. I'll have to dig in and see if I can figure that out.

Thanks again to Rumblewand for the code snippet. Works fine for me too.

Works perfect, thanks!

Here's a quick D7 patch to add a checkbox to the field component settings page to place the description above the field. I only tested it on some basic forms and only with the label above. Won't play nicely with inline labels, but you can fix that with some CSS. Definitely some room for improvement, but wanted to share a patch that works for my use-case.

Hi bjmiller121,

Thank you for your code. It functions well, but when I click the Webform tab in my page, following message appear above the form components.

Notice: Undefined index: description_position in theme_webform_element() (line 3582 of D:\Website\sites\all\modules\webform\webform.module).
Notice: Undefined index: description_position in theme_webform_element() (line 3613 of D:\Website\sites\all\modules\webform\webform.module).

So do I need to fix something?
And this only appear every first time I click the Webform tab for a Webform page.

@bjmiller121 #23

This patch works great with my extra additions so that it works with existing forms not just newly create forms.

@linyike #24

This error message only applies to form elements that you haven't updated since you made these custom changes. To fix this you just need to wrap the IF's in an isset() to check if it exists first before the comparison.

How i've fixed it:
function theme_webform_element($variables) line 3578(for latest webform version 7.x-4.9)

if(isset($element['#webform_component']['extra']['description_position'])){
    if ($element['#webform_component']['extra']['description_position'] === 1) {
      $prefix .= ' <div class="description">' . $element['#description'] . "</div>\n";
    }
  }

and on line 3610(ish)

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

Hope this helps.

Just going to open this again to see if we can request this as an actual feature. The code provided by @bjmiller121 #23 (lines in patches are incorrect but manually applying in correct places works fine) and some tweaks by myself #25 provide a good option to allow description fields to be above the input box.

Thanks.

I have re-rolled the patch based on DaveH1234's changes in #25. This patch is for version 7.x-4.9. Hopefully it works. I'm still kind of new to making patches. :-)

Submitting the patch again.

Tests were failing due to the unrelated issue #2510216: Tests are failing (Testbot, local via UI, drush test-run. Updating version to dev and re-queuing.

If this patch doesn't apply to the latest dev, it will need a re-roll. Please always make patches against the latest dev at the time.

Needs a re-roll for the latest dev.

would love to know if this happens, have had so many requests for this to be proper webforms option

patch re-rolled against HEAD

Thanks for the patch. It needs a little love.

1. Coding style / white space.
2. Clarity and capitalization for form definition.
3. Default for all components needs to be set, avoiding the need for isset().
4. Test for truthfulness should be just if ($x), not if ($x === 1) and if (!$x), not if ($x != 1).

I'll tend to this if I get a chance.

This patch:

1. Adds a default of FALSE for displaying the description above the field for all built-in components. Unfortunately, Webfrom currently lacks a clean way to supply a default for add-on components the way it does for component features.
2. Moves the definition to the Display fieldset of the component edit form, and adjusts the wording.
3. Handles the case of descriptions displayed above a field with an in-line label. In this case, the description is a block above the label/field block, not within in, thereby defeating the in-line setting.
4. Adds description_above to webform.api.php.

All-in-all, trickier that expected. I believe that I've tested this well, but additional testing is always welcome. There are a lot of possible combinations.

Committed to 7.x-4.x. D8 port needed.

Port to D8 needed.

Committed and pushed to 8.x-4.x. Thanks!

Hi fenstrat,

I try to find this option in webform 8.x-5.0-rc23 and I don't find it. Can you explain where it is ?

Thx.

Webform 8 is an entirely different codebase. The branch referred to above was abandoned. If you don't see the option in version 8, open a new feature request.