Framer Project - User Input Based Prototype
I recently worked on a freelance project that involved using the actual keyboard on an iPad Air 2. At this point, I could find a workaround and have an image of the keyboard show by but if I have to make it functioning, I would have to code every key in so when a user hits X on the keyboard, the input field shows X.
This was too much work, obviously, and I was sure that I could find something in the framer examples library which can help me create an input field that activates the device keyboard when clicked.
I found this example which worked perfectly. It does show an image keyboard in this example but when accessed from a mobile device, the keyboard does pop up and take values from the user. That's all I needed.
I cannot share their prototype but this is basically what I achieved after a lot of debugging and figuring out. As soon as the user hits Subscribe, whatever that has been entered in the Your Name field gets stored in a variable which is then pulled and displayed on the confirmation page.
I had to break down the whole task into micro steps.
1. How do I store the value of the Your Name input field?
2. Then, how do I get to just show the value of what the user entered on the first screen on the next screen
3. Then, how to I format the text to show it the same way as the rest of the text?
4. Is there a workaround that will automatically center the confirmation text to be displayed?
Answering these questions and a lot more like these can be a frustrating experience but I am glad I was able to figure it out and deliver excellent work. It brushed up my knowledge in Framer and taught me so many things that I never knew before.
You can play around with the actual prototype here.
This was a lot of fun!