Простая форма обратной связи на Ajax и PHP
В этой статье будет рассмотрено создание простой формы обратной связи без перезагрузки страницы с помощью AJAX.
1. Разметка формы
Здесь следует обратить внимание что атрибут action не указан, так как отправка будет происходить на этой же странице.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form class="callback form" > <div class="callback__title">Заказать звонок</div> <div class="form__line"> <input type="text" name="name" class="form__field" id="callback__name" autocomplete="off" required><label for="callback__name" class="form__label">Имя:</label> </div> <div class="form__line"> <input type="tel" name="phone" class="form__field" id="callback__phone" autocomplete="off" required><label for="callback__phone" class="form__label">Телефон:</label> </div> <input type="submit" value="отправить" class="form__submit"> </form> |
2. Стили
|
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 |
.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; } |
3. Скрипт ajax для отправки формы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(".callback").submit(function() { if ($('#callback__name').val().length < 1 || $('#callback__phone').val().length < 1 ) { alert('Заполните все поля!'); } else { var form_data = $('.callback').serialize(); $.ajax({ type: "POST", url: "/form/callback.php", data: form_data, success: function() { $('.callback').html('<h3 class="callback__title">Спасибо.</h3><p class="form__label">В ближайшее время мы с Вами свяжемся</p>'); } }); } return false; }); |
Данный скрипт вешает событие отправки формы на форму с классом callback. Если кнопка отправки нажата проверяется заполнены ли поля с соответствующими 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().