Всплывающая форма с отправкой через Ajax
В этой статье рассмотрим простой способ создания модального окна внутри которого будет форма обратной связи, отправляющая данные с помощью AJAX.
Эффект всплывания будем делать с помощью fancybox. Как подключить fancybox подробно рассказано в статье «Подключение и настройка FancyBox 3». И конечно не забываем подключить библиотеку jQuery.
1. Для начала следует создать кнопку и повесить на нее fancybox:
|
1 |
<p><a class="border-btn" data-fancybox="" data-src="#form__popup">Оформить заявку</a></p> |
Стили кнопки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.border-btn{ text-decoration: none; outline: none; display: inline-block; padding: 20px 30px; margin: 10px 20px; position: relative; color: #4bf; border: 1px solid #4bf6; background: none; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; } .border-btn:before, .border-btn:after { content: ""; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; } .border-btn:before { bottom: 0; left: 0; border-left: 1px solid #4bf; border-top: 1px solid #4bf; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; } .border-btn:after { top: 0; right: 0; border-right: 1px solid #4bf; border-bottom: 1px solid #4bf; transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s; } .border-btn:hover:before, .border-btn:hover:after{ height: 100%; width: 100%; opacity: 1; } .border-btn:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;} .border-btn:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;} .border-btn:hover {background: rgba(255,255,255,.2);} |
2. После этого создать саму форму:
|
1 2 3 4 5 |
<form id="form__popup" class="form"> <div class="callback__title">Оформить заявку</div> <div class="form__line"><input id="callback__name" class="form__field" autocomplete="off" name="name" required="" type="text" /><label class="form__label" for="callback__name">Имя:</label></div> <div class="form__line"><input id="callback__phone" class="form__field" autocomplete="off" name="phone" required="" type="tel" /><label class="form__label" for="callback__phone">Телефон:</label></div> <input class="form__submit" type="submit" value="отправить" /></form> |
Атрибут action не указан, так как отправка будет происходить на этой же странице.
В стилях данную форму необходимо скрыть:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
#form__popup{ display: none; } .callback{ max-width: 439px; padding: 42px 30px 54px; margin: 0 auto; border: 2px solid #085079; position: relative; } .callback__title{ margin: 0 0 60px; text-align: center; color: #085079; font-size: 30px; font-weight: normal; } .form__line{ position: relative; margin-bottom: 40px; } .form__field{ display: block; width: 100%; padding: 0 10px; line-height: 40px; background: none; border-width: 0; border-bottom: 2px solid #085079; transition: all 0.2s ease; } .form__field:focus { outline: 0; border-color: #F77A52; } .form__label{ position: absolute; left: 13px; color: #9d959d; font-size: 20px; font-weight: 300; transform: translateY(-46px); transition: all 0.2s ease; } .form__line .form__field:focus + .form__label, .form__line .form__field:valid + .form__label { transform: translateY(-60px); margin-left: -14px; font-size: 14px; font-weight: 400; outline: 0; border-color: #F77A52; color: #F77A52; } .form__submit{ width: 100%; max-width: 245px; padding: 0; line-height: 42px; background: #085079; border-width: 0; color: white; font-size: 20px; margin: 0 auto; display: block; cursor: pointer; } |
Форма будет всплывать по клику на кнопку благодаря тому, что в атрибуте data-src кнопки мы указали id формы которая должна всплывать.
3. Теперь следует написать скрипт который будет отправлять форму без перезагрузки и плавно скрывать ее после отправки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$("#form__popup").submit(function() { if ($('#callback__name').val().length < 1 || $('#callback__phone').val().length < 1 ) { alert('Заполните все поля!'); } else { var form_data = $('#form__popup').serialize(); $.ajax({ type: "POST", url: "/form/callback.php", data: form_data, success: function() { $('#form__popup').html('<h3 class="callback__title">Спасибо.</h3><p class="form__label">В ближайшее время мы с Вами свяжемся</p>'); setTimeout("$('#form__popup').hide()", 2000); setTimeout("$('.fancybox-bg').hide()", 2000); } }); } return false; }); |
Данный скрипт вешает событие отправки формы на форму с идентификатором form__popup. Если кнопка отправки нажата, проверяется заполнены ли поля с соответствующими id и если все хорошо то выполняется ajax запрос.
В настройках запроса, для url нужно указать путь к файлу с обработчиком формы. А для success прописать алгоритм действий в случае успешной отправки формы. В нашем случае скрываются все элементы внутри формы и заменяются на фразу с благодарностью. Спустя некоторое время форма плавно исчезает.
4. В последнюю очередь создаем простой обработчик формы на стороне сервера:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if(!empty($_POST['name']) and !empty($_POST['phone'])) { $name = trim(strip_tags($_POST['name'])); $phone = trim(strip_tags($_POST['phone'])); mail("test@gmail.com", "Запрос звонка с test.ru", "От: '.$name.' <br> Телефон: '.$phone.' ","Content-type:text/html;charset=utf-8"); exit; } ?> |
Здесь идет проверка формы на знаполненность полей и отправка данных функцией mail().