From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.
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:
Here’s an example of the info tooltip and a filled email field:
For smaller screens we have a different layout with adjusted elements:
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:
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!
Hi thanks for sharing great post but i don’t want to review form how to remove that frame
Hi! Nice script, but i have one problem. I dont’t want to use enter, spacebar for next step. How to disable it?
Simplest solution to autofocus in each input is to add this:
document.querySelector('.fs-current >
input').focus
();
at the end of
_nextField()function .and set 1st input to autofocus
This code is working but for some reason it is ruining the animation effect. How about yours?
@dan -Oh yes I didn’t noticed it ruined the animation effect ,to fix this we need to add it after the animation is over you can check out here for the difference to make it happen.
Hi, In certain cases I would like to skip the onReview function and just submit the form after the final section. How would I go about doing this? Thanks for any help.
I would like to know as well.
Hei marry,
if i want to add percent status on progressbar , what i must to do ? like 8% 70%
Dear,
I am looking for a design like this, possibly to implement in WordPress. The idea behind it is that based on the answers you give (only multiple choice though), you come to a collection of suggestions (for example travel destinations, or new movies to see).
Would this be possible with this interface? I would very much appreciate extra information (via e-mail if possible!)
Cheers
hai, its nice, but i have problem in that, if i have add dynamic data for dropdowns or any content , the form is not working, how could i solve this???
Just want to say. Awesome Job Mary Lou.
To anybody, I’m trying to combined Mary Lou’s form with this style of file input (http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/) and have no luck.
I was able to put the design in, but the function for the file-input button for some reason is not functioning. I’m sure that I have connected the scripts but still it’s not clickable. Any idea? thx.
This is awesome interface, thanks you.
But I found an UX bug: I cannot back to first field from second field until I fills the second field.
Hello everyone, I tries a lot but my radio buttons are not working. Can anyone help me quick please.
Thanks in advance.
Hello.
PHP files??? plis
Thanks
Thank for your share.
But i have a problem: i want to keep the last step (review & submit).
i have try to change something in fullscreenForm.js. for example:
// reached the review and submit step
onReview : function() { return false; } => return true
==> but …. T.T
<?php
$FROM = "YOUR EMAIL ADDRESS";
$to = "YOUR EMAIL ADDRESS";
$subject = "MY DATA FROM FROM";
//print_r($_POST);
$data ="";
foreach ($_POST as $field => $value)
{
$data .= "$field: $value\n";
}
//echo $data;
$mime_boundary = "MYFORM".md5(time());
$headers = "From: ".$FROM."\r\n";
$headers .= "Reply-To: ".$FROM."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/alternative; boundary=\"$mime_boundary\"\r\n";
$message = "--$mime_boundary\n";
$message .= "Content-Type: text/plain; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";
$message .= "$data\n\n";
$message .= "--$mime_boundary--\n\n";
$mail_sent = mail( $to, $subject, $message, $headers );
Has anyone been able to to submit this form and update database with php? if you have please help!
Send data via email.
index.html
line 23:
create file submit.php
NOTE: I have just written this without testing.
^^^^^^^^^^^^^^^^^^
$value)
{
$data .= “$field: $value\n”;
}
//echo $data;
$mime_boundary = “MYFORM”.md5(time());
$headers = “From: “.$FROM.”\r\n”;
$headers .= “Reply-To: “.$FROM.”\r\n”;
$headers .= “MIME-Version: 1.0\r\n”;
$headers .= “Content-Type: multipart/alternative; boundary=\”$mime_boundary\”\r\n”;
$message = “–$mime_boundary\n”;
$message .= “Content-Type: text/plain; charset=UTF-8\n”;
$message .= “Content-Transfer-Encoding: 8bit\n\n”;
$message .= “$data\n\n”;
$message .= “–$mime_boundary–\n\n”;
$mail_sent = mail( $to, $subject, $message, $headers );
^^^^^^^^^^^^^^^^^^
index.html
line 23:
<form id="myform" method="post" class="fs-form fs-form-full" autocomplete="off" action="submit.php" >
thanks !!
How do i use this with wordpress.
plz help.
This seems like it could be nicely altered to serve as an onboarding dialog with a new user. I’m thinking of what our new course documentation would look like in this format….
How can have two color select options in the form? They seem to only default to the first one.. Is there a way to do allow for multiple color select pages? For example background color, nav color, etc?
How can I have two color select options in the form? Any more added seem to only allow the color selected on the first one to be chosen.. and the others all default to the same color. Is there a way to allow for multiple color select options? For example background color, nav color, etc?
Does it support to do the back field function? I mean the back button to return to previous field. I don’t want to use the pager.
hi guys this is great! is it possible for me to write checkbox class? like you made radio button?
How can have two color select options in the form? They seem to only default to the first one.. Is there a way to do allow for multiple color select pages? For example background color, nav color, etc?