www.wysiwygwebbuilder.com

[rz] Form Placeholder - v1.3.0.3

The most lightweight solution to have placeholders in your forms!

In forms, the placeholder property for data entry fields is not so easy to customize and not all browsers behave the same in order to properly show them. This extension unifies the criteria for all browsers and it is highly customizable to fit your design needs.

Supports multi-instances; this means that you can have grouped/individual fields with their own colors/settings.

It is cross-browser compatible and even supports old ones.


DEMO

HTML 4.01 Transitional
W3C compliant


* New in version 1.3.0.3:

- Workaround for iOS event bug in select object.
- Workaround for Chrome event bug in select object.
- Improved RTL alignment in select object (please read the "known issues" section).

* New in version 1.3.0.2:

- Improved support for iOS-based devices.
- Improved auto-update process.
- Improved "pixel-perfect" process.

* New in version 1.3.0.1:

- Added smooth colors transitions effect.

* New in version 1.3.0.0:

- Added support for RWD.
- Fixed bug in bottom alignment.

* New in version 1.2.0.3:

- Optimized core.
- RTL support (please read the "known issues" section).

* New in version 1.2.0.2:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.

* New in version 1.2.0.0:

- Fixed a "double-click" issue in Android-based tablets to activate the keyboard.
- Fixed a "double-right-click" issue to activate the context-menu in Safari.
- Improved mouse-emulation colors behavior in touch screens.
- Pixel-perfect option that fixes a size issue in some browsers.
- Entrybox and textarea objects will have the same size as in the workspace (true wysiwyg), even in older browsers and quirks mode.
- Placeholders can have their own alignments within the entry area.
- Workaround for the textarea background image bug in IE8 and earlier (the image moves with the text instead of remain in its original location).

* New in version 1.1.0.0:

- Improved behavior on page refresh.
- Improved security on history-back (optional).
- Borders, background and foreground colors for onhover/onfocus statuses.
- Can detect background/programatically value changes (for advanced users!).
- Placeholder texts can be resized (reduced) proportionally.
- The extension can be placed wherever you want, even outside the form (and even if it exists or not).

* New in version 1.0.1.0:

-Added on-focus behavior: dotted box, border color and background color.
-Added clear/reset form support.
-Improved code for better performance.


How to use?

1. Design your form as you usually do.
2. Setup the form validation rules (if applies, it is up to you).
3. Drag and drop the extension into the workspace.
4. Open its properties dialog and setup the fields that will have a placeholder (the empty-field message).
5. Setup the color and the font type of the placeholder (or leave them as by default).
6. Setup the field borders, background and content colors for when it gets the focus (or leave them as by default).
7. You can do the same as in #6 for when the mouse is over the entry field.
8. Preview or publish (remember: to send messages -depending on your settings- you may need php!).

Enjoy!


Known issues:

RTL issues in combobox (not related to the extension):

- IE: must specify the horizontal position (any other than 'auto') or specify the text-align property in the object to let the extension align the placeholder correctly.
- Safari: the options list is always left aligned.
- Opera: the down arrow fills the control and overlaps the placeholder.

Other alignment issues in combobox (not related to the extension):

- The down arrow will overlap the placeholder if the object alignment is left and the placeholder is aligned to the right and vice-versa; the solution is adding an horizontal offset; if this will interfere with other entry objects alignments in the extension, a new instance can be created for only the affected comboboxes.
- IE 8 and earlier, as well as in some older FireFox versions, there is a vertical/horizontal misplacement whith padding.

Great little beauty RZ!!!! Nice one!

thank you bendigo!
seems little but was a hard task to unify all browsers and make them work as expected
thank you again for your encouraging words my friend

Thank you Rabbi even though I have not download it and test but whever I see your work I really appreaciate it. Thanks once more.

thank you!

NICE Thank You!!

This is awesome RZ. Tested in HTML5 and it works great! Thank you for sharing this.

bburgess wrote:NICE Thank You!!

protectourlands wrote:This is awesome RZ. Tested in HTML5 and it works great! Thank you for sharing this.

thank you for the feedback!

WOW! what a great new tool.
Love the look that will add a very professional appearance to developed web site.
Thanks a bunch for you work and for sharing.
Much appreciated.

thank you cjs for you kind words
glad to know that you all found this useful

Trying this extension out. Going wrong somewhere though. When the instructions say:

"Design your form as you usually do"

Dose this mean creating the form using the standard form tool in WB9?

Also:

"Drag and drop the extension (must be on top of the form's elements!)"

Again, is this a standard WB9 form?

yes to both of your questions

Still having problems with this. I know it's probably me doing something wrong! When I drag the extension (from WB9 extensions) onto the form and then double click onto the area created by Form Placeholder, am I supposed to see the same entry fields as the WB9 form I created? If so, then I am doing something wrong!

without seeing what you did, there is nothing i can do -- saying doesn't work doesn't help to help
once you have your form, you put the extension within the form
and then, you open the properties dialog and type in the entry-field name and its placeholder-message for each form entry field
please read the properties descriptions...

