Instead of using labels, I want to put 'hints' in the field values that will disappear when a user clicks on them. How do I do that?
*Note: In the latest versions of Breezingforms this is already a native feature in Quickmode! It is called Placeholders.
Create a new text element or textarea element. For the purpose of this example, give it the following properties:
Type: Textfield - OR - Textarea
Label: Message
Name: message
Value: Please write your message here.
(The other fields can be completed however want.)
Go to the element's Advanced tab. In the ACTIONSCRIPT section, add the following:
Type: Custom
Actions: CLICK and BLUR should be checkedIn the textarea that opens, enter the following code:
function ff_message_action(element, action) { switch (action) { case 'click': if (element.value=='Please write your message here.') {element.value=''}; break; case 'blur': if (element.value==''){element.value='Please write your message here.'}; break; default:; } } // ff_message_action
Make sure that the function name ( ff_message_action(element,action ) contains the name of the element as entered in the NAME field of the properties tab. (In our example, we named it message.) If you change the name to something other than message, then you will need to change the function name to match it. For example, if you name the element "Phone," then that first line of the actionscript should read:
ff_Phone_action(element,action
Also, the element value in the code above must be the same as the value you put in the VALUE field on the element's properties tab. In our example, the element.value is entered as:
Please write your message here.
which matches the value that we entered earlier. If you change the value in the element's properties to:
(555) 555-5555
then your script (assuming it is now a 'Phone' element instead of a 'message' element) would change to:
function ff_Phone_action(element, action) { switch (action) { case 'click': if (element.value=='(555) 555-5555'){element.value=''}; break; case 'blur': if (element.value==''){element.value='(555) 555-5555'}; break; default:; } } // ff_Phone_action
Now click on the SAVE PROPERTIES button at the bottom of the screen to save the element you just created. Then click on the SAVE icon in the upper right-hand corner of the screen to save the form itself.
Now test it -- just like magic, you should have some disappearing text! :-)