I was testing the Contact page for the site I’m working on. The form works great in Safari and Chrome. However, in Firefox, the first two fields don’t show any labels and they cannot be typed into. Does anyone know why this might be happening? Thanks!
http://green-lawn-pros.webflow.com/contact
Chrome:
Firefox:
Hi @ryanjames
This happens because Firefox handles the padding differently, and doesn’t leave any room for text. This only seems to affect form input fields.
If you hover over the padding control in webflow, you can see how the padding overlaps the entire input field. Perhaps try setting height and reduce padding to allow room for the text.
Thank you! I’ll give that a shot.
It worked! Thanks so much! You saved me a lot of troubleshooting.
Input fields (except textarea), look at http://huraapaarky.webflow.com/, are not editable in IE 11 (they are not disabled, you can place the cursor inside, but when you type, no character apears). The same code works well in Chrome (but not in IE 11) . Does anyone know why? Thanks.
@macovam77 I’ve merged your question into this topic, please review above to see the fix.
I’m not sure whether or not this is the same problem, but the forms on my site: http://nbtest.webflow.com/
(https://webflow.com/design/nbtest?preview=863e47123af7d68335bcb4291bc4c307) do not shot labels or field names in IE9 or less.
I’ve tried to give the field a class and check the padding as above, but it didnt seem to make any difference.
Suggestions?
Yeah you’re right @Karl_M your labels go missing on IE. I see the screenshots here: Browser Screenshots For Quick Testing On 3000+ Real Browsers | BrowserStack
And the fields have default styles. Hmm…We’re going to look into it.
IE9 does not support the HTML5 “placeholder” attribute, so we’re looking into alternatives like Placeholders.js - An HTML5 placeholder attribute polyfill to enable them.
I have tried to add value=“#” as well, but that didn’t work…
thanks for looking into it!
