Красивая, анимированная форма обратной связи для сайта на jQuery

8 years ago77246Ян Александров
Темы Wordpress — jQuery — Красивая, анимированная форма обратной связи для сайта на jQuery

Добрый день. Сегодня хотел поделиться анимированной формой обратной связи. Наша разработка будет простой, всего 3 поля: поле ввода имени, почты и для короткого сообщения. Форму будем показывать при клике по зафиксированной на экране кнопке. Скачать архив.

Это интересно. Ради любопытства исследовал 18 случайных интернет-магазинов с формой обратной связи. Оказалось, что практически все формы состояли только из вышеупомянутых полей.

Пример работы формы

В архиве вы найдете только заготовку, функционал нужно натягивать. Собственно, суть поста в основном направлен на то, чтобы донести, как создать анимированную форму. Описывать анимацию не буду, лучше смотрите gif или скачайте архив.

Шаг 1: верстаем

Разместите перед закрывающим тегом body.

<div id="container">

	<!-- кнопка -->
	<div class="button-wrapper">
		<div class="layer"></div>
		<button class="main-button">
			<div class="ripple"></div>
		</button>
	</div>

	<!-- форма -->
	<div class="layered-content">
		<button class="close-button">×</button>
		<div class="form-box">
			<div class="mail"></div>
			<h2>ОСТАВЬТЕ ЗАЯВКУ</h2>
			<label>Ваше имя
				<input id="name" class="txt" name="name" type="name" />
			</label>
			<label>Ваш Email
				<input id="email" class="txt" name="email" type="email" />
			</label>
			<label>Текст сообщения
				<textarea id="msg" class="txtarea" name="msg"></textarea>
			</label>
			<button class="send">	
				<div class="text">Отправить</div>
				<div class="loader"></div>
				<div class="done">Отправлено</div>
			</button>
		</div>
	</div>
	
</div>

Шаг 2: оформляем форму и готовим анимацию

Анимацию привязываем к классам, которые мы будем добавлять элементам через jQuery.

button:focus {
	outline: none;
}
#container {
	width: 100%;
	height: 100vh;
	top: 0;
	bottom: 0;
	min-height: 300px;
	position: relative;
	overflow: hidden;
}
.button-wrapper {
	width: 50px;
	height: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	right: 20px;
	bottom: 20px;
}

button {
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
	z-index: 9;
	position: relative;
}
.main-button {
	background: #ff2670;
	-webkit-align-self: flex-end;
	-ms-flex-item-align: end;
	align-self: flex-end;
}
.ripple {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	border-radius: 25%;
	z-index: -9;
	background: transparent;
	border: 1px solid #ff2670;
	-webkit-transform: scale(.5);
	-ms-transform: scale(.5);
	transform: scale(.5);
	-webkit-transition: .3s all ease;
	transition: .3s all ease;
	opacity: 1;
	max-width: 50px;
	max-height: 50px;
	padding: 5px;
	background-position: center;
	background-size: 45px;
	background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iZW1haWwiPgoJCTxwYXRoIGQ9Ik00NTksNTFINTFDMjIuOTUsNTEsMCw3My45NSwwLDEwMnYzMDZjMCwyOC4wNSwyMi45NSw1MSw1MSw1MWg0MDhjMjguMDUsMCw1MS0yMi45NSw1MS01MVYxMDIgICAgQzUxMCw3My45NSw0ODcuMDUsNTEsNDU5LDUxeiBNNDU5LDE1M0wyNTUsMjgwLjVMNTEsMTUzdi01MWwyMDQsMTI3LjVMNDU5LDEwMlYxNTN6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}
