Form Placeholder - text field not showing on IPHONE

Design help Layout & Design
1

Hello everyone!

I built a product for Webflow and discovered a problem, on iPhone again… About the text fields showing nothing into placeholders.

This is a huge problem - I ran everywhere to find a solution but nothing worked. We need a definitive answer, I saw topics with no response.

Screenshot 2022-07-17 164349
Screenshot 2022-07-17 164349406×704 87.3 KB

It is very strange that even the button does not show text AND the borders are not straight.

View link: https://preview.webflow.com/preview/jokan-studio-1?utm_medium=preview_link&utm_source=designer&utm_content=jokan-studio-1&preview=369f464f3e60b3559ff62256f86ed5d5&pageId=62cd9637b712daafd0d1667b&workflow=preview

Live link - Web Design Agency | Jokan Studio

What do you think about it ? The first time it happened to me.

*The form is linked to Memberstack

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Khalilwebdesign I have tested live page on my iPhone with latest iOS in Safari, Brave, Firefox and Chrome and in all browsers are placeholders displayed as they should.So no issue on my side.

PS: best practice is to post in request live page link so people who would like to help do not have to rip off live page from read-only link. As there is no register link (only login) on homepage your link should include exact page where problems occurs. Something like this:
https://jokan-studio-1.webflow.io/register

When posting please:

  1. Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the <your-site>.webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description of what you’re trying to achieve, and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this: @username
3

It so weird - maybe people dont have the last updates ? I tried on BrowserStack and it shows me the same issue on the screenshot above, and some people have the same issue on their iPhone.

I feel a little better about you are not experiencing issues but what for other people : /

PS: I updated the post with a live link to the right page

4

hi @Khalilwebdesign while BrowserStack can be helpful and most accurate from all emulators it is still just emulator. You can the true behaviour only on real devices.

5

Sure but people send me screenshots of the problem that is how I know about it.

6

in this case try use your favourite search engine if there will be some article or mention that may narrow down where issue can be as this issue isn’t related to Webflow it self.

keywords:
form placeholder issue
form placeholder not display on mobile
form placeholder mobile
form placeholder ios
etc.

Sorry I can’t help further.

7

Here is a good post to understand the problem and how it is better to not only use placeholders but labels too: Don’t Use The Placeholder Attribute — Smashing Magazine

For the submit button I think the problem is the same and it has to be a custom submit button to work everywhere.

I have a new clue - It seems to be the font itself. A license problem. So I changed it to a basic like Inter.