Page 1 of 1

Placeholder Text

Posted: 27 Oct 2015
by schuess
How would you suggest we incorporate placeholder text in our form fields? Should we find and use a jQuery Plugin, do you have plans to add the HTML placeholder attribute to the form designer editor?


thanks

matt

Re: Placeholder Text

Posted: 28 Oct 2015
by rostislav
The method below will not work for versions of IE below 10.

If you're looking to set an input field's placeholder, try:

Code: Select all

fd.field('InternalName').control()._el().find('input').attr('placeholder', 'my placeholder');
If it's going to be a textarea, then do:

Code: Select all

fd.field('InternalName').control()._el().find('textarea').attr('placeholder', 'my placeholder');
(Add the code to the JavaScript editor for your form, replacing InternalName with the appropriate internal name).

If you need this thing to work in IE versions 9 and lower, your best bet is to use the jQuery placeholder plugin: https://github.com/mathiasbynens/jquery-placeholder. You'll have to dynamically add a <script> element with src set to the js file and then follow the documentation to set the placeholder. If you need further assistence, let us know.

Re: Placeholder Text

Posted: 28 Oct 2015
by schuess
Great Response, Thank you.


PS> This seems like a easy feature addition for the next update to the product.

Re: Placeholder Text

Posted: 10 Oct 2016
by schuess
I can't figure out how to style the placeholder text. I was hoping to just lighten up the color so that it is more easily visable as only placeholder text.

Thanks

Re: Placeholder Text

Posted: 11 Oct 2016
by YuriyMedvedev
Hi! First, add a CSS class, say 'input-ph' to a field.



Then insert the following code into CSS-editor (replace colors and the class name with the appropriate values):

Code: Select all

 .input-ph input::-webkit-input-placeholder {color:#c0392b;}

 .input-ph input::-moz-placeholder          {color:#c0392b;}/ Firefox 19+ /

 .input-ph input:-moz-placeholder           {color:#c0392b;}/ Firefox 18- /

 .input-ph input:-ms-input-placeholder      {color:#c0392b;}