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

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 86

  1. 2

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

    dumb question,

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

  3. 7

    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?

  4. 9

    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?

  5. 13

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

  6. 14

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

  7. 19

    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

  8. 22

    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 ;)

  9. 24

    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?

  10. 25

    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!

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>