Use JavaScript to Clear Field InputsIt’s helpful for users to see sample values in their forms, but it’s very annoying for them to have to clear those values themselves. Thankfully, with JavaScript clearing these values as well as bringing them back if the user chooses to move on from the field is very easy.

The Code Snippet

Place the code below within your form input tags and replace my default values with the verbage of your choice.

Live Demo:

Click on the form input below to clear it’s field value. Once focused on the input click outside of it without entering a new value and you will see the default reappear.


Snippet Summary

This jS snippet is particularly useful form search forms and smaller forms with only one input. If you have a lot of forms elements with default values I’d suggest writing a quick function to minimize the amount of inline jS. Keep checking back, the follow-up to this article will be that exact function!

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow
Devin

Is your WordPress Running Slow?

Milliseconds are money. Website speed is extremely important. We highly recommend WP Engine. Why? Because they make a sluggish WP site fast, support is great and they have excellent uptime.

WP Engine Logo