One thing I noticed while working with the Genesis framework is that the form placeholder (the visible text in the form before you start typing) disappears when you start typing. To me it makes more sense if the placeholder disappears when I click with my mouse in the form field. Although I was working with the Genesis framework for WordPress when this occurred, this tutorial can be used for any (WordPress) website. There’s more ways into doing this, to me it makes more sense to list the most easy, effective and less time consuming solutions. So here it is; two different methods to achieve the same result.
First method: the widely supported JavaScript method
1. Create a javascript (js) file and save it as placeholder-form.js in your WordPress themes js folder. If you don’t see the js folder, create one.
2. Put this code in your placeholder-form.js file and save it:
3. Add this in your child theme’s functions.php:
Second method: The css method, accepted by all new browsers
1. Put this in your child theme’s css file:
The css method can also be used outside of WordPress, so just copy and paste the above css code in the css file of your template. In order to make the JavaScript method to work outside of WordPress, all you have to do is create the placeholder-form.js file and put it in your template’s js folder. Again, if it is not there, create the folder. Then put the below code into the header of your template:
That’s it! That wasn’t so hard, was it? Feel free to comment or shoot me a message if you need help.
References:
http://stackoverflow.com/a/17402192
http://stackoverflow.com/a/14283313
Leave a Reply