HTML Form with Focus on a Single Input
Guide your users to look at one field at a time
I’ve recently ran into some beautiful forms created with Typeform. I really loved how they reinvented the way information is collected, and instead of showing the whole form all at once, they focus on a single input field at a time.
As an experiment, I re-created the basic form, using HTML, CSS and JavaScript (with jQuery). Of course it misses many of the cool features Typeform has, but it can be easily integrated to any website to shake up the way you collect information from your users.
The form is responsive and it reacts to scrolling, moving the focus to the visible element.
I bet there are a lot of features that could be added, my goal was just to demonstrate the basic functionality. You can get the source code on Codepen.
Did you like this post? Leave some 👏👏👏’s, they help this article to reach others.
