Skip to main content

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?

@conr It is currently expected that dropdown options will display at the bottom of the screen on mobile on both direct booking pages and embeds!

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:

image.png

 

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
Terms & ConditionsCookie Settings