SOLVED

Display form label when text is within field

Go to solution
Highlighted
Level 10 - Community Moderator

Re: Display form label when text is within field

Y'left out one important case with Marketo forms.

Also, you need only listen for the input event to cover both key events and clipboard events. See

     MktoForms2 :: Floating Labels (tmarcacci)

which is tested back to IE 10.

Also, note to Tim: the placeholders aren't great in IE 10-11 because they're the same white color as user-entered text:

pastedImage_0.png

View solution in original post

Highlighted
Level 2

Re: Display form label when text is within field

Thanks so much Sanford Whiteman​ and Jay Jiang​. I'll definitely fix the white placeholders in IE, but this functionality is perfect!  I'll also look into the the DoS vulnerability article as well.

Cheers.

Highlighted
Level 2

Re: Display form label when text is within field

Hi Sanford Whiteman Is there a way to isolate this floating label code to a specific form? This form will be living in the footer, so I don't want it to affect any other forms that may be on a page.

Highlighted
Level 10 - Community Moderator

Re: Display form label when text is within field

Is there a way to isolate this floating label code to a specific form?

Sure, just compare to the form ID.

MktoForms2.whenReady(function(form){

  var formEl = form.getFormElem()[0],

      formId = form.getId(),

      enhanceableFormIds = [2200],

      placeholderableTypes = ["text", "search", "tel", "url", "email", "password", "number"];

  if (enhanceableFormIds.indexOf(formId) == -1) return;

  /* ... continue with the rest of your custom behaviors... */

Highlighted
Level 1

Re: Display form label when text is within field

Hey this is a great solution. Thanks for posting this up. Is there a way to include textareas for larger comment areas. Your code seems to include everything but textareas? Thanks in advance.

Highlighted
Level 10 - Community Moderator

Re: Display form label when text is within field

Hey this is a great solution. Thanks for posting this up. Is there a way to include textareas for larger comment areas. Your code seems to include everything but textareas? Thanks in advance.

Grab the updated JS pane from v1.0.1: MktoForms2 :: Floating Labels (tmarcacci) v1.0.1