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.
Free eBook: Important WordPress Plugins

Free eBook: Important WordPress Plugins

An exhaustive list of all free, premium WordPress plugins we use across network of our wordpress sites.

Download now!

Please check your email and confirm your email address now!

Pin It on Pinterest

Review Of Web
Free eBook: Important WordPress Plugins
undefined
Review by ReviewOfWeb
Monitored by Sucuri
Share This