How do I ensure my user knows there's more data below this floating CTA?

Question

I have a mobile form, on which the CTA is lower on the page, so a sticky CTA indicates the action for the form upon first glance for users. But, how do I deal with content that is hidden because of the sticky footer, below the fold?

I want to tease the user by cutting off content, to indicate that there is more content below the fold, but how can you assure this happens on every mobile device height?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

It seems like trying to detect device height to ensure that your elements sit halfway under a floating element would be getting into a whole can of worms, so I'll offer a couple solutions that would remove the need for that:

Stick the CTA to the left or right of the screen

If it's positioned without the standard content margin, then it won't appear to be a part of the typical scroll region. This could help to indicate that it's not a part of the screen beneath it.

_{Obviously, ensure the content will scroll high enough so that all of the content can move comfortably higher than the floating CTA.}

^{download bmml source – Wireframes created with Balsamiq Mockups}

Show the CTA after a short delay

Alternatively, you could load the page, then fade or slide in your CTA so that users see that the page extends beneath it (hard to show in a mockup, but hopefully you get the idea).

Answer 2

I would consider using a slightly transparent and blurred background, similar to what Apple does with the "background-blur" property for their tab bar element in native apps, to hint to the user that additional fields lie just underneath the main CTA callout.

Leveraging another native app approach, use angled or caret up and down elements in the overlay for the CTA to shift focus from one field to another; "angle or caret up" navigating browser focus to the field above and "angle or caret down" navigating browser focus to the field below.

Answer 3

Perhaps you could disable the Submit button until all required fields are filled out, and test for false floors on different viewport heights.

Answer 4

Put the CTA slightly above the bottom, make it slightly narrower than the screen, and give it 3D shading. This will emphasize that it's sticky, and not actually the end of content, and if there's content below it, it should stick out from the sides and bottom.