How can we get textfields like this? https://ibgroup.co.nz/

  • 7 August 2013
  • 9 replies
  • 602 views
Sam2

See how the placeholder fades slightly…

9 replies

Sam2

…also twitter has the same effect

Sarah_McCredie

Hi Sam,

We have an article over here in our knowledge base that will step you through how to set that up with a bit of JavaScript: http://support.unbounce.com/entries/4…

Beyond the script for the fading effect, that would have to be customized.

Let me know if you have any other questions!

Finge
Userlevel 6
Badge +4

Sarah, I think there is a difference to what Sam is looking for. The javascript will let you use hint text inside the labels, but as soon as you click inside the field the text disappears.

In terms of usability this could be a disadvantage (have not tested with A/B test yet) since the visitor might actually forget what the field was for.

Sam: I would love to see this effect as well. I currently use the ones Sarah provided, but as I said they disappear once you click into the field.

Finge
J

I would second the request. It enables keeping the form small, avoiding labels.

Sam2

Here is what I have so far:

Then add this css:

.lp-pom-form-field .hint {
color:#999999 !important; /* Grey */
}

Sam2

.lp-pom-form-field .hint {
color:#999999 !important; /* Grey */
}

Sam2

Then make the text grey:


.lp-pom-form-field .hint {
color:#999999 !important; /* Grey */
}

Sam2

The javascript above holds the hint inside during focus and only makes the hint disappear on ‘keydown’.

The only annoying thing is, when selecting each textbox with the mouse for data entry the cursor starts wherever you click & does not default to the far left.

Maybe someone can point the last issue in the right direction?

Sam2

Use this encoder if you have further code to add:
http://forsite.synthasite.com/encoder-gs.php

Reply


Terms & ConditionsCookie settings