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. 

Example link: https://share.framerjs.com/ai3mi9admhl2/

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. 

For example: 
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!