CTA is being hidden by keyboard on long form in mobile

Question

While working on long forms on mobiles, such as multiple business expenses, the CTA to finalise adding is getting hidden by the keyboard. The common way of putting one input field and one cta may not work on this. The form ususally has multiple expenses and each expense consists of at least 4 input fields and two CTAs. While I can group the expenses in accordions or send the user to a new page for adding another expense, the problem of 4 input fields and two CTA remains.

How can the forms fit the screen so that the keyboard does not hide the CTA and other important fields? The users are aged people and scrolling to find CTA may not be a plausible solution. Can the layout be changed or something?

Answer 1

I encountered a similar problem when I was designing a currency conversion calculator. CTA buttons consistently present challenges in the context of a responsive mobile browser.

When I tackled this issue, I adopted an idea I had observed on Airbnb's platform. When a user navigates to the final two input fields, the keyboard retracts beneath the CTA button, causing the screen to lift slightly (ensuring it does not obscure the input field). I send this solution to the development team, and it was successfully implemented.

In all fields preceding the last two, the keyboard behaves normally, potentially hiding the CTA button. The rationale behind this is to provide users, towards the end of the form, the option to tap and visually recognize the CTA button. After all, the relevance of this button increases as the completion of the form approaches.

Example 1: Airbnb keyboard - it obscures the address field. Example 2: Airbnb keyboard - it elevates the CTA button along with the last typing field.

Answer 2

If you ask me, use a floating sticky CTA to place it in the proper position above the keyboard. You can control and check keyboard visibility state by javascript. but as UX point of view, putting it above the keyboard and static in place, will make memorizing position of CTA better, which may lead to better experience.