KINETIC PRESENTATION SYSTEMS

Often in Joomla, real estate on the screen can end up at a premium.

Putting forms in modules is not uncommon, but to further reduce space, putting the label for the field into the field itself can save valuable pixels.

Firstly, set the default value for the field to what you want the label to be. In this example, "Your Email Address" is the field.

Next, add the following to the Attribute tab > Additional Attributes field.

onfocus="if(this.value=='Your Email Address') this.value='';" onblur="if(this.value=='') this.value='Your Email Address';"

What this javascript code does is:

• check the value of the field when the user tabs, clicks or otherwise focuses on the field. If the value matches the statement, then it changes the value to blank out the field.
• next it checks if the value is blank when the user blurs or leaves the field. If it is blank, it replaces the label into the field.

Tips

• Don't forget to customise the message for each field, otherwise the label will be the same all the time.
• Note that for email validation, the text above will not validate, so the user will still need to put in a valid email address.

Related: How you can improve your email validation...