When viewing an embed Calendly Routing form on a website from a mobile device, the choices for the drop-down questions display at the button of the form, not under the question. This makes it troublesome if you have a long form with multiple dropdown questions because the choices will not be visible in the viewport and is bad UX for the user. See attached screenshot. Any suggestions?
In the case of an inline embed, the bottom of the 'window' will be the bottom of the iframe embed. If the entire inline embed is not on screen when a dropdown is selected, the options may appear below the bottom of the screen itself.
Example of options at the bottom of the screen:
I’ve got some suggestions and best practices for this scenario:
- Ensure that the height of the inline embed isn't too long so that mobile users can comfortably see the bottom of the embed without a large amount of scrolling on the parent page. We sometimes recommend increasing the embed's height to reduce the embed's scroll, but it is generally easier for mobile visitors to use a shorter embed.
- If you use radio buttons rather than a dropdown, the options will always be visible. This can be a great alternative when there is only a small list of options.
- Consider using one of our pop-up embed options instead of the inline embed. Since the embed is launched in a pop-up modal with a fixed background, the bottom of the embed will never be below the bottom of the screen. You can see the embed options, and their instructions here: https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview
Reply
Sign up
Already have an account? Login
Not a Calendly user yet? Head on over to Calendly.com to get started before logging into the community.
Employee Login Customer LoginLogin to the community
Not a Calendly user yet? Head on over to Calendly.com to get started before logging into the community.
Employee Login Customer LoginEnter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.