/jsbin.EruXIQOy.css

## jsbin.EruXIQOy.css
body {
  background: #e4ece5;
  color: #363636;
  font-size: 16px;
  font-family: 'Cantarell', sans-serif;
  line-height: 22px;
}

#formContainer {
  position: fixed;
  top: 7%;
  right: 7%;
  bottom: 7%;
  left: 7%;
  margin: auto;
  max-width: 640px;
  max-height: 800px;


}

#formHeader h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
  font-size: 2.4em;
  font-weight: 300;
  opacity: 0.8;
}

#formBody {
  font-weight: 300;
  font-size: 1.15em;
}

.rf_notice {
  font-size:.8em;
  text-align: center;
}

.FlowupLabels .fl_label {
  cursor: text;
}

.rf_submit {
  background:none;
  border-radius: 4px;
  border: 1px dotted #3dd585;
  color: #3dd585;
  font-size: 18px;
  padding: 5px 25px;
  display: block;
  margin: auto;
}
.rf_submit:hover {
  cursor:pointer;
  background:#3dd585;
  color: #555;
}
.rf_submit:focus {
  outline:none;
  border: 1px solid #3dd585;
}

#miscInfo {
  position:fixed;
  bottom:10px;
  left:15px;
  font-size: 12px;
  color: #999;
}
#miscInfo a {
  color:#999;
}
#ghBanner {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
}
.FlowupLabels .fl_wrap {
  /* Can change */
  width: 500px;
  height: 46px;
  margin:12px auto; /* change 0 to auto for center alignment */

  /* Don't change */
  display:block;
  position:relative;
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

/* initial label state */
.FlowupLabels .fl_label {
  /* Can change */
  top: 15px;
  left: 5px;

  /* Don't change */
  position:absolute;
  z-index:3; /* This can be removed but then the labels must be placed after the inputs in the HTML */
  -webkit-transition: all .05s linear;
	   -moz-transition: all .05s linear;
	   	   -transition: all .05s linear;
}

.FlowupLabels .fl_input {
  /* Can change */
  background: none;
  border:none;
  border-bottom: 1px solid #555;
  border-radius: 0;
  font-size: 16px;
  line-height: 22px;
  padding: 20px 0 0 5px;

  /* Don't change */
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  width: 100%;
  z-index:2; /* This can be removed but then the labels must be placed after the inputs in the HTML */
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


/* Focus & populated label styling */
.FlowupLabels .fl_wrap.focused .fl_label,
.FlowupLabels .fl_wrap.populated .fl_label {
  /* Can change */
  top: 0;
  font-size: 12px;
  color: #555;
}
.FlowupLabels .fl_wrap.focused .fl_label {
  /* Can change */
  color: #00A34D;
}

## jsbin.EruXIQOy.html
<html><head>

	<meta charset="utf-8">
	<title>Form Options</title>

	<!-- Load the CSS -->
	<link href="http://fonts.googleapis.com/css?family=Cantarell:400,700" rel="stylesheet" type="text/css">


<body style="" screen_capture_injected="true">

	<div id="formContainer">
    	<div id="formHeader">
			<h3>File Request Form</h3>
		</div>

		<form id="formBody" class="FlowupLabels">
			<p class="rf_notice">
				Your information will be kept private and is only collected to satisfy our burning curiosity.
			</p>

			<div class="fl_wrap">
				<label class="fl_label" for="rf_name">Name:</label>
				<input class="fl_input" type="text" id="rf_name">
			</div>

			<div class="fl_wrap">
				<label class="fl_label" for="rf_email">Email:</label>
				<input class="fl_input" type="email" id="rf_email">
			</div>

			<div class="fl_wrap">
				<label class="fl_label" for="rf_company">Company:</label>
				<input class="fl_input" type="text" id="rf_company">
			</div>

			<div class="fl_wrap">
				<label class="fl_label" for="rf_phone">Phone:</label>
				<input class="fl_input" type="tel" id="rf_phone">
			</div>

			<p>
				<input class="rf_submit" type="submit" value="Send">
			</p>
		</form>
	</div>


	<!-- Load the JS -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</body>

## jsbin.EruXIQOy.js
(function($) {
	$.fn.FlowupLabels = function( options ){

		var defaults = {
        		// Useful if you pre-fill input fields or if localstorage/sessionstorage is used.
				feature_onLoadInit: false,
				// Class names used for focus and populated statuses
				class_focused: 		'focused',
				class_populated: 	'populated'
			},
			settings = $.extend({}, defaults, options);


		return this.each(function(){
			var $scope  = $(this);

			$scope.on('focus.flowupLabelsEvt', '.fl_input', function() {
				$(this).parent().addClass(settings.class_focused);
			})
			.on('blur.flowupLabelsEvt', '.fl_input', function() {
				var $this = $(this);
				$this.val().length ? $this.parent().addClass(settings.class_populated).removeClass(settings.class_focused) : $this.parent().removeClass(settings.class_populated + ' ' + settings.class_focused);
			});


			// On page load, make sure it looks good
			if (settings.feature_onLoadInit) {
				$scope.find('.fl_input').trigger('blur.flowupLabelsEvt');
			}
		});
	};
})( jQuery );

(function(){
	$('.FlowupLabels').FlowupLabels({
		/*
		These are all the default values
		You may exclude any/all of these options
		if you won't be changing them
		 */
		// Handles the possibility of having input boxes prefilled on page load
		feature_onInitLoad: false,

		// Class when focusing an input
		class_focused: 		'focused',
		// Class when an input has text entered
		class_populated: 	'populated'
	});
})();
	body {
	background: #e4ece5;
	color: #363636;
	font-size: 16px;
	font-family: 'Cantarell', sans-serif;
	line-height: 22px;
	}

	#formContainer {
	position: fixed;
	top: 7%;
	right: 7%;
	bottom: 7%;
	left: 7%;
	margin: auto;
	max-width: 640px;
	max-height: 800px;


	}

	#formHeader h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	}

	#formBody {
	font-weight: 300;
	font-size: 1.15em;
	}

	.rf_notice {
	font-size:.8em;
	text-align: center;
	}

	.FlowupLabels .fl_label {
	cursor: text;
	}

	.rf_submit {
	background:none;
	border-radius: 4px;
	border: 1px dotted #3dd585;
	color: #3dd585;
	font-size: 18px;
	padding: 5px 25px;
	display: block;
	margin: auto;
	}
	.rf_submit:hover {
	cursor:pointer;
	background:#3dd585;
	color: #555;
	}
	.rf_submit:focus {
	outline:none;
	border: 1px solid #3dd585;
	}

	#miscInfo {
	position:fixed;
	bottom:10px;
	left:15px;
	font-size: 12px;
	color: #999;
	}
	#miscInfo a {
	color:#999;
	}
	#ghBanner {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	}
	.FlowupLabels .fl_wrap {
	/* Can change */
	width: 500px;
	height: 46px;
	margin:12px auto; /* change 0 to auto for center alignment */

	/* Don't change */
	display:block;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	}

	/* initial label state */
	.FlowupLabels .fl_label {
	/* Can change */
	top: 15px;
	left: 5px;

	/* Don't change */
	position:absolute;
	z-index:3; /* This can be removed but then the labels must be placed after the inputs in the HTML */
	-webkit-transition: all .05s linear;
	-moz-transition: all .05s linear;
	-transition: all .05s linear;
	}

	.FlowupLabels .fl_input {
	/* Can change */
	background: none;
	border:none;
	border-bottom: 1px solid #555;
	border-radius: 0;
	font-size: 16px;
	line-height: 22px;
	padding: 20px 0 0 5px;

	/* Don't change */
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	width: 100%;
	z-index:2; /* This can be removed but then the labels must be placed after the inputs in the HTML */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	}


	/* Focus & populated label styling */
	.FlowupLabels .fl_wrap.focused .fl_label,
	.FlowupLabels .fl_wrap.populated .fl_label {
	/* Can change */
	top: 0;
	font-size: 12px;
	color: #555;
	}
	.FlowupLabels .fl_wrap.focused .fl_label {
	/* Can change */
	color: #00A34D;
	}
	<html><head>

	<meta charset="utf-8">
	<title>Form Options</title>

	<!-- Load the CSS -->
	<link href="http://fonts.googleapis.com/css?family=Cantarell:400,700" rel="stylesheet" type="text/css">


	<body style="" screen_capture_injected="true">

	<div id="formContainer">
	<div id="formHeader">
	<h3>File Request Form</h3>
	</div>

	<form id="formBody" class="FlowupLabels">
	<p class="rf_notice">
	Your information will be kept private and is only collected to satisfy our burning curiosity.
	</p>

	<div class="fl_wrap">
	<label class="fl_label" for="rf_name">Name:</label>
	<input class="fl_input" type="text" id="rf_name">
	</div>

	<div class="fl_wrap">
	<label class="fl_label" for="rf_email">Email:</label>
	<input class="fl_input" type="email" id="rf_email">
	</div>

	<div class="fl_wrap">
	<label class="fl_label" for="rf_company">Company:</label>
	<input class="fl_input" type="text" id="rf_company">
	</div>

	<div class="fl_wrap">
	<label class="fl_label" for="rf_phone">Phone:</label>
	<input class="fl_input" type="tel" id="rf_phone">
	</div>

	<p>
	<input class="rf_submit" type="submit" value="Send">
	</p>
	</form>
	</div>


	<!-- Load the JS -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	</body>
	(function($) {
	$.fn.FlowupLabels = function( options ){

	var defaults = {
	// Useful if you pre-fill input fields or if localstorage/sessionstorage is used.
	feature_onLoadInit: false,
	// Class names used for focus and populated statuses
	class_focused: 'focused',
	class_populated: 'populated'
	},
	settings = $.extend({}, defaults, options);


	return this.each(function(){
	var $scope = $(this);

	$scope.on('focus.flowupLabelsEvt', '.fl_input', function() {
	$(this).parent().addClass(settings.class_focused);
	})
	.on('blur.flowupLabelsEvt', '.fl_input', function() {
	var $this = $(this);
	$this.val().length ? $this.parent().addClass(settings.class_populated).removeClass(settings.class_focused) : $this.parent().removeClass(settings.class_populated + ' ' + settings.class_focused);
	});


	// On page load, make sure it looks good
	if (settings.feature_onLoadInit) {
	$scope.find('.fl_input').trigger('blur.flowupLabelsEvt');
	}
	});
	};
	})( jQuery );

	(function(){
	$('.FlowupLabels').FlowupLabels({
	/*
	These are all the default values
	You may exclude any/all of these options
	if you won't be changing them
	*/
	// Handles the possibility of having input boxes prefilled on page load
	feature_onInitLoad: false,

	// Class when focusing an input
	class_focused: 'focused',
	// Class when an input has text entered
	class_populated: 'populated'
	});
	})();