Creating data entry fields on forms

Good Morning Bubblers,

I have a form with multiple fields into which text is entered.

Populated into each of the boxes on the Form is text that helps the user understand the information they need to enter. For example:

Name
Telephone
email, etc,

I believe this helpful information should disappear immediately once the user clicks/taps within the box to enter their information.

Isn’t this the correct way of doing things?

Thanks!

I assume you’re asking how to achieve that?..

In which case you can simply add a conditional on the input, so that when it’s focussed the placeholder is removed.

Actually, I’m really asking as my post asks "Isn’t this the correct way of doing things?"

But having your instructions is a big help too!

thanks!

Well then yes, it seems like a perfectly reasonable way to do things - although, having just looked at 10 random websites with various signup and data forms, it doesn’t seem to be that common, and it’s not the default Bubble input behaviour, hence the need for an additional conditional to achieve it.

Currently, in my form the ‘help text’ in each box doesn’t disappear until you

  1. click in the box AND
  2. start to type

I don’t like this cause there is too much going on. Blinking cursor and text. A blank slate means your ready to go. Give me what you got.

I looked some websites like USPS and UPS and how their tracking fields work. Text disappears when text is entered.

I think the trouble I face is that on a mobile device and desktop the blinking cursor is so light in color you wonder “What next?” whereas the logic with an empty box is that you automatically know if you read the text.

Yes, that’s the standard Bubble behaviour, and much more common on most web forms. I guess there must be reasons why that’s the most common way it’s done (no doubt large companies and designers have thoroughly tested it and decided it works best).

But if you don’t like it, just add the extra conditional I mentioned above to change it.

Another, less common but still fairly popular, thing to see is when the input is clicked the placeholder text moves outside of the input (or sometimes just gets smaller, or feinter), so the User still knows what they’re meant to be typing (especially if they get distracted whilst filling out the form), but the input stays empty until they type.

You can do that with a couple of simple conditionals as well.

I think uniformity plays a role here too. Each data entry box should be same amongst all. Not one box where text disappears upon being clicked or the other when text begins to be entered.

If you have multiple fields requiring data entry then after a few have been filled by the user it should be easy to understand what’s going on.

But I think your right

(no doubt large companies and designers have thoroughly tested it and decided it works best).

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.