Hi, here is link to the test site we have been creating: https://www.certifiedtranslationservices.co.uk/ctsv1/
Please scroll down to “GET A FREE QUOTE” form which is built using Gravity Forms.
The Problem: “Translation From” and “Translation To” are dropdowns. When a user selects any language from these dropdowns it doesn’t show on the frontend. Basically we want the selected language to also populate in the form. We face this issue only while accessing the site using a mobile device. While on the desktop this feature works perfectly well. Kindly help, any assistance in fixing this issue would be greatly appreciated.
Hello Punye. I tested your form on Desktop and I can see that the drop downs are using the enhanced interface (with the option to search and autocomplete). That functionality is disabled on mobile (the chosen.js library does not work on mobile) but the default dropdowns should work. I tested this on a iPhone SE (2020) with Safari and it worked for me. Take a look:
Hello Chris. Many thanks for reviewing the site. My apologies for being unclear with my issue. I want to clarify: the issue I am facing is related to the autopopulation of the language which user selects (in mobile version of the site) from the drop-down. The language dropdown is there in both mobiles and desktops but after user selects a language from the drop-down, on desktops the selected language shows but not so on the mobile version. This is a screenshot of how the form looks on the mobile version (even though I have selected the languages), while on desktops this works perfectly fine and the selected language shows up in the form (as can be seen from screenshot of the desktop version).
It sounds like there is some conflicting CSS that is making it appear not selected in the box after making the section on mobile. If you submit the form, does the language get properly stored in the entry? If so, it’s working correctly, but there is some conflicting CSS that is causing the problem. Test this from the form preview on mobile (you will need to be logged in as an administrator) and see if it looks OK there. If so, it’s the CSS that needs to be adjusted, to prevent your theme from making it appear that the language is not selected.
Thank you for looking into the issue.
- On form submission from mobile, the languages are getting properly stored. This can be confirmed through the email we received (screenshot 1 in attached file)
- Test from the form preview on mobile looks perfectly fine (screenshot 2 in attached file)
- I also inspected the mobile and desktop versions of the site and found some elements that are possibly missing on the mobile version (screenshot 3 in attached file)
It could also be an issue with CSS as well. I request you to please help me with this.
