Mejorar la usabilidad de un webform agregando etiquetas que se ocultan automaticamente

El comportamiento que buscamos es el siguiente:

Label:

Cabe aclarar que este comportamiento no es exclusivo de los webforms y puede implementarse en cualquier formulario de nuestro sitio web

Para lograrlo necesitamos modificar el archivo script.js de nuestro theme y agregar la siguiente función

function textoPorDefecto(elemento, valor) {
  $(elemento).val(valor);
  $(elemento).css('color','#999');
  $(elemento).focus(function() {
    if ($(this).val() == valor) {
      $(this).val("");
    }
    $(this).css("color", "#000");
  });
  
  $(elemento).blur(function() {
    if ($(this).val() == "") {
      $(this).val(valor);
      $(this).css("color", "#999");
    }
  });
}

esta función permite agregar el texto que va a aparecer por defecto en la caja de texto identificada mediante la variable elemento y agrega un efecto de transición de color entre gris y negro.

Para llamar la función simplemente usamos:

Drupal.behaviors.webform = function(context) {
  textoPorDefecto ('#textbox-ejemplo-webform', 'Texto por defecto');
}