[rz] Form Placeholders *** UPD 2015-Aug-17 ***

This section contains extensions that were created by [rz] who has sadly passed away.
These extensions are no longer available, but the discussions may still be helpful for some users.
Forum rules
*** IMPORTANT INFO REGARDING [RZ] EXTENSIONS ***

This section contains extensions that were created by [rz] who has sadly passed away.
These extensions are no longer available or supported, but the discussions may still be helpful for some users.
Locked
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Form Placeholders *** UPD 2015-Aug-17 ***

Post by [RZ] »

[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.
Last edited by [RZ] on Mon Aug 17, 2015 12:51 pm, edited 9 times in total.
User avatar
zinc
 
 
Posts: 2146
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Form Placeholders

Post by zinc »

Great little beauty RZ!!!! Nice one!
Running WYSIWYG Web Builder since 2007...
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

Post by [RZ] »

thank you bendigo!
seems little but was a hard task to unify all browsers and make them work as expected :idea:
thank you again for your encouraging words my friend
adex1
 
 
Posts: 167
Joined: Fri Apr 01, 2011 1:13 pm

Re: Form Placeholders

Post by adex1 »

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.
Buy Automation Shopping Cart for CMS WEBSHOP + 2.2 Using WB10!
- Use secure gateway to buy using PAYPAL website.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

Post by [RZ] »

thank you! :)
User avatar
bburgess
 
 
Posts: 129
Joined: Mon May 13, 2013 5:05 am
Location: Australia

Re: Form Placeholders

Post by bburgess »

NICE Thank You!!
KISS is the key!
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Form Placeholders

Post by protectourlands »

This is awesome RZ. Tested in HTML5 and it works great! Thank you for sharing this.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

Post by [RZ] »

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!
CJS
 
 
Posts: 19
Joined: Sat Jan 09, 2010 3:10 am

Re: Form Placeholders

Post by CJS »

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.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

Post by [RZ] »

thank you cjs for you kind words
glad to know that you all found this useful
iMatt
 
 
Posts: 96
Joined: Mon Nov 25, 2013 2:03 pm

Re: Form Placeholders

Post by iMatt »

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?
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

Post by [RZ] »

yes to both of your questions
iMatt
 
 
Posts: 96
Joined: Mon Nov 25, 2013 2:03 pm

Re: Form Placeholders

Post by iMatt »

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! :?: :cry:
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

Post by [RZ] »

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...
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Jan-17-2014 ***

Post by [RZ] »

* 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
-------------------------------------------------------------
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Re: Form Placeholders *** UPDATED Jan-17-2014 ***

Post by Patr100 »

When I try the demo link I get a blank page (in Chrome)
and the download link for the extension is set to private?
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Jan-17-2014 ***

Post by [RZ] »

yes
link removed
extensions were set to private
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by [RZ] »

* 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).
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by Patrik iden »

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

Thank you.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by [RZ] »

yes!
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by Patrik iden »

[RZ] wrote:yes!
That sound great.

Thank you.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by supersonictt »

[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
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by [RZ] »

resounding yes :)
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by supersonictt »

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

Thanks [rz] :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by [RZ] »

the platinum is a gift by itself, so you can select the second listed there... ;)
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by supersonictt »

Purchase done :)
Thanks a lot [rz], you deserve a lot more for this great work :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Apr-13-2014 ***

Post by [RZ] »

thank you for support the hard work behind the scenes!
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD Jul-06-2014 ***

Post by [RZ] »

* 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.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

UPGRADE AVAILABLE

* New in version 1.3.0.0:

- Added support for RWD.
- Fixed bug in bottom alignment.
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

Change background image on hover?
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

not yet
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

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?
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

and how it is related to the form placeholders extension?
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

Oooops! Sorry. I used both on the same page and I have not even thought that alert is not part of form :D
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

Button remains in the hover style after I click on it.
Where I'm wrong?
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

button with placeholder, how they are related?
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

I'm talking about send/reset buttons and hover mode style is defined with Form Placeholder.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

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
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

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"
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

i dont see any issue
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

Please click on the reset button and you'll see, button will remain in hover style.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

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
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by naftalina »

[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 :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2014-Oct-14 ***

Post by [RZ] »

:)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2015-Apr-08 ***

Post by [RZ] »

* New in version 1.3.0.1:

- Added smooth colors transitions effect.
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Form Placeholders *** UPD 2015-Apr-08 ***

Post by naftalina »

Is demo updated to see how effect looks like? :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2015-Apr-08 ***

Post by [RZ] »

nope, the demo is not updated to show this feature yet...
you can get in contact for more details
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2015-Jun-25 ***

Post by [RZ] »

* New in version 1.3.0.2:

- Improved support for iOS-based devices.
- Improved auto-update process.
- Improved "pixel-perfect" process.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Form Placeholders *** UPD 2015-Aug-17 ***

Post by [RZ] »

* 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).
Locked