Disclaimer: This tutorial was created years ago during Drupal 6-7 days with old IEs in mind when most of the projects wanted to support IE8 below. For modern browsers, no hustles needed, you can simply add placeholder attributes into the target input accordingly. Nowadays, 8 years later since this was created, Drupal 8 rules and has stopped supporting IE8 below.

There can be another way to make compact form with jQuery, the built-in jQuery functions. If you have a simple need, such as compacting a login block, and don't want to install another plugin or module, what I have done below may hopefully suffice.

The best, useful or reasonable placement may be in a narrow horizontal space somewhere in your crowded design, but a vertical one should do for the demo now.

We are going to elaborate how to make a horizontal login bar later more with CSS.

Remember you do this when you may have a specific need for your theme. If all you need is a login block, this is not for you.

I assume you have a working Drupal site. If using other CMS, you have to find out how to call the script properly according to their system.

First, you need to create your own file for all your custom scripts. Name it scripts.js, or such, and place it anywhere inside your theme directory. Call it from your theme.info, by placing this:

scripts[] = scripts.js

Adjust the path accordingly if you place it in a sub-directory, e.g: js/scripts.js.

I don't suggest keeping all your scripts directly in the head or footer of your page.tpl.php since this will clutter the codes there. Instead, put them in a separate file for easy maintenance, extensibility and re-usability.

Now fill it with this code:

  // We want to hide the label. Adjust for what you need: #user-login is for the login page and #user-login-form for login block. This way it doesn't hit other forms unintentionally.
  // This was for Drupal 6 below, where core D6 had no special CSS classes to hide labels.

// Or better with modern Drupal, simply add a class visually-hidden (D8), or element-invisible (D7), accordingly to preserve accessibility. Alternatively, this can also be done using hook_form_alter().

  // We need to define a variable here, Login ID, etc.
    var username_name = 'Username';
  // Don't forget to limit your form ID accordingly, such as #user-login-form #edit-name, and the rest applies
  if ($('#edit-name').attr('value') == '') {
    $('#edit-name').attr('value', username_name);
  $('#edit-name').focus(function() {
    if ($(this).attr('value') == username_name) {
      $(this).attr('value', '');
  $('#edit-name').blur(function() {
    if ($(this).attr('value') == '') {
      $(this).attr('value', username_name);

  var username_pass = '******';
  if ($('#edit-pass').attr('value') == '') {
    $('#edit-pass').attr('value', username_pass);
  $('#edit-pass').focus(function() {
    if ($(this).attr('value') == username_pass) {
      $(this).attr('value', '');
  $('#edit-pass').blur(function() {
    if ($(this).attr('value') == '') {
      $(this).attr('value', username_pass);

Both codes say: If an input value is empty, fill it with a defined variable. The focus event fires when the element receives focus either via the pointing device (cursor) or by tab navigation, so empty the value please. We fill in the form and the data is kept and stored after hitting a button. The validation takes part beyond the script, our CMS does. We move or lose the focus by not filling the form, the blur event fires and fill back the value with the defined variable. Correct me if I express it incorrectly in English.

Don't forget to enclose it inside the function. You can choose either

$(document).ready(function(){ //your codes });


$( function() { //your codes });

See my previous post on how to deal with drupal. If you are new to jquery, you may start here, there and everywhere.

If you prefer the CSS way, you may also hide the label with element-invisible or visually-hidden class to respect accessibility. Or see below for the actual hard-coded CSS rules:

#user-login .form-item label,
#user-login-form .form-item label {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;

Clear up your theme registry. You may be happy now, the forms are compact.

You may also find more fun and better explanation with how jquery works from visual jquery site. I believe there can always be a better way, the drupal way, that I might possibly miss. I am open to corrections. Thanks.

Drupal compact form