Bootstrap js форма в modal’льном окне

Итак, на сайте, с использованием Twitter Botstrap modal и JavaScript (jQuery) вам нужно реализовать форму (например, контактную)  в модальном окне. В этом посте — мой вариант реализации такой формы, в одном из проектов.

1. Подключаем необходимые библиотеки

jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Bootstrap:

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

jQuery Form:

<script src="http://malsup.github.com/jquery.form.js"></script> 

CSS:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap-responsive.css"
    rel="stylesheet">

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.css"
    rel="stylesheet">

По возможности, конечно, подключаемые библиотеки следует разместить на своем ресурсе, т.к. это может ускорить загрузку страницы более чем в 2 раза.

2. Создаем модальное окно

    <div id="ContactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 400px; ">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          ×
        </button>
        <h3 id="myModalLabel">
          Сообщение
        </h3>
      </div>
      <div class="modal-body" id="thanks" style="max-height: 600px">
          //Сюда вставляем содержимое формы
      </div>
      <div class="modal-footer">
         <input class="btn btn-success" id="submit" type="submit" value="Отправить">
      </div>
    </div>

Форма будет выглядеть примерно так:

Для открытия модального окна создадим ссылку «Контакты»

<a class="modalbox" href="#ContactModal" data-toggle="modal"> Контакты </a>

Теперь мы имеем работающее модальное окно, которое нужно наполнить содержимым.

3. Создание формы в модальном окне

Создадим форму, и добавим в нее поля: Имя, E-mail, сообщение.
Теперь наше модальное окно будет выглядеть так:

    <div id="ContactModal" class="modal hide fade" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" style="width: 400px; ">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          ×
        </button>
        <h3 id="myModalLabel">
          Сообщение
        </h3>
      </div>
      <div class="modal-body" style="max-height: 600px">
        <form class="contact" name="contact" id="ContactForm" method="post" style="width: 350px;" onsubmit="FormSendOK()">
          <label class="label" for="name">
            Ваше имя
          </label>
          <br>
          <input type="text" name="name" class="input-xlarge" style="width: 350px;">
          <br>
          <label class="label" for="email">
            Ваш E-mail
          </label>
          <br>
          <input type="email" name="email" class="input-xlarge" style="width: 350px;" required="required">
          <br>
          <label class="label" for="message">
            Введите сообщение
          </label>
          <br>
          <textarea name="message" class="input-xlarge" style="height: 170px; width: 350px; margin-bottom: -20px;"></textarea>
            </div>

          <div class="modal-footer">
            <input class="btn btn-success" id="submit" type="submit" value="Отправить">
          </div>
    </div>

Модальное окно с формой:

Теперь нужно добавить форме функционал, что бы при ее заполнении данные формы POST запросом отправлялись php скрипту, а пользователь видел подтверждение: «Ваше сообщение отправлено!».

4. Функционал формы

Тут существует множество вариантов, и наверняка у меня не самый простой, но достаточно понятный вариант.
Добавляем в страницы такой JavaScript:

    <script>
        var SendContactForm = {
            type: 'POST',
            resetForm: 'true',
            url: 'mail.php',
            success:    function(){
            }
          }

        function FormSendOK() {
            $("#ContactForm").ajaxSubmit(SendContactForm);
            $("#ContactModal").modal('hide');
            alert("Спасибо! Ваше сообщение отправлено.");
          }

    </script>

Скрипт отправляет пользовательские данные методом POST обработчику mail.php.
Скрывает и очищает модальное окно с формой и выводит уведомление «Спасибо! Ваше сообщение отправлено.»

4. PHP скрипт отправки почты

Скрипт mail.php, который отправляет письмо на почтовый ящик администратору может выглядеть примерно так:

<?php
	$name = strip_tags($_POST['name']);
	$email = strip_tags($_POST['email']);
	$message = strip_tags($_POST['message']);

if (strlen($email) > 0) {
	$to = 'ВАШ E-MAIL';
	$email_subject = "Contact form submission: $name";
	$email_body = "You have received a new message. ".
	" Here are the details:\n Name: $name \n ".
	"Email: $email\n Message \n $message";
	$headers = "From: $to\n";
	$headers .= "Reply-To: $email";
	mail($to,$email_subject,$email_body,$headers);
	} else {
    	header($_SERVER["SERVER_PROTOCOL"] . ' 400 Bad Request: id not set.');
    	header('Status: 400 Bad Request: id not set.');
	}
?>

Скрипт получает данные из формы, проверяет, заполнено ли поле e-mail, если заполнено — отправляет сообщение с данными формы на адрес администратору. Если поле e-mail не заполнено выдает ошибку 400: Некорректный или неправильно составленный http запрос.

Поздравляю! Теперь ваша контактная форма работает!