.rippling {
	-webkit-animation: .3s rippling 1;
	animation: .3s rippling 1;
	-moz-animation: .3s rippling 1;
}
@-webkit-keyframes rippling {
	25% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(2);
		transform: scale(2);
		opacity: 0;
	}
}
@-moz-keyframes rippling {
	25% {
		-moz-transform: scale(1.5);
		transform: scale(1.5);
		opacity: 1;
	}
	100% {
		-moz-transform: scale(2);
		transform: scale(2);
		opacity: 0;
	}
}
@keyframes rippling {
	25% {
		transform: scale(1.5);
		opacity: 1;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
.layer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	background: #ff2670;
	border-radius: 50%;
	z-index: -99;
	pointer-events: none;
}
.button-wrapper.clicked {
	-webkit-transform: rotate(90deg) translateY(-96px);
	-ms-transform: rotate(90deg) translateY(-96px);
	transform: rotate(90deg) translateY(-96px);
	right: 0;
	bottom: 0;
	-webkit-transition: .3s all ease .6s;
	transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
	opacity: 0;
	-webkit-transition: .3s all ease .3s;
	transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
	-webkit-transform: scale(100);
	-ms-transform: scale(100);
	transform: scale(100);
	-webkit-transition: 1.75s all ease .9s;
	transition: 1.75s all ease .9s;
}
.layered-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	opacity: 0;
}
.layered-content.active {
	opacity: 1;
}
.close-button {
	background: white;
	position: absolute;
	right: 20px;
	top: 20px;
	color: #ff2670;
	font-size: 30px;
}
.layered-content.active .close-button {
	-webkit-animation: .5s bounceIn;
	animation: .5s bounceIn;
}
.layered-content .content img {
	width: 80px;
	-webkit-shape-outside: 80px;
	shape-outside: 80px;
	border-radius: 50%;
	display: block;
	margin: 0 auto 15px;
	padding: 10px;
	box-sizing: border-box;
	background: white;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
	-webkit-transition: .3s all ease;
	transition: .3s all ease;
}
.form-box{
	width: 100%;
	margin: 0 auto;
	max-width: 430px;
}
.form-box h2{
	color: #fff;
	margin: 10px 0;
	font-weight: 900;
	font-size: 33px;
    text-align: center;
}
.form-box input, .form-box textarea{
	width: 100%;
	float: left;
	padding: 10px;
	box-sizing: border-box;
	margin-bottom: 5px;
	border-radius: 3px;
	border: 0px;
}
.form-box label{
	padding: 5px 10px;
	float: left;
	margin-bottom: 10px;
	font-size: 12px;
	color: #fff;
	box-sizing: border-box;
	width: 100%;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	background: rgba(255, 255, 255, 0.25);
}
.form-box p {
	color: white;
	font-weight: 300;
	text-align: center;
	line-height: 1.5;
}
.form-box p a {
	font-size: 12px;
	background: white;
	padding: 2.5px 5px;
	color: #ff2670;;
	text-decoration: none;
	border-radius: 50px;
	display: inline-block;
	margin-left: 1.5px;
}
.form-box label {
	opacity: 0;
}
.layered-content.active .form-box label {
	opacity: 1;
	top: 0;
	-webkit-transition: .25s all ease 0.25s;
	transition: .25s all ease 0.25s;
}

