December 12, 2013 22:07
diff --git a/jsbin.EruXIQOy.css b/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;
 }
diff --git a/jsbin.EruXIQOy.html b/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>
diff --git a/jsbin.EruXIQOy.js b/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'
	});
	})();