floatforms is a jQuery plugin that makes long forms easier to fill out. As you fill out an input element and move to the next one, the previous element is moved to a box which has a summary of users input. Moved elements can be edited just by clicking on the row. Demo can be found here
git clone https://github.com/Uhkis/floatforms.git
Package<script src="js/floatforms.js"></script>
<link rel="stylesheet" href="css/floatforms.css">
then add your form stuff as usual.<div id="floatbox"></div>
Do the magic
$('#yourform').floatforms();
And full copypasteable code for lazy people
<!doctype html>
<html lang="en">
<head>
<title>Demos</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/floatforms.js"></script>
<link rel="stylesheet" href="css/floatforms.css">
</head>
<body>
<script>
$(document).ready(function() {
$('#form1').floatforms();
});
</script>
<div id="floatbox"></div>
<form id="form1">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</form>
</body>
</html>