Предыдущая публикация
Настройка форм: отправляем заявки с сайта на почту без перезагрузки страницы (AJAX)
- Как настроить форму, чтобы заявки приходили на почту? - Без перезагрузки страницы? - Со всплывающим окном благодарности? Многие задают мне эти вопросы и я решил, совместить всё в один не большой туториал. В нём вы найдёте, по-шаговые действия для того, чтобы создать, отстилизовать и оживить форму обратной связи на сайте. Если появились вопросы - пишите в комментариях. Исходники прикрепляю к записи. P.S. Теперь буду иногда публиковать ещё и такие статейки, в которых будем детально разбирать всё, что там происходит. Скачать форму вы можете пройдя по ссылке: https://cloud.mail.ru/public/P8vi/AvoeiFd7sНастройка форм: отправляем заявки с сайта на почту без перезагрузки страницы (AJAX)
HTML + JS + PHP Всем привет друзья! В этой статье мы научимся настраивать формы обратной связи на сайте. В этой статье мы создадим форму, немного отстилизуем её и сделаем всплывающее окно благодарности без перезагрузки страницы. Для начала, давайте рассмотрим правильное древо html-тегов у форм. Откроем парный тег <form>, добавим туда 3 поля — имя, номер телефона, почту и сделаем кнопку отправить:00:27
<form>
<input type="text" name="name" placeholder="Введите Ваше имя">
<input type="tel" name="tel" placeholder="Введите Ваш номер">
<input type="email" name="email" placeholder="Введите Вашу почту">
<input type="submit" name="submit" value="Отправить заявку">
</form>
В результате получится следующее:Теперь предлагаю немного оформим эту форму. Добавим щепотку CSS-стилей в файл styles.css, чтобы немножечко её отстилизовать:
form {
position: relative; /* Говорит о том, что блок формы является родительским */
width: 400px; /* Ширина формы в пикселях */
max-width: 100%; /* Максимальная ширина блока формы 100%. Если окно браузера будет меньше 400px - форма будет автоматически адаптирововаться по ширину экрана и не будет выходить за её пределы. */
margin: 0 auto; /* Выравнивание по центру родителя */
}
input {
width: 100%; /* Ширина полей для ввода 100% от ширины родительского блока (400px) */
margin-bottom: 9px; /* Внешний отступ снизу */
border: 1px solid #1f1f1f45; /* Рамка вокруг поля */
border-radius: 4px; /* Закругление полей */
padding: 12px 19px; /* Внутренние отступы полей*/
}
В результате если всё сделали правильно, мы получим следующее:Теперь, чтобы оживить эту форму, нам потребуется создать PHP-обработчик, который будет отправлять введённые данные на почту. Для этого в корне сайта нужно создать файл под названием sendform.php . Создаём, открываем этот пустой документ и заносим туда следующий скрипт:
<?php
$name = trim($_POST['name']);
$phone = trim($_POST['tel']);
$email = trim($_POST['email']);
$fromMail = 'info@site.ru'; //Почта отправителя (в домене почты должен быть адрес вашего сайта)
$fromName = 'Поступила заявка с сайта'; //Заголовок письма
$emailTo = 'pochta@yandex.ru'; //Ваша почта
$subject = 'Форма обратной связи site.com';
$subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
$headers = "Content-type: text/plain; charset=\"utf-8\"\r\n";
$headers .= "From: ". $fromName ." <". $fromMail ."> \r\n";
// Содержимое письма
$body = "Получено письмо с сайта \n Имя: $name\nТелефон: $phone\Почта: $email";
// сообщение будет отправлено в случае, если поле с номером телефона не пустое
if (strlen($phone) > 0) {
$mail = mail($emailTo, $subject, $body, $headers, '-f'. $fromMail );
}
?>
Мы почти у цели! Осталось только связать нашу форму и PHP обработчик. Сделаем это простым JS-скриптом. Снова откройте HTML-разметку и перед закрывающим тегом </body> вставьте скрипт:
После того, как посетитель нажимает кнопку «отправить», скрипт начинает собирать данные из полей и отправлять их в обработчик, который в свою очередь направляет заявку к Вам на почту. Если обработчик успешно справился с задаче и отправил письмо — появляется всплывающее окно благодарности.
<script>
$(document).ready(function(){
$("form").submit(function() { // Событие отправки с формы
var form_data = $(this).serialize(); // Собираем данные из полей
$.ajax({
type: "POST", // Метод отправки
url: "sendform.php", // Путь к PHP обработчику sendform.php
data: form_data,
success: function() {
$('.popup').addClass('active');
$('.thanks').addClass('active');
}
});
event.preventDefault();
});
});
</script>
Для полноты картины добавим всплывающее окно с благодарностью после того, как заявка успешно отправляется на почту.
В нашей HTML-разметке, над JS скриптом, добавляем древо тегов всплывающего окна:<div class="popup">
<a class="close"></a> <!-- При клике происходит закрытие всплывающего окна -->
<div class="thanks">
<h2 class="popup__title">Спасибо за заявку!</h2>
<p>В ближайшее время с Вами свяжется наш специалист</p>
</div>
<div class="overlay"></div> <!-- Затемнение фона. При клике закрываем всплывающее окно -->
</div>
Чтобы всё было максимально круто, сделаем так, чтобы наше всплывающее окно изначально было скрыто, а при отправке формы оно появлялось. Для этого снова обратимся к CSS. Открываем файл стилей, и заносим туда следующее:.popup {
position: fixed; /* Задаём фиксированную позицию блоку элементов всплывающего окна */
display: none; /* Скрываем блок до отправки формы */
justify-content: center; /* Горизонтальное выравнивание элементов внутри блока */
align-items: center; /* Вертикальное выравнивание элементов внутри блока */
width: 100%; /* Ширина блока 100% от ширины родительского блока */
height: 100%; /* Высота блока 100% от высоты родительского блока */
top: 0; /* Прижимаем блок к верхнему краю родительского блока */
opacity: 0; /* Делает блок невидимым */
}
.popup.active {
display: flex; /* Делаем все дочерние элементы flex-элементами */
opacity: 1; /* Делает блок видимым на 100% */
transition: opacity 1s; /* Плавный переход в 100% видимость блока */
}
.thanks {
position: relative; /* Устанавливает родительскую позицию */
text-align: center; /* Выравнивание текста по центру */
width: 440px; /* Ширина блока 440px */
max-width: 100%; /* Максимальная ширина блока не может быть более 100% */
border: 1px solid #00000038; /* Рамка вокруг блока */
border-radius: 10px; /* Закругление блока на 4px */
background-color: #ffffffeb; /* Цвет фона */
}
a.close {
position: absolute; /* Устанавливает абсолютную позицию */
top: 15px; /* Прижимаем к верхнему краю и отступаем на 15px */
right: 15px; /* Прижимаем к правому краю и отступаем на 15px */
}
.overlay {
position: absolute; /* Устанавливает абсолютную позицию */
top: 0; /* Прижимаем блок к верхнему краю родительского блока */
width: 100%; /* Ширина блока 100% от ширины родительского блока */
height: 100%; /* Высота блока 100% от высоты родительского блока */
background-color: #000; /* Устанавливает цвет фона */
z-index: -1; /* Определяем порядок расположения блоков */
opacity: 0.3; /* Прозрачность 0.3 из 1 */
}
Давайте посмотрим результат:00:10
00:10
Если возникнут вопросы,пишите мне в ЛС и я отвечу на все ваши вопросы.
Следующая публикация
Нет комментариев