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

Twitter Bootstrap modal
Интернет
9

Итак, на сайте, с использованием 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>

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

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

<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>

Модальное окно с формой:
Контактная форма в модальном окне Bootstrap

Теперь нужно добавить форме функционал, что бы при ее заполнении данные формы 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 запрос.

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

  • Николай

    Почему то не работает, не срабатывает функция javascript (

  • Константин

    Классно! У меня все работает!
    Не мешало бы добавить к статье описание подключения актуальных библиотек.
    Спасибо!

    • admin

      Константин, поздравляю! Ваши предложения по библиотекам?

  • Mikola35

    Неплохо было бы демо посмотреть

    • ablex

      К сожалению, недавно убил сайт за ненадобностью, где это работало. Сейчас негде показать.

      • Mikola35

        На сайты довольно часто приходится встраивать формы и если для известных cms есть модули, то для таких фрэймворков как bootstrap толкового решения нет.

        Давай сделаем сервис генерации форм для bootstrap . Где бы можно было и сверстать форму http://minikomi.github.io/Bootstrap-Form-Builder и настроить адрес на который отправлять, тему и прочее, то что обычно в php настраивается.

        Я — дизайн,верстка, продвижение, менеджмент.
        Ты — backend

        мой скайп: mikola400

        • ablex

          Думаешь, кто-то будет за такой сервис платить? Те, кто начинают работать с bootstrap примерно понимают, что делают.
          Некоммерческая идея.

          • Mikola35

            Пока в голову приходит четыре модели монетизации.
            1. Простая форма — бесплатно. Сложная (инпуты + чекбоксы+выпадающие списки+капча) — платно.
            2. Это лимит отправки формы. Т.е. до 100 (цифра с потолка) заявок — бесплатно, потом по тарифу.
            3. Можно ещё сделать копирайт. И убирать его только за деньги.
            4. Можно заморочиться crm

            Для получения первых пользователей я могу статью на habrahabr написать

          • ablex

            На первый взгляд — не полетит. Есть сепвисы заполнения заявлений. Сложные формы проще делать там. Мне идея не близка — не возьмусь. Попробуй на хабре найти партнеров.
            В любом случае, нужно искать подобные сервисы у нас и зарубежем, анализировать, писать бизнес-план. Потом уже смотреть, востребовано, или нет.

Тренды e-mail маркетинга 2018
Бизнес
6 главных трендов e-mail маркетинга в 2018 году

К чему готовиться Digital специалистам и E-mail маркетологам в 2018 году? С учетом каких тенденций строить план развития E-mail канала? Поделиться «6 главных трендов e-mail маркетинга в 2018 году» FacebookTwitterGoogle+LinkedInVKontakteE-mail Интересное по теме:Домашний сервер — что можно сделать из старого компьютера?Верстка рассылки e-mail одним изображениемМультифон-фантом или пособие неудачникаРассылки купонных сайтов: …

Magento2 API: Добавление категорий товаров, товаров и их атрибутов по API
Программирование
1
Magento 2.1: Добавление категорий и товаров по API

Недавно хотел сделать один из проектов интернет-магазина, используя CMS Magento 2. Одна из задач проекта была возможность загрузки товаров и категорий из XML поставщика на сайт по API. Эта задача была реализована. И т.к. в интернете возникает множество вопросов, каким образом загружать товары в Magento 2 по API, делюсь своими …

Выявление случаев мошенничества в СРА
Интернет
Анализ трафика CPA партнеров в Google Analytics. Борьба с фродом

Для многих рекламодателей CPA сети, это не только большие возможности, но и большая головная боль. Да, в CPA сетях может быть много «фрода» и некачественного траффика. Но это не значит, что CPA плох сам по себе. Просто, при работе с любым рекламным каналом есть свои нюансы. В CPA, это необходимость …

Top