<!-- кнопка отправить -->
button {
	outline: 0;
}
button.active {
	outline: 0;
}
button.send {
	border: 2px solid #fff;
	color: white;
	width: inherit;
	height: inherit;
	border-radius: 50px;
	padding: 15px 80px;
	background: transparent;
	position: relative;
	overflow: hidden;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-top: 35px;
}
button.send .text.active {
	-webkit-transform: translateY(-350%) scale(0);
	transform: translateY(-350%) scale(0);
	-webkit-transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64);
	transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64);
}
button.send.active {
	padding: 0px 80px;
	-webkit-transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88);
	transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88);
}
button.send .loader {
	position: absolute;
	width: calc(0% - 4px);
	height: calc(100% - 4px);
	background-color: #fff;
	left: 2px;
	top: 2px;
	border-radius: 50px;
}
button.send .loader.active {
	width: calc(100% - 4px);
	-webkit-transition: 1.3s ease-in-out;
	transition: 1.3s ease-in-out;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
button.send .done {
	color: #232323;
	font-weight: 900;
	margin-top: -20px;
	-webkit-transform: translateY(300%) scale(0);
	transform: translateY(300%) scale(0);
}
button.send .text{
	font-weight: 700;
	text-transform: uppercase;
}
button.send .done.active {
	-webkit-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
	-webkit-transition: 0.4s cubic-bezier(0.34, -0.61, 1, 0.64);
	transition: 0.4s cubic-bezier(0.34, -0.61, 1, 0.64);
	color: #232323;
	text-transform: uppercase;
}
button.send.finished {
	padding: 15px 80px;
	-webkit-transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88);
	transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88);
}
.mail{
	max-width: 256px;
	max-height: 256px;
	margin: 0 auto;
	width: 100%;
	height: 100px;
	background-repeat: no-repeat;
	background-size: 100px;
	background-position: center;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDQuMTI0IDUwNC4xMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwNC4xMjQgNTA0LjEyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiNEMDdDNDA7IiBkPSJNMCwyMDAuODYyTDI1Mi4wNjIsNTEuMmwyNTIuMDYyLDE0OS42NjJ2MjIwLjU1NEgwVjIwMC44NjJ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNFRkVGRUY7IiBkPSJNNTUuMTM4LDExLjgxNWgzOTMuODQ2YzguNjY1LDAsMTUuNzU0LDcuMDg5LDE1Ljc1NCwxNS43NTR2Mjc1LjY5MiAgYzAsOC42NjUtNy4wODksMTUuNzU0LTE1Ljc1NCwxNS43NTRINTUuMTM4Yy04LjY2NSwwLTE1Ljc1NC03LjA4OS0xNS43NTQtMTUuNzU0VjI3LjU2OUMzOS4zODUsMTguOTA1LDQ2LjQ3NCwxMS44MTUsNTUuMTM4LDExLjgxNSAgeiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojMjZBNkQxOyIgZD0iTTQxNS45MDIsNDMuMzIzbDI1LjIwNi0zMS41MDhoNy44NzdjOC42NjUsMCwxNS43NTQsNy4wODksMTUuNzU0LDE1Ljc1NHYxNS43NTRINDE1LjkwMnogICBNMjExLjEwMiw0My4zMjNsMjUuMjA2LTMxLjUwOGg1NS4xMzhMMjY2LjI0LDQzLjMyM0gyMTEuMTAyeiBNMzkuMzg1LDQzLjMyM1YyNy41NjljMC04LjY2NSw3LjA4OS0xNS43NTQsMTUuNzU0LTE1Ljc1NGgzOS4zODUgIEw2OS4zMTcsNDMuMzIzSDM5LjM4NXoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0VGQzc1RTsiIGQ9Ik01MDQuMTIzLDQ2OC42NzdjMCwxMi45OTctMTAuNjM0LDIzLjYzMS0yMy42MzEsMjMuNjMxSDIzLjYzMUMxMC42MzQsNDkyLjMwOSwwLDQ4MS42NzQsMCw0NjguNjc3ICBWMjAwLjg2MmwyNTIuMDYyLDExMC4yNzdsMjUyLjA2Mi0xMTAuMjc3djI2Ny44MTVINTA0LjEyM3oiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0U4QzE1QjsiIGQ9Ik01MDQuMTIzLDQ2OC42NzdjMCwxMi45OTctMTAuNjM0LDIzLjYzMS0yMy42MzEsMjMuNjMxSDIzLjYzMUMxMC42MzQsNDkyLjMwOSwwLDQ4MS42NzQsMCw0NjguNjc3ICB2LTQ3LjI2Mmw1MDQuMTIzLTIyMC41NTRWNDY4LjY3N3oiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0Q2RDlEQjsiIGQ9Ik0xNjAuMjk1LDE1MS42MzFsMy4xNTEsMTYuNTQybC0yNS4yMDYtMzkuMzg1bC0zNS40NDYsNTUuMTM4Yy0wLjM5NCw1LjEyLDIyLjQ0OSw5LjA1OCw1MC44MDYsOS4wNTggIHM1MS4yLTMuOTM4LDUxLjItOS4wNThsLTMxLjExNC00Ni4wOEMxNzMuNjg2LDEzNy44NDYsMTYwLjI5NSwxNTEuNjMxLDE2MC4yOTUsMTUxLjYzMXogTTE2My40NDYsMTI5Ljk2OSAgYzUuNTE0LDAsOS44NDYtNC4zMzIsOS44NDYtOS44NDZzLTQuMzMyLTkuODQ2LTkuODQ2LTkuODQ2cy05Ljg0Niw0LjMzMi05Ljg0Niw5Ljg0NlMxNTcuOTMyLDEyOS45NjksMTYzLjQ0NiwxMjkuOTY5eiAgIE0yNDQuMTg1LDEyNi4wMzFoMTU3LjUzOGM0LjMzMiwwLDcuODc3LTMuNTQ1LDcuODc3LTcuODc3cy0zLjU0NS03Ljg3Ny03Ljg3Ny03Ljg3N0gyNDQuMTg1Yy00LjMzMiwwLTcuODc3LDMuNTQ1LTcuODc3LDcuODc3ICBTMjM5Ljg1MiwxMjYuMDMxLDI0NC4xODUsMTI2LjAzMXogTTQwMS43MjMsMTQxLjc4NUgyNDQuMTg1Yy00LjMzMiwwLTcuODc3LDMuNTQ1LTcuODc3LDcuODc3czMuNTQ1LDcuODc3LDcuODc3LDcuODc3aDE1Ny41MzggIGM0LjMzMiwwLDcuODc3LTMuNTQ1LDcuODc3LTcuODc3QzQwOS42LDE0NS4zMjksNDA2LjA1NSwxNDEuNzg1LDQwMS43MjMsMTQxLjc4NXogTTM2Mi4zMzgsMTczLjI5MkgyNDQuMTg1ICBjLTQuMzMyLDAtNy44NzcsMy41NDUtNy44NzcsNy44NzdzMy41NDUsNy44NzcsNy44NzcsNy44NzdoMTE4LjE1NGM0LjMzMiwwLDcuODc3LTMuNTQ1LDcuODc3LTcuODc3ICBDMzcwLjIxNSwxNzYuODM3LDM2Ni42NzEsMTczLjI5MiwzNjIuMzM4LDE3My4yOTJ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNFMjU3NEM7IiBkPSJNMzEzLjUwMiw0My4zMjNsMjUuMjA2LTMxLjUwOGg1NS4xMzhMMzY4LjY0LDQzLjMyM0gzMTMuNTAyeiBNMTA4LjcwMiw0My4zMjNsMjUuMjA2LTMxLjUwOGg1NS4xMzggIEwxNjMuODQsNDMuMzIzSDEwOC43MDJ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

Шаг 3: добавляем jQuery

jQuery(function(){
    jQuery('.main-button').click(function(){
		$('.button-wrapper').addClass('clicked');
		setTimeout(function(){
			$('.layered-content').addClass('active');
		}, 1500);
	});
	$('.close-button').on('click', function(){
		$('.button-wrapper').removeClass('clicked');
		$('.layered-content').removeClass('active');
	});
	// классы для кнопки отправить
	$('.send').on('click', function(){
		$('.text').addClass('active');
		$('.send').addClass('active');
		$('.loader').addClass('active');
		$('.send').delay(1700).queue(function(){
    	    $(this).addClass('finished').clearQueue();
		});
	
		$('.done').delay(1600).queue(function(){
    		$(this).addClass('active').clearQueue();
		});
	})
});

Хочется отметить, что форма будет прекрасно смотреться, если будет работать на ajax – без перезагрузки.

6 comments to post “"Красивая, анимированная форма обратной связи для сайта на jQuery"”
  • Ян Александров
    Kowalski9 Aug 2017 18:51

    А как вы сделали твиттер-лайки у себя на сайте? 😀

    Reply
    • Ян Александров
      Yan AlexandrovAuthor9 Aug 2017 19:31

      В формате коментария врядли получится уложиться. Думаю, в ближайшее время распишу.

      Reply
      • Ян Александров
        Kowalski10 Aug 2017 05:45

        Спасибо за ответ! Буду следить за новостями.

  • Ян Александров
    Явер12 Aug 2017 19:18

    Красивая форма. Спасибо

    Reply
  • Ян Александров
    Winter http://dns-shop.ru4 Oct 2021 16:37

    Winter

    Reply
  • Ян Александров
    Evans https://okezone.com/7 Oct 2021 16:56

    Evans

    Reply
Leave a Reply

B I PHP JS

Made with ❤ by CodyShop