Форма с анимацией Label

form_label_animate

<div class="bottom-block">
	<div class="container">
		<div class="row">

			<div class="bottom-block-col col-md-8">
				<h2>Оставьте заявку</h2>
				<form method="post" id="inline-order" class="inline-frm ajax_form" action="123.php">
					<input type="hidden" name="srv" value="Доставка и экспедирование">
					<div class="inline-form-row row">
						<div class="col-md-4 col-sm-4 col-xs-4">
							<div class="inline-form-item">
								<label for="io-name">имя</label>
								<input type="text" id="io-name" name="io-name" class="inline-form-input">
								<span class="error-msg error-msg--hidden">Заполните поле!</span>
							</div>
						</div>
						<div class="col-md-4 col-sm-4 col-xs-4">
							<div class="inline-form-item">
								<label for="io-phone">телефон</label>
								<input type="text" id="io-phone" name="io-phone" class="inline-form-input">
								<span class="error-msg error-msg--hidden">Заполните поле!</span>
							</div>
						</div>
						<div class="col-md-4 col-sm-4 col-xs-4">
							<div class="inline-form-item">
								<label for="io-msg">комментарий</label>
								<input type="text" id="io-msg" class="msg-input inline-form-input" name="io-msg" />
								<span class="error-msg error-msg--hidden">Заполните поле!</span>
							</div>
						</div>
					</div>
					<button type="submit" class="btn btn--2">Оставить заявку</button>

					<input type="hidden" name="af_action" value="42ef0849f7237a7309e3f9523d6ab9cd" />
				</form>
			</div>
		</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
	$('.inline-form-input').focus(function () {
		var $this = $(this);
		$this.parent().addClass('has-focus');
		$this.siblings('.error-msg').addClass('error-msg--hidden');
	});
	$('.inline-form-input').blur(function () {
		var $this = $(this);
		if ($this.val() !== "") {
			$this.parent().find('label').addClass('hidden-label');
			if ($this.hasClass('error'))
				$this.siblings('.error-msg').addClass('error-msg--hidden');
		} else {
			$this.parent().find('label').removeClass('hidden-label');
			if ($this.hasClass('error'))
				$this.siblings('.error-msg').removeClass('error-msg--hidden');
		}
		$this.parent().removeClass('has-focus');
	});
	var fieldsets = $('fieldset');
	fieldsets.each(function () {
		var $this = $(this);
		if ($this.css('display') == 'none') {
			$this.find('input').prop('disabled', true);
		}
	});
</script>


<style>
	.inline-form-input {
		width: 100%;
		min-width: 200px;
	}

	.bottom-block-col {
		position: relative;
		padding-top: 60px;
		padding-bottom: 60px
	}

	.bottom-block-col h2 {
		margin-bottom: 40px
	}

	.bottom-block-col--2 {
		padding-left: 94px
	}

	.inline-order-wrap {
		padding-top: 40px;
		padding-bottom: 40px
	}

	.inline-frm input {
		position: relative;
		width: 284px;
		max-width: 100%;
		height: 40px;
		border: 0;
		background: transparent;
		border-bottom: 1px solid #d4d4d4;
		font-size: 18px;
		font-weight: 300;
		line-height: 40px;
		padding: 0;
		transition: all .35s ease-in-out;
		z-index: 2
	}

	.inline-frm input:focus {
		border-bottom-color: #707070
	}

	.inline-frm label {
		position: absolute;
		color: #838383;
		font-size: 10px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: .2em;
		top: 6px;
		left: 0;
		transition: all .2s ease-in-out
	}

	.inline-frm .btn {
		margin-top: 16px
	}

	.inline-form-row {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: justify;
		justify-content: space-between
	}

	.inline-form-row input {
		margin-bottom: 60px
	}

	.inline-form-item {
		position: relative;
		width: 100%
	}

	.has-focus label {
		top: -20px
	}

	label.hidden-label {
		top: -20px;
		opacity: 0
	}

	.msg-input {
		width: 100% !important
	}

	.inline-form-item {
		position: relative;
		width: 100%
	}

	.has-focus label {
		top: -20px
	}

	label.hidden-label {
		top: -20px;
		opacity: 0
	}


	form .error {
		background-color: rgba(237, 112, 112, .31);
		border-color: #ef1c23 !important;
		color: inherit !important
	}

	form .error-msg {
		position: absolute;
		top: 10px;
		right: 0;
		display: inline-block;
		height: 30px;
		padding: 0 10px;
		line-height: 30px;
		font-size: 10px;
		text-transform: uppercase;
		color: #fff;
		background: #ef1c23;
		letter-spacing: .03em;
		transform: translate3d(0, 0, 30px);
		opacity: 0;
		transition: all .35s
	}

	form .error+.error-msg {
		transform: translate3d(0, 0, 0);
		opacity: 1
	}

	form .error-msg--visible {
		transform: translate3d(0, 0, 0);
		opacity: 1
	}

	form .error+.error-msg.error-msg--hidden {
		transform: translate3d(0, 0, 30px);
		opacity: 0
	}

	::-webkit-input-placeholder {
		opacity: 1;
		transition: opacity .3s ease
	}

	::-moz-placeholder {
		opacity: 1;
		transition: opacity .3s ease
	}

	:-moz-placeholder {
		opacity: 1;
		transition: opacity .3s ease
	}

	:-ms-input-placeholder {
		opacity: 1;
		transition: opacity .3s ease
	}

	:focus::-webkit-input-placeholder {
		opacity: 0 !important
	}

	:focus::-moz-placeholder {
		opacity: 0 !important
	}

	:focus:-moz-placeholder {
		opacity: 0 !important
	}

	:focus:-ms-input-placeholder {
		opacity: 0 !important
	}

	input:required {
		box-shadow: none
	}

	input[type="submit"] {
		border: 0;
		cursor: pointer
	}

	.btn--2 {
		height: 50px;
		border: 2px solid #2245a4;
		border-radius: 25px;
		color: #2245a4;
		font-family: "Affect", Arial, sans-serif;
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 46px;
		padding: 0 45px;
		letter-spacing: .065em;
		transition: all .3s ease-in-out
	}

	.btn--2:hover {
		color: #e15539;
		border-color: #e15539
	}

	.btn--sm {
		min-width: 200px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		padding: 0 25px
	}

	.btn--close {
		width: 24px;
		height: 24px
	}
</style>