<form class="my-form">
	<p>
		<label for="name">Name *</label>
		<span class="wrap">
      <input type="text" name="your-name" value="" size="40" class="form-control text" id="name"/>
    </span>
	</p>
	<p>
		<label for="e-mail">E-mail *</label>
		<span class="wrap">
      <input type="text" name="your-e-mail" value="" size="40" class="form-control text" id="e-mail"/>
    </span>
	</p>
	<p>
		<label for="phone">Phone * <span class="meta">Please enter your phone number including country code.</span></label>
		<span class="wrap">
      <input type="text" name="your-phone" value="" size="40" class="form-control text" id="phone"/>
    </span>
	</p>
	<p>
		<label for="message">Your message:</label>
		<span class="wrap">
      <textarea name="your-message" cols="40" rows="10" class="textarea" id="message" aria-invalid="false"></textarea>
    </span>
	</p>
	<p class="cta-holder">
		<input type="submit" value="Submit" class="cta-button" />
	</p>
</form>
.my-form {
	background: #efefef;
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
}

.my-form p {
	background: #ffffff;
	cursor: pointer;
	font-weight: bold;
}

.my-form p label {
	cursor: pointer;
	display: block;
	padding: 10px 10px 0px;
}

.my-form p .meta {
	font-style: italic;
	font-weight: normal;
	padding: 0px 10px;
}

.my-form p span.wrap {
	display: block;
	margin-left: 10px;
}

.my-form p span input,
.my-form p span textarea {
	background: rgba(0, 0, 0, 0);
	border: 0px none;
	color: #666666;
	cursor: pointer;
	font-size: 1em;
	padding: 10px 0;
	width: 100%;
}

.my-form .cta-holder {
	background: rgba(0, 0, 0, 0);
	overflow: auto;
}

p.focus {
	background-color: #d7edef;
}

.cta-box {
	overflow: auto;
	padding: 30px 0 0 20px;
}

.cta-button,
#submit {
	background: #0096cc;
	border: 0 none;
	color: #ffffff;
	cursor: pointer;
	display: block;
	float: left;
	font-size: 1.6em;
	font-weight: bold;
	padding: 12px 30px 8px;
	text-decoration: none;
}

.cta-button:visited {}

.cta-button:hover,
#submit:hover {
	background: #666;
}

.cta-button:active,
#submit:active {
	background: #bbbbbb;
}
$(document).ready(function() {
	$("form.my-form input, form.my-form textarea, form.my-form input").focus(function() {
		$(this).parent().parent().addClass("focus");
	});
	$("form.my-form input, form.my-form textarea, form.my-form input").blur(function() {
		$(this).parent().parent().removeClass("focus");
	});
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js