The form fields on my booking form have suddenly become disabled even though I haven't made any changes in the backend. They're only disabled on desktop, they work fine on mobile. By disabled I mean they are greyed out, with a different cursor and the input fields are labeled as disabled in the code.
Also, the placeholder text on iphone is unevenly spaced vertically - it needs to be moved downwards. The issue only occurs on the phone, it looks fine on desktop. It's only the placeholder text that is unevenly spaced - when you enter text in text in the fields the spacing looks fine. I have attached a screenshot. How would I go about adjusting this?
The fields are greyed out / disabled when you are logged in to WordPress. Could you please tell me was this the case? You need to try the booking process while not logged in to WP or from an incognito mode in order to fill in customers' information in the booking form.
We tried this on our testing site and the placeholders are centered on iPhone as well. This is probably some styling of your theme (or it can be some other plugin that you have that can have CSS styling for input fields) that applies to these placeholders as well.
If you have any further questions or concerns feel free to ask,
Thanks for your reply, now I understand about why the fields are greyed out.
Regarding the misaligned placeholder fields: I have discovered it's actually a Safari issue! To rule out any overrides from my theme or other plugins, I checked an official demo of the Amelia plugin on my iphone and the placeholder fields are misaligned there as well (see attachment). If you guys checked iPhone resolution on a Chrome emulator you wouldn't have seen the issue because it's Safari-specific.
So when it comes to fixing this, I worked out how! Am putting it here for anyone viewing this ticket in future :)
Add this css:
@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0){ .amelia-app-booking input::placeholder { line-height: 20px; } }
I see, I am not sure if I tested on Safari or Chrome, but in any case I am glad to see you managed to find a solution to this issueI will forward this to the development team as well so they can maybe implement this fix or similar in the plugin.
Again, thanks for sharing this with other users!
If you have any other questions or concerns feel free to open a new ticket and we will gladly help.
The form fields on my booking form have suddenly become disabled even though I haven't made any changes in the backend. They're only disabled on desktop, they work fine on mobile. By disabled I mean they are greyed out, with a different cursor and the input fields are labeled as disabled in the code.
Also, the placeholder text on iphone is unevenly spaced vertically - it needs to be moved downwards. The issue only occurs on the phone, it looks fine on desktop. It's only the placeholder text that is unevenly spaced - when you enter text in text in the fields the spacing looks fine. I have attached a screenshot. How would I go about adjusting this?
Thanks :)
Hello Sian Evans,
The fields are greyed out / disabled when you are logged in to WordPress. Could you please tell me was this the case? You need to try the booking process while not logged in to WP or from an incognito mode in order to fill in customers' information in the booking form.
We tried this on our testing site and the placeholders are centered on iPhone as well. This is probably some styling of your theme (or it can be some other plugin that you have that can have CSS styling for input fields) that applies to these placeholders as well.
If you have any further questions or concerns feel free to ask,
Hi Marija,
Thanks for your reply, now I understand about why the fields are greyed out.
Regarding the misaligned placeholder fields: I have discovered it's actually a Safari issue! To rule out any overrides from my theme or other plugins, I checked an official demo of the Amelia plugin on my iphone and the placeholder fields are misaligned there as well (see attachment). If you guys checked iPhone resolution on a Chrome emulator you wouldn't have seen the issue because it's Safari-specific.
So when it comes to fixing this, I worked out how! Am putting it here for anyone viewing this ticket in future :)
Add this css:
@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0){
.amelia-app-booking input::placeholder {
line-height: 20px;
}
}
You are welcome, Sian.
I see, I am not sure if I tested on Safari or Chrome, but in any case I am glad to see you managed to find a solution to this issue
I will forward this to the development team as well so they can maybe implement this fix or similar in the plugin.
Again, thanks for sharing this with other users!
If you have any other questions or concerns feel free to open a new ticket and we will gladly help.