Contact Form 7 (CF7) Floating Labels.

cf7-floating-labels-example-form.html

<div class="newsletterSignUpFooter">
	<div class="form-group">[text* your-name class:form-control class:input-lg] <label for="your-name">First Name</label></div>
	<div class="form-group">[text* text-777 class:form-control class:input-lg] <label for="your-name">Last Name</label></div>
	<div class="form-group">[email* your-email class:form-control class:input-lg] <label for="your-name">Your Email</label></div>
	<div class="">[submit class:btn class:btn-warning class:btn-lg class:w100 "Send"]</div>
</div>

cf7-floating-labels-script.js

/*********************************************
** FLOATING LABELS FOR CF7
*********************************************/
$(".wpcf7 .form-control").focus(function(){
	$(this).parent().parent().addClass('active');
}).blur(function(){
	var cval = $(this).val()
	if(cval.length < 1) {$(this).parent().parent().removeClass('active');}
})

cf7-floating-labels-styles.css

/*
1. convert field wrap bg to white
2. convert field bg to transparent
3. set labels z-index: 1;  and  field to z-index: 2; to make a click on label activate field
4. handle label transition / location change (animation addded)
*/

input[type="text"].form-control, input[type="email"].form-control {padding: 10px 15px 0px; font-size: 16px !important; background: transparent; z-index: 2; position: relative;}
.wpcf7-form-control-wrap {background: #fff; height: 100%; display: block;}
label {transform: translateY(-100%); z-index: 1; font-size: 16px; font-weight: normal; font-style: italic; color: #9b9b9b; line-height: 42px; position: absolute; padding: 0 17px;-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.form-group.active > label {transform: translateY(-125%); color: #9b9b9b; font-size: 12px; padding: 0 16px;}