index.html

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Peanut Butter on Everything</title>
		<meta name="description" content="You can put peanut butter on that" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
		<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">

			<div class="fs-form-wrap" id="fs-form-wrap">
				<div class="fs-title">
					<h1>Peanut Butter on Everything</h1>
					<div class="codrops-top">
						<a class="fa fa-question-circle" href="#"><span>Answers to the age old question: Can peanut butter go on that?</span></a>
					</div>
				</div>
				<form id="myform" class="fs-form fs-form-full" autocomplete="off">
					<div class="results" id="results">
						<h3>Results</h3>
						<p id="results-text">Yes, you can put peanut butter on </p>
					</div>
					<ol class="fs-fields">
						<li>
							<label class="fs-field-label fs-anim-upper" for="q1">What would you like to put peanut butter on?</label>
							<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Yourself" required/>
						</li>
					</ol><!-- /fs-fields -->
					<button class="fs-submit" type="submit">Submit Another</button>
				</form><!-- /fs-form -->
			</div><!-- /fs-form-wrap -->
			
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/selectFx.js"></script>
		<script src="js/fullscreenForm.js"></script>
		<script>
			(function() {
				var formWrap = document.getElementById( 'fs-form-wrap' );

				[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {	
					new SelectFx( el, {
						stickyPlaceholder: false,
						onChange: function(val){
							document.querySelector('span.cs-placeholder').style.backgroundColor = val;
						}
					});
				} );

				new FForm( formWrap, {
					onReview : function() {
						classie.add( document.body, 'overview' ); // for demo purposes only
						var input = document.getElementById('q1');
						var result_span = document.createElement('span');
						var node = document.createTextNode(input.value);
						result_span.appendChild(node);

						var element = document.getElementById('results');
						element.appendChild(result_span);
					}
				} );
			})();
		</script>
	</body>
</html>