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


#1

See how the placeholder fades slightly…


#2

…also twitter has the same effect


#3

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!


#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.


#5

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


#6

Here is what I have so far:

Then add this css:

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


#7

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


#8

#9

Then make the text grey:


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


#10

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?


#11

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