Whether it’s for the sake of visual appeal, or it’s just to save a little extra space, web designers will opt to place the label of a form field inside the text field.

PROBLEM:

If you don’t include a small script to remove these values from the text field first visitors will have to manually delete the text before entering in their name and address email – a minor annoyance that can have a major impact on properly collecting a lead’s information and/or subscribers for your website.

If this is the case on your website, you will often find that many visitors will not bother to erase it and instead type their name after the text, leaving you with a subscriber list full of entries such as NameBob and emails that return errors when they are sent out to Emailbobmarshall@domain.com.

SOLUTION:

To remedy this on your web forms, try the steps below:

1. Inside the first <form> tag add the following javascript:

2. Place this line inside the input tag:

onclick=”Input_clear(this,’enter matching value here’);”

See example below:


 
First Name:

onclick="Input_clear(this,'First name');"
Last Name:


Email:

Make text disappear in form fields onclick using javascript

PROBLEM:

SOLUTION:

Around the web