Unbounce Answers/Next Steps/Tips & Tricks
How to make "hint" (default) text for form input fields
Carter Gilchrist
posted this on January 24, 2011 12:20 pm
A number of people over on our Get Satisfaction community have asked how to make some default text appear in form fields and disappear when the field is selected. We would love to get this feature built into Unbounce soon, but until that happens, here's a work around using a little bit of JavaScript:
Click the "Javascripts" button, select 'Head' in the Placement dropdown menu, and paste in the following:
And if you want to change the color of the hint text, cut and paste the following to the "Stylesheets" section:
In the snippet above you'll see a list of fields at the top ("name", "email", and "comments") with their associated hint text. You'll need to change these to match the fields in your page that you want to give hints to - you can see these field names in the form builder as shown in the following screenshot:
Comments
Why we can't access the default "value" attribute of a textbox element? This way its easier and we can set the "onfocus" and "onblur "properties
Doesn't work for me. I can still see the blank form, no hint in my e-mail box. I am using the default paste from above without changing any of the script. Should I be doing something different?
Pretty sure this doesn't work for the "multi line text field" option. Any suggestions for a tweak to make it work with these fields?
Needs to be added to the header section, which is chosen when you click scripts. Theres a drop down at the top select "header" paste code and match up the labels and it should work...
Hey guys, sorry for such a delay on improving this. The original article/script has been updated to accomodate textareas (or multi-line text fields as they are called in the Unbounce form editor).
i would love for unbounce to incorporate an easier way to do this!
It's a very simple feature but it's still missing. Very annoying!
any way to make the hint text in italics?
Awesome - worked like a charm ...
@Colin - you should be able to do that with some CSS. Carter gives an example (above) for how you can change the font color and using that same code, you can add another line to make the text italic. Try this out:
hey, when i put this script, some of my requiredfield disappear..i meant, they became not required but they still marked as required.
is it clear? i hope so..