375(33)640-98-68
375(29)935-83-38

Обратный звонок на Bootstrap 4

17.12.2019
Обратный звонок на Bootstrap 4

Выкидываю готовое решение для быстрого подключение Обратного звонка без перезагрузки страницы с выводом сообщение true/false.

Для начало должно быть подключен Bootstrap.

Идём в подвал сайта и вставляем

Сам дизайн модального окна:

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Заказать звонок менеджера</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <div class="messages"></div>
        <span class="col-lg-4">Ваш телефон</span>
        <input class="col-lg-7" id="user_phone" type="text" name="phone" placeholder="+375">
      </div>
      <div class="modal-footer">
        <input type="button" value="Отправить" id="btn_submit" />
      </div>
    </div>
  </div>
</div>
Вызов модального окна:
<script>
    $('#myModal').on('shown.bs.modal', function () {
      $('#myInput').trigger('focus')
    })    
</script>

Ну и конечно кнопка наша:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
 Заказать обратный звонок
</button>

Всё что выше написано — это относится только к Bootstrap.

Для того чтоб форма работала нужно подключить 2 скрипта:

  1. Jquery ajax отправка
  2. Php обработчик

Опишу подробнее про „Jquery ajax отправка“

<script>
    $(document).ready(function(){
        $('#btn_submit').click(function(){
            // собираем данные с формы
            var user_phone 	 = $('#user_phone').val();
            // отправляем данные
            $.ajax({
                url: "action.php", // куда отправляем
                type: "post", // метод передачи
                dataType: "json", // тип передачи данных
                data: { // что отправляем
                    "user_phone": 	user_phone
                },
                // после получения ответа сервера
                success: function(data){
                    $('.messages').html(data.result); // выводим ответ сервера
                }
            });
        });
    });
</script>

В данном случаи отправка идёт с 1 input — user_phone

Можно добавить несколько штук, по примеру, тогда прийдётся и в форме добавить input с ID и добавить в php обработчик (action.php).

Сам код php выглядит таким образом:

<?php
	$msg_box = ""; // в этой переменной будем хранить сообщения формы
	$errors = array(); // контейнер для ошибок
	// проверяем корректность полей
	if($_POST['user_phone'] == "") 	 $errors[] = "Поле 'Телефон' не заполнено!";

	// если форма без ошибок
	if(empty($errors)){		
		// собираем данные из формы
		$message  = "Ваш телефон: " . $_POST['user_phone'] . "<br/>";
		send_mail($message); // отправим письмо
		// выведем сообщение об успехе
		$msg_box = "<span style='color: #1a5bd2;text-align: center;display: block;padding-bottom: 15px;'>Сообщение успешно отправлено!</span>";
	}else{
		// если были ошибки, то выводим их
		$msg_box = "";
		foreach($errors as $one_error){
			$msg_box .= "<span style='color: #d21a1a;text-align: center;display: block;padding-bottom: 15px;'>$one_error</span><br/>";
		}
	}

	// делаем ответ на клиентскую часть в формате JSON
	echo json_encode(array(
		'result' => $msg_box
	));
	
	
	// функция отправки письма
	function send_mail($message){
		// почта, на которую придет письмо
		$mail_to = "ВАША ПОЧТА"; 
		// тема письма
		$subject = "Заказали звонок";
		
		// заголовок письма
		$headers= "MIME-Version: 1.0\r\n";
		$headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
		$headers .= "From: Тестовое письмо <no-reply@test.com>\r\n"; // от кого письмо
		
		// отправляем письмо 
		mail($mail_to, $subject, $message, $headers);
	}

Где $mail_to = "ВАША ПОЧТА"; — ввести свою почту.

Вот и всё! При нажатие на кнопку, вылазит модальное окно, где человек ввёл телефон и без перезагрузки отправилось письмо на почту. Если не ввёл телефон, вылезла ошибка.

Рейтинг: 5/5 - 2 голосов

Комментарии (0)




Разрешённые теги: <b><i><br>Добавить новый комментарий:


Мы не пытаемся кричать что мы лучшие, просто делаем работу которая нравится.

X

КОНТАКТЫ:

+375(33)640-98-68

+375(29)935-83-38