Fullscreen Form Interface

An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.

Today we’d like to share a fullscreen form concept with you. The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to add some fancy animations for the fields. Once all the fields have been filled or moved through, we show a summary in the final step. Here the input data can still be reviewed and corrected. In this final step the form can also be submitted.

Please note that this is a highly experimental component and it was only tested with the latest browsers that support animations, 3D transforms and HTML5 form elements.

The form has a couple of elements: the form fields (each being shown individually), a dot navigation on the right side (this allows to go back to already filled questions), a number indicator that shows the current step in the form, a continue button that will move to the next field, some details inside of the form fields, like a info icon and a couple of custom inputs, like the fullscreen color picker from the Inspiration for Custom Select Elements post.

The following show the initial view of the form:

FullscreenForm01

Here’s an example of the info tooltip and a filled email field:
FullscreenForm02_infoexample

For smaller screens we have a different layout with adjusted elements:
FullscreenForm03_Mobile
Image credit: Flat iPhone by UIPixels.com

When all fields have been navigated through, we reach the final review step where the form can be corrected and submitted:
FullscreenForm04_Review

The main idea behind the implementation was to take each field (in our case a list item of an ordered list) and display one at a time. When navigating to the next or previous field, animation classes are applied to the exiting and coming fields which make the inner parts (i.e. the label and input) move up or down with delays.

The form script has a couple of options, mainly to show/hide the control elements and a callback for when the review state is reached:

// show progress bar
ctrlProgress : true,

// show navigation dots
ctrlNavDots : true,

// show [current field]/[total fields] status
ctrlNavPosition : true,

// reached the review and submit step
onReview : function() { return false; }

The data-attribute data-input-trigger used in a field (i.e. a list element in our custom form), will trigger the form to move to the next field if the respective input of that field has been entered, meaning, a value was selected.

We hope you enjoyed this experiment and find it inspiring!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.