How to creat mobile virtual keyboard? For login page

Something like this.


If you were to place an input field above the key pad, with each key being a standard Group element, you could create a workflow upon clicking each key Group that modifies the input value.

Input Field’s current value + [1][2][3], etc – depending on which key is pressed, you would append a different number. As for the backspace, you could modify the input field value by taking current input field’s value and trimming off the last character by 1.

Edit: I just noticed you posted before asking a similar question only 1 hour ago. Try to keep all conversations about a certain topic within a single thread so that people can more easily help you. If there are multiple identical topics active at the same time it will hurt your chances of receiving feedback. 30 minutes is not exactly a long enough time frame to expect a response from the community.

Thankyou!!! im gonna try this. But how can i recieve this data?

Hi! I have the same challange, I tried to follow this advice but couldnt do it. Can you explain with a bit more details, kind of a step by step to do it (build the internal keyboard to fill an input form)?

@allesermeedoen @felipe

I will post back here in the next day or two with a walkthrough on how to accomplish this. I’ll place all my work in a public app so you can see the inner workings :slight_smile:

1 Like

If I were to use custom states how do I add number?
is there is a way to concatenate strings in bubble ?

@MrMaker My solution at the time was overall hacky and relying on a big mess of custom states, custom JavaScript, and several elements/groups. I ended up implementing a 3rd party virtual keyboard some time later. You can see implementation info here:


1 Like

@philip @MrMaker

Hey guys, simple-keyboard creator here!

For this use-case, I think this demo could work:

If you have any questions regarding the virtual keyboard, you can reach out on Discord or on Github. I’ll respond pretty quick.

Francisco Hodge

Hi Guys

I’m trying to find a solution for a virtual keyboard. I have no training or working understanding of programming languages and have been working on bubble exclusively.

Is there any place I could find info on how to implement the simple-keyboard creator that @hodgef linked to? Just some kind of simple guide for use in bubble apps. I am in the process of creating a messaging system for my app which will be used mostly on mobile devices.

Currently I am building with intention of users just accessing the app via internet, however may in future want to get a “native” app version for iOS or android and think that I’d need to have a virtual keyboard for users to enter any information into my input fields.


Thanks. I was hoping to find something that would explain how to use the simple-keyboard creator that was linked in the earlier posts.