* New in version 1.1.0.0:

- Improved behavior on page refresh.
- Improved security on history-back (optional).
- Borders, background and foreground colors for onhover/onfocus statuses.
- Can detect background/programatically value changes (for advanced users!).
- Placeholder texts can be resized (reduced) proportionally.
- The extension can be placed wherever you want, even outside the form (and even if it exists or not).

* New in version 1.0.1.0:

-Added on-focus behavior: dotted box, border color and background color.
-Added clear/reset form support.
-Improved code for better performance.

-------------------------------------------------------------
reposted because of a link error -- must redownload the update
-------------------------------------------------------------

When I try the demo link I get a blank page (in Chrome)
and the download link for the extension is set to private?

yes
link removed
extensions were set to private

* New in version 1.2.0.2:

- Optimized core.

* New in version 1.2.0.1:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.

* New in version 1.2.0.0:

- Fixed a "double-click" issue in Android-based tablets to activate the keyboard.
- Fixed a "double-right-click" issue to activate the context-menu in Safari.
- Improved mouse-emulation colors behavior in touch screens.
- Pixel-perfect option that fixes a size issue in some browsers.
- Entrybox and textarea objects will have the same size as in the workspace (true wysiwyg), even in older browsers and quirks mode.
- Placeholders can have their own alignments within the entry area.
- Workaround for the textarea background image bug in IE8 and earlier (the image moves with the text instead of remain in its original location).

Hello, do this Extension (Form Placeholders) also work for styling a Combo box?

Thank you.

yes!

[RZ] wrote:yes!

That sound great.

Thank you.

[rz]
Thanks for the update
Someone asked about comboboxes, in the latest version, is it possible to add placeholder to comboboxes? Like I have combobox with: Male and Female options, can I add "Gender" as a placeholder?

Thank you

resounding yes

Everyday, you are convincing me more and more to buy the Platinum Pack but I want two gifts instead of one

Thanks [rz]

the platinum is a gift by itself, so you can select the second listed there...

Purchase done
Thanks a lot [rz], you deserve a lot more for this great work

thank you for support the hard work behind the scenes!

* New in version 1.2.0.3:

- Optimized core.
- RTL support.

RTL issues in combobox (not related to the extension):

- IE: must specify the horizontal position (any other than 'auto') or specify the text-align property in the object to let the extension align the placeholder correctly.
- Safari: the options list is always left aligned.
- Opera: the down arrow fills the control and overlaps the placeholder.

Other alignment issues in combobox (not related to the extension):

- The down arrow will overlap the placeholder if the object alignment is left and the placeholder is aligned to the right and vice-versa; the solution is adding an horizontal offset; if this will interfere with other entry objects alignments in the extension, a new instance can be created for only the affected comboboxes.
- IE 8 and earlier, as well as FireFox, have a vertical/horizontal misplacement whith padding.

* New in version 1.2.0.2:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.

UPGRADE AVAILABLE

* New in version 1.3.0.0:

- Added support for RWD.
- Fixed bug in bottom alignment.

Change background image on hover?

not yet

I'm trying to use extension for the alert button, but when I add a button to the collection instead of the cuboid show a horizontal line?

and how it is related to the form placeholders extension?

Oooops! Sorry. I used both on the same page and I have not even thought that alert is not part of form

Button remains in the hover style after I click on it.
Where I'm wrong?

button with placeholder, how they are related?

I'm talking about send/reset buttons and hover mode style is defined with Form Placeholder.

are you referring to [rz] Button Pack?
it is unclear for me what you are referring to
pls give me a link and a description about your issue

I'm not sure where the problem is.
Yesterday I saw that this is happening to standard send/reset buttons where hover is defined with "Form Placeholder".
Now I see that the same thing happens when "Button Pack" is used as a send/reset button.

On my site (link is in the signature) I used "Button Pack".
Here I used "Form Placeholder"

i dont see any issue

Please click on the reset button and you'll see, button will remain in hover style.

this is not an issue at all in the extension
according to the experts advice and the navigability standards, clickable/focusable objects, after a click should get the focus
if you click anywhere else, or start editing something in your contact form, the reset button will lose the focus
if you still want to change this standard behavior, go to the extension properties and in behavior category, set the get focus on click property to false

[RZ] wrote: if you still want to change this standard behavior, go to the extension properties and in behavior category, set the get focus on click property to false

Of course that I want to change. That's why I use your plug-ins, because they have all these options Thank you

* New in version 1.3.0.1:

- Added smooth colors transitions effect.

Is demo updated to see how effect looks like?

nope, the demo is not updated to show this feature yet...
you can get in contact for more details

* New in version 1.3.0.2:

- Improved support for iOS-based devices.
- Improved auto-update process.
- Improved "pixel-perfect" process.

* New in version 1.3.0.3:

- Workaround for iOS event bug in select object.
- Workaround for Chrome event bug in select object.
- Improved RTL alignment in select object (please read the "known issues" section).