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.
FullscreenForm

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 149

Comments are closed.
  1. I don’t know why so many are against multistage forms. When used correctly they really can help guide the user experience. I really like these…great work!

  2. hi mary…great job on this…is there a way to vertically center the current question/answer?

  3. dumb question,

    but how do I export the content from the form, it seem to just disappear after you click submit?

  4. I would like some help to do the same. I can’t find how to send info to my email adress .
    Please help
    Thanks

  5. I liked the plugin very much, I had a small query and would love it if you can actually solve.

    I actually do not want to have the section “Review & Submit” before actually submitting it and rather just have a SEND button in the middle of the page and a notification after that.

    Can you actually guide me through it?

  6. I’ve integrated this form to jotform.com and it becomes this (arabic language) http://molham.ae/FullscreenForm/

    now i want to ask you, i hide a field based on a checkbox value condition chosen before it, but it still showing me an empty scroll part of the one that i’ve hide.

    So can i hide the whole scroll part … based on a checkbox value?

  7. Great great job, well done as usual! Lacking only a file in php to send email. Could you help? Thanks anyway and again!

  8. @Anish jajodia and @patrick, I have a working example for sending with node.js and nodemail if you’re looking for a non-php option.

  9. Very great job.

    I want to add this plugin but not in Fullscreen, i’m trying to do it but the lists buttons appear in worst place of screen

    How integrate it in page with Header and Footer Tag ?

    Thank’s

  10. I found something wrong.

    If you try to add an action and a method, it makes the system invalid.

  11. Hi, can anyone advise how I’d amend the code if I only wanted to use the “review section” for user input and not the “one-by-one questions” section? Any help appreciated 😉

  12. Does anyone know how to get autofocus working on this so the cursor is ready when the question changes?
    Using both ‘autofocus’ and ‘required’ doesn’t seem to work?

  13. Also does anyone know how to move the continue button to inside the form? I’ve managed to integrate it into WordPress but whenever i move the button it just seems to submit the form!