Страницы

среда, 30 октября 2013 г.

Bootstrap 3 Modal Ajax Contact Form.

Как сделать модальную форму обратной связи. Моя версия. На фронтэнде используем Bootstrap 3 + jQuery. Похожим образом реализовал в одном проекте. Для бэкэнда напишем скрипт на Google Apps Script. Возрастная группа потребителей следующего далее материала - 7+, в смысле изложено более чем доступно. Попытайтесь повторить это дома.


Начнем с бэкэнда. Идем по адресу https://script.google.com/, создаем пустой проект:

Пишем код скрипта:
function doPost(e) {  
  MailApp.sendEmail('Ваш_Email@gmail.com', 'Feed from mysite.ru', 'My super message',{      
    htmlBody: '<p>from: ' + 'me' + '</p>' + '<p>email: ' + 'my@gmail.com' + '</p>' + 
    '<p>message: ' + 'Hello, world!' + '</p>'
  });
}

Сохраняем, назовем как-нибудь скрипт:

Выполняем:

Авторизуем скрипт:


Проверяем почту:

Все ОК. Сохраняем версию проекта:



Разворачиваем веб-приложение:

Выбираем уровень доступа - "Все, включая анонимных пользователей":

Копируем URL веб-приложения - пригодится:

Переходим к фронтэнду. Качаем Bootstrap 3 и jQuery. Пишем HTML-код нашей формы:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">    
    <title>Contact Form</title>    
    <link href="bootstrap.min.css" rel="stylesheet">    
  </head>
  <body>
    <div class="container" style="text-align: center; margin-top: 10px;">
      <a href="#contact" data-toggle="modal" class="btn btn-primary btn-lg">Большая синяя кнопка</a>
    </div>
    <div id="contact" class="modal fade" tabindex="-1", role="dialog", aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal", aria-hidden="true">×</button>
            <h3 class="modal-title">Контакты:</h3>
          </div>
          <form id="contact-form" class="modal-body" role="form">
            <div class="form-group">
              <input class="form-control input-lg" type="text", placeholder="Ваше имя", required, name="name">
            </div>
            <div class="form-group">
              <input class="form-control input-lg" type="email", placeholder="Ваш email", required, name="mail">
            </div>
            <div class="form-group">
              <textarea class="form-control input-lg" rows="5", placeholder="Ваше сообщение", required, name="message"></textarea>
            </div>
          </form>
          <div class="modal-footer">
            <button class="btn btn-default btn-lg" type="submit", title="Отправить Email", form="contact-form">Отправить</button>
          </div>
        </div>
      </div>
    </div>
    <script src="./jquery-1.10.2.min.js"></script>
    <script src="./bootstrap.min.js"></script>    
  </body>
</html>

Сохраняем HTML-файл.
Не забываем положить рядом с сохраненным HTML-файлом скачанные ранее библиотеки: bootstrap.min.css, bootstrap.min.js и jquery-1.10.2.min.js.
Открываем HTML-файл в браузере, нажимаем большую синюю кнопку:

Продолжаем разговор. Добавляем в самый конец тэга <body> HTML-файла код скрипта:
<script>
      $('#contact-form').on('submit', function(e) {
        e.preventDefault(); // предотвратим отправку формы - действие по умолчанию
        var that = $(e.target); // получаем ссылку на источник события - форму #contact-form            
        $.ajax({ // отправляем данные          
          // URL развернутого скрипта Google Apps Script
          url: 'https://script.google.com/macros/s/AKfycby2HeahiWEdoKK0ZwXAPk5xjivrg-Yrs3qZu8hwxx5lSOhCaXU/exec',
          data: $(this).serialize(), // собираем запрос
          jsonp: 'cb', // имя параметра запроса
          jsonpCallback: 'bingo', // имя функции
          dataType:'jsonp', // тип данных
          success: function bingo(data){
            console.log(data); // проверим данные, полученные с бэкэнда
            if (data == 'Error') {
              alertForm({form: that, type: 'alert-danger', msg: 'Не удалось отправить сообщение.'});
              return;
            }
            alertForm({form: that, type: 'alert-success', msg: 'Ваше сообщение отправлено.'});
            that.find('textarea').val('');
          }, 
          error: function(){
            alertForm({form: that, type: 'alert-danger', msg: 'Не удалось отправить сообщение.'});
          }
        });
      });
      // функция вывода сообщений в модальную форму
      function alertForm(alert) {
        var div = $('<div class="alert ' + alert.type + '" style="display: none;">' + alert.msg + '</div>');        
        alert.form.prepend(div);
        div.slideDown(400).delay(3000).slideUp(400, function() {
          alert.form.closest('.modal').modal('hide');
          div.remove();    
        });
      }
    </script>

Примечание: к сожалению Google Apps Script не дружит с XMLHttpRequest, поэтому для работы с данными используем JSONP.

Возвращаемся к бэкэнду - нашему скрипту Google Apps Script, редактируем код:
function doGet(e) {
  try {
    MailApp.sendEmail('Ваш_Email@gmail.com', 'Feed from mysite.ru', e.parameters.message, {      
      htmlBody: '<p>from: ' + e.parameters.name + '</p>' + '<p>email: ' + e.parameters.mail + '</p>' + 
      '<p>message: ' + e.parameters.message + '</p>'
    });
    return ContentService.createTextOutput(e.parameters.cb + '("OK")').setMimeType(ContentService.MimeType.JAVASCRIPT);
  } catch(e) {
    return ContentService.createTextOutput(e.parameters.cb + '("Error")').setMimeType(ContentService.MimeType.JAVASCRIPT);
  } 
}

Сохраняем новую версию проекта:


Разворачиваем новую версию веб-приложения:


Открываем новую версию HTML-файла в браузере, нажимаем большую синюю кнопку, заполняем поля данными:

Оправляем данные формы:

Примечание: если вы тестируете код на моей версии HTML-файла, то получите сообщение об ошибке. Мне не хотелось бы получать письмо каждый раз, когда очередной читатель будет отправлять данные в адрес моего скрипта на Google Apps Script, поэтому я изменил его код таким образом, чтобы он в любом случае возвращал "Error" - все по чесноку :) - для того, чтобы убедиться, откройте консоль браузера.

Открываем консоль браузера (Ctrl+Shift+J):

Похоже все ОК. Проверяем почту:

Как и обещал - все доступно, повторяемо и легкоусвояемо :).