Question: Do you know how I can have the placeholder text disappear as soon as someone taps the field to input? Thank you!
Current state: For the sign up form, I have placeholder text. When I tap to type an input, the placeholder text stays. This doesn’t look natural.
But it’s an accessibility recommendation.
Anyway, add this code in the page in an embed component to make it disappear:
<style>
input:focus::placeholder {color: transparent}
</style>
Thank you Vincent, worked perfect.
For my learning – when you say it’s an accessibility recommendation, can you lmk what you mean? From other sites I see, i’ve never seen the placeholder text stay
Accessibility (sometimes called a11y) is a set of rules we need to respect to make our sites accessible to people with disabilities. it ranges from slight impaired vision to more severe handicaps. For example, defining an alt-text for important images is needed for users who are accessing websites with a screen reader, a device or program that is reading the site to them. Also you can check if the color contrast of your designs is accessible, right in Webflow:
This one is ok (AA)
This one is not (Fail)
All the nice sites you’ve seen not respecting this rule and many others do it because they don’t give a damn about accessibility.
In Webflow Audits will help you to fix a few important things
You can break some rules there and there but you can almost always make sure something is put in place to cope with the rule breaking. At the very least, you can be educated about it, it is very important. As I said a lot of people are impacted. You may meet me and find me in full possession of my senses, the truth is I have a pretty strong eye deficiency, and I’m tired very early in the day. On many sites and apps, I tend to increase the text size. If your site is designed not to allow that, then it’s a problem for me already.
Webflow and accessibility: Web accessibility: guide, courses, and features | Webflow
Test your websites and apps on your elders. They need bigger text, better contrast, more obvious touch areas, less crowded screens, very obvious animations and interactions. They’re you in the near future 
In the form design you sowed us, you are already breaking a big rule: you’ve removed the label of the fields, and you’re using the placeholder as a label. If someone browses your form with a keyboard, he is not at all able to say what the field that’s in focus is doing. That’s a big no no. You could create an interaction that is moving the label into the field then make it move above it when the field is in focus. You need that label visible at all time, and that’s not only for people with disabilities, that’s for everyone.
