Recently while creating an opt-in form I had to incorporate this functionality in my squeeze page. Results that Google threw up, were either too complex or too simple which won’t suffice my need.

So, here, I have written a piece of code which will help me in future and hopefully you too!

This code uses two event handlers onfocus and onblur. The first one comes into the picture when focus is set on a particular object while second one comes into the picture when focus is just removed from an object.

<input onfocus="this.value = (this.value=='First Name')?'' : this.value;"
onblur="this.value = (this.value=='')? 'First Name' : this.value;"
type="text" name="MERGE1" value="First Name" size="0">;

Explanation:

• onfocus checks for the value First Name, if it is present, it clears the field.
• onblur check for the blank value. So say you bring your cursor to a particular field and then moves away from it without entering any value. This is where onblur event would insert the default value again.