Выплывающая форма обратной связи

Готовая форма обратной связи с отправкой сообщения через ajax. Данная форма будет выплывать с правой стороны через 5 секунд после полной загрузки страницы. Форма написана на jQuery + PHP + HTML + CSS.

HTML код для формы

Форма состоит из поля телефона и кнопки отправки. Сам контент разделён на две части .conteinerForm, эта часть хранит в себе форму и .messageGoodSend — блок в котором написано сообщение о удачной отправки.

<div class="fixedCallBackForm_conteiner">
	<div class="butExit">
		<svg viewBox="5 5 25 20" xmlns="http://www.w3.org/2000/svg"><title></title><g data-name="Layer 2" id="Layer_2"><path d="M10.1,23a1,1,0,0,0,0-1.41L5.5,17H29.05a1,1,0,0,0,0-2H5.53l4.57-4.57A1,1,0,0,0,8.68,9L2.32,15.37a.9.9,0,0,0,0,1.27L8.68,23A1,1,0,0,0,10.1,23Z"></path></g></svg>
	</div>

	<div class="conteinerForm active">
		<div class="headingForm">Нужна помощь?</div>
		<div class="dopHeadingForm">Закажите обратный звонок и мы перезвоним для консультации<br>через 5 мин.</div>
		<form id="formFixedCallBack" onsubmit="return false" action="">
			<input type="hidden" name="pageUrl" value="<?=$GLOBALS['urlThisPage'] ?>">
			<input type="tel" name="phone" placeholder="Ваш телефон">
			<input class="button" type="submit" value="Отправить">
		</form>
	</div>
	
	<div class="messageGoodSend">
		<div class="textContent">
			<div class="headingForm">Спасибо!</div>
			<div class="dopHeadingForm">Сообщение успешно отправлено, в ближайшее время менеджеры свяжутся с вами по указанному номеру телефона</div>
		</div>
	</div>

</div>

CSS стили для формы

В качестве анимации для открытия и закрытия модального окна, я использую эффект slide.

Для получения кодов анимации, воспользуйтесь моим удобным конструктором — https://prog-time.ru/css_animation_generator/

.fixedCallBackForm_conteiner {
	transform: translateX(100%);
	width: 300px;
    position: fixed;
    right: 0px;
    top: 50%;
    padding: 25px 20px 40px;
    background: #fff;
	border-radius: 5px 0 0 5px;
	box-shadow: 0 0 8px rgb(0 0 0 / 30%);
	z-index: 1000;
}
.fixedCallBackForm_conteiner .butExit {
    position: absolute;
    right: 10px;
    top: 15px;
    cursor: pointer;
    transform: rotate(180deg);
    height: fit-content;
}
.fixedCallBackForm_conteiner .butExit svg {
    width: 45px;
    height: 20px;
}
.fixedCallBackForm_conteiner .butExit:hover svg {
	height: 20px;
}
.fixedCallBackForm_conteiner .conteinerForm {
	display: none;
}
.fixedCallBackForm_conteiner .conteinerForm.active {
	display: block;
}
.fixedCallBackForm_conteiner .messageGoodSend {
	display: none;
}
.fixedCallBackForm_conteiner .messageGoodSend.active {
	display: block;
}
.fixedCallBackForm_conteiner .messageGoodSend .textContent {
	text-align: center;
}   

@-webkit-keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
}
@keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(0);
				transform: translateX(0);
	}
	100% {
		visibility: hidden;
		-webkit-transform: translateX(100%);
				transform: translateX(100%);
	}
}
.slideOutRight {
	-webkit-animation-name: slideOutRight;
		animation-name: slideOutRight;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
      visibility: visible;
    }
  
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
				transform: translateX(100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateX(0);
				transform: translateX(0);
	}
}
.slideInRight {
	-webkit-animation-name: slideInRight;
		animation-name: slideInRight;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
}


.fixedCallBackForm_conteiner .headingForm {
	font-weight: 500;
	font-size: 20px;
    margin-bottom: 10px;
}
.fixedCallBackForm_conteiner .dopHeadingForm {
    line-height: 1.7rem;
    margin-bottom: 10px;
}
.fixedCallBackForm_conteiner form#formFixedCallBack {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.fixedCallBackForm_conteiner input[type="text"], input[type="tel"] {
    border: 1px solid #000;
    padding: 7px 13px;
    border-radius: 3px;
}

jQuery скрипт для формы

Здесь имеется несколько обработчиков для данной формы. Первый обрабатывает нажатие на стрелку и закрывает форму.

Второй обработчик нужен для проверки заполненности формы и отправки письма в PHP обработчик методом ajax запроса.

$(document).ready(function() {
    if($(".fixedCallBackForm_conteiner")) {

        $(".fixedCallBackForm_conteiner .butExit").on("click", function() {
            $(".fixedCallBackForm_conteiner").addClass("slideOutRight")
        })

        $(".fixedCallBackForm_conteiner #formFixedCallBack").on("submit", function() {
            let form = $(this)
            let formConteiner = $(".fixedCallBackForm_conteiner")
            let dataForm = form.serialize()
            $.post('/ajx/fixedCallBackForm.php', dataForm, function(data){
                formConteiner.find(".conteinerForm").removeClass("active")
                formConteiner.find(".messageGoodSend").addClass("active")

                setTimeout(() => {
                    $(".fixedCallBackForm_conteiner").removeClass("slideInRight")
                    $(".fixedCallBackForm_conteiner").addClass("slideOutRight")
                }, 5000);
            });

        })
        setTimeout(() => {
            $(".fixedCallBackForm_conteiner").addClass("slideInRight")
        }, 5000);
    }

})