Input field placeholder text disappearing on page load

I’m having an issue with Bubble built forms when viewed in Internet Explorer (version 11 running on Windows 7 and on Windows 8).

The placeholder text of the first field of the form disappears when the page loads.

Doesn’t seem to happen in Chrome, Firefox or Safari…just Internet Explorer.

On all the browsers I’ve tested against, the cursor is automatically placed in the first field of the form upon page load. For some reason, in Internet Explorer, this causes the field’s placeholder text to disappear leaving the user with no guidance as to what to enter into that field (unless they think to click out of the field, at which point the placeholder text reappears).

The form field placeholder text also disappears whenever I click into any field on the form…again, only in Internet Explorer. All other browsers seem to correctly retain the placeholder text until I start typing something into the field.

This seems to be an Internet Explorer quirk as Twitter signup has the same problem.

But it’s probably a fixable problem as Bank of America (viewed in Internet Explorer) does not have the issue.

Is there some way that I can prevent this problem from happening in Internet Explorer…maybe a Bubble setting or hack that I’m not aware of?

If there is no quick way to prevent the form field placeholder text from disappearing when in focus on IE, then maybe there is a way to prevent the first field from coming into focus on page load. BrowserStack seems to do this with it’s signup form.

Any suggestions on how I could address this would be most appreciated.

Well a hack would be to show a text below the input that is shown when the input’s value is empty. That way you can create your own placeholder.

But if it’s only IE11, not sure it’s worth it, if even twitter didn’t fix it.

It’s also IE 10 under Windows 7 and Windows 8.

On IE 9 under Windows 7 the placeholders don’t show up for any of the fields upon page load.

I’d thought about adding text labels under the fields, but don’t like the way it looks.

Does Bubble have a way of targeting by browser? So, for example, I could show a group containing a version of the form with the text labels only when IE is viewing the page?

No not really.

So I think I’ve figured a way around it.

My sign up form was on a popup. If I just put the form on a regular page then the browsers (including IE) don’t seem to put the first field in focus on page load. So the placeholder will remain visible until the user clicks in the field…which is fine by me.

Update: I was also able to get it to work on a popup by putting an invisible field above the first field of the form. My assumption as to why this works is that the browser puts the invisible field into focus because it’s highest up on the popup while leaving the visible first field’s placeholder text in tact.

In the Bubble editor…

In Internet Explorer…

1 Like