For all textareas, I want to print the help text description above the field input.

By default, it looks like this:

  • Field Label
  • Field Input
  • Help Description

I want to arrange it like this:

  • Field Label
  • Help Description
  • Field Input

This was actually a hidden configuration option added to Drupal 8.0 So, the basic idea is that I have to set '#description_display' => 'before' for every textarea.

To do that, I tried to use template_preprocess_textarea().

I added the following code to mytheme/mytheme.theme:

function MYTHEME_preprocess_textarea(&$variables) {
  $variables['#description_display'] = 'before';

I checked to make sure this code is called with kint() but it doesn't change the positioning of the help descriptions on the forms. I checked my theme (Bootstrap's) templates and they have logic for handling before and after. So what is the right way to call this to adjust the position of the help text on all textareas?

  • 1
    Can't test it right now, but have you tried using HOOK_preprocess_form_element instead of preprocess_textarea? – Hudri Nov 20 '17 at 17:01

The description_display property is still working if supported by your active theme and I understand it is. Adding this to your mytheme.theme should do the trick :

function MYTHEME_preprocess_form_element(&$variables) {
  if ($variables['element']['#type'] == 'textarea') {
    $variables['description_display'] = 'before';

Note that this might not work with formatted fields from the field API as the description field is in a parent template, see text-format-wrapper.html.twig. It would be a little more complicated to have this working for those fields.

  • If anyone else needs this simple approach, we created a module shell using the hook_preproccess_form_element approach. I set it up as a module instead of a theme hook, as we tend to use admin themes. Feel free to save yourself some time and use/modify/etc: bitbucket.org/idfivellc/idfive_move_description/src – Daniel Rogers Dec 21 '18 at 17:04
  • Hi. Will this work on ECK fields ? – Aman Devrath Mar 13 '20 at 12:18

Adding this hook (HOOK_form_element) to your theme template.theme will show the description in-between the label and input,

function bootstrap_form_element($variables) {
  $element = $variables['element'];
  $value = $variables['element']['#children'];

  $wrapper_classes = array(
  $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'] . '">' . $title . "</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 wrote add to HOOK_preprocess_form_element, but your code is adding it to HOOK_form_element. Which is correct? If it's HOOK_preprocess_form_element, your answer is the same as yancg's. – Patrick Kenny Nov 21 '17 at 3:10
  • Sorry typo. updated the answer. – Kstack Nov 21 '17 at 4:05

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.