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! :-)

 

 

 

Special Offer

Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!