RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation)

Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation) Создаём всплывающее модальное окно "Перезвоните мне" на Bootstrap 3. В окне форма с полями Имя и Телефон с валидацией JqBootstrapValidation, отправляющая письмо администратору, чтобы перезвонил. Вариация формы обратной связи для Landing pages.

1) В шаблоне html делаем кнопку "Перезвоните мне", которая откроет модальное окно.

<a href="#myModal" role="button" data-toggle="modal"><img src="assets/img/recall.png" /></a>

Важно! Иногда такой вызов кнопки срабатывает только для главной страницы, на внутренних же ничего не происходит и модальное окно не открывается. Правильнее вызывать тегом <button>, вот так:

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

другая причина: версия скрипта jquery должна быть выше 1.9.2 (например - jquery-2.1.0.min.js) !!

 

2) Сам код окошка тоже в любом месте страницы вставить

<!-- Modal -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">

       
        <div class="modal-body">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<!-- Form itself -->
<form name="sentMessage" class="form form-register1" id="contactForm"  novalidate>

<div class="control-group">
<div class="controls">
<input type="text" class="form-control" onblur='if(this.value=="") this.placeholder="Ваше имя"' onfocus='if(this.value=="Ваше имя") this.value=""' placeholder="Ваше имя" id="name" required data-validation-required-message="Пожалуйста укажите ваше имя" />
  <p class="help-block"></p>
</div>
</div>  
<div class="control-group">
<div class="controls">
<input type="text" class="form-control" onblur='if(this.value=="") this.placeholder="Телефон"' onfocus='if(this.value=="Телефон") this.value=""' placeholder="Телефон" id="phone" required data-validation-required-message="Пожалуйста, укажите номер телефона" />
</div>
   </div>  


<div id="success"> </div> <!-- For success/fail messages -->
   <button type="submit" class="btn btn-lg btn-3d pull-right">Отправить</button><br />

</form>

        </div><!-- End of Modal body -->
        </div><!-- End of Modal content -->
        </div><!-- End of Modal dialog -->
    </div><!-- End of Modal -->
3) скрипты подключить перед закрывающим </body>
<script type="text/javascript" src="assets/js/jquery-2.1.0.min.js?ver=1"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jqBootstrapValidation.js"></script>
<script src="assets/js/recall_me.js"></script>

4) recall_me.js

/*
  Jquery Validation using jqBootstrapValidation
   example is taken from jqBootstrapValidation docs 
  */
$(function() {

 $("input,textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
     },
     submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
       // get values from FORM
       var name = $("input#name").val();  
var phone = $("input#phone").val(); 
       var email = $("input#email").val(); 
       var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message
           // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
  firstName = name.split(' ').slice(0, -1).join(' ');
         }        
$.ajax({
                url: "recall_me.php",
             type: "POST",
             data: {name: name, phone: phone},
             cache: false,
             success: function() {  
             // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
             .append( "</button>");
               $('#success > .alert-success')
             .append("<strong>Спасибо! Ваше сообщение отправлено.</strong>");
    $('#success > .alert-success')
  .append('</div>');

   
    //clear all fields
    $('#contactForm').trigger("reset");

setTimeout(function() {
                $("#myModal").modal('hide');
           }, 4000);

        },
     error: function() { 
  // Fail message
   $('#success').html("<div class='alert alert-danger'>");
             $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
              .append( "</button>");
             $('#success > .alert-danger').append("<strong>Извините "+firstName+" кажется проблемы на сервере отправки писем...</strong> Вы не могли бы написать напрямую на адрес <a href='youremail@mail.com?Subject=Перезвоните мне'>youremail@mail.com</a> ? Приносим извинения за это неудобство!");
          $('#success > .alert-danger').append('</div>');
  //clear all fields
  $('#contactForm').trigger("reset");
      },
           })
         },
         filter: function() {
                   return $(this).is(":visible");
         },
       });

      $("a[data-toggle=\"tab\"]").click(function(e) {
                    e.preventDefault();
                    $(this).tab("show");
        });
  });


/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() {
     $('#success').html('');
  });

5) в нём вызывается recall_me.php, скрипт, который отправляет письмо

<?php
// check if fields passed are empty
if(empty($_POST['name'])   ||
   empty($_POST['phone']))
   {
echo "No arguments Provided!";
return false;
   }

$name = $_POST['name'];
$phone = $_POST['phone'];

// create email body and send it 
$to = 'youremail@mail.com'; // put your email
$email_subject = "Вам отправлена форма - Перезвоните мне: $name";
$email_body = "Заполнена форма \"Перезвоните мне\". \n\n".
 "Данные отправителя:\n\nИмя: $name \n".
 "Телефон: $phone";
$headers = "From: contact@mail.com\n";
$headers .= "Reply-To:"; 
mail($to,$email_subject,$email_body,$headers);
return true; 
?>

6) jqBootstrapValidation - отсюда http://reactiveraven.github.io/jqBootstrapValidation/

Вот такая форма (тут ещё оформление css сделано):

modal form bootstrap3 ajax emeail

Помогло:

 
Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:
Комментарии (2)     Подпишитесь на RSS комментариев к этой статье.

2 комментариев

#1410
Виталий говорит:
August 18, 2015 at 04:18 pm
А как сделать 2 такие формы на одной странице?
#1416
almix говорит:
August 25, 2015 at 12:07 pm

Для 2 форм на одной странице будет в файле скрипта recall_me.js выбор например по классу, чтобы отделить 2 формы:

/*
  Jquery Validation using jqBootstrapValidation
   example is taken from jqBootstrapValidation docs 
  */
$('.form1').click( function() {
//$(function() {


 $("#contactForm input,#contactForm textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
     },
     submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
       // get values from FORM
       var name = $("#contactForm input#name").val();  
var phone = $("#contactForm input#phone").val(); 
       var email = $("#contactForm input#email").val(); 
       var message = $("#contactForm textarea#message").val();
        var firstName = name; // For Success/Failure Message
           // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
  firstName = name.split(' ').slice(0, -1).join(' ');
         }        
$.ajax({
                url: "recall_me.php",
            type: "POST",
            data: {name: name, phone: phone, email: email},
            cache: false,
            success: function() {  
            // Success message
              $('#success').html("<div class='alert alert-success'>");
              $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
            .append( "</button>");
              $('#success > .alert-success')
            .append("<strong>Спасибо! Ваше сообщение отправлено.</strong>");
      $('#success > .alert-success')
     .append('</div>');
     
   //clear all fields
   $('#contactForm').trigger("reset");

setTimeout(function() {
                $("#myModal").modal('hide');
           }, 4000);

       },
    error: function() {
  // Fail message
  $('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
 .append( "</button>");
$('#success > .alert-danger').append("<strong>Извините "+firstName+" кажется проблемы на сервере отправки писем...</strong> Вы не могли бы написать напрямую на адрес <a href='prazdniknayra@1gb.ru?Subject=Перезвоните мне'>prazdniknayra@1gb.ru</a> ? Приносим извинения за это неудобство!");
$('#success > .alert-danger').append('</div>');
 
 
  //clear all fields
  $('#contactForm').trigger("reset");
     },
           })
         },
         filter: function() {
                   return $(this).is(":visible");
         },
       });


      $("a[data-toggle=\"tab\"]").click(function(e) {
                    e.preventDefault();
                    $(this).tab("show");
        });
  });
 


/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() {
     $('#success').html('');
  });
  
  
  
  
 
$('.form2').click( function() {


   $("#contactForm1 input,#contactForm1 textarea").jqBootstrapValidation(
      {
       preventSubmit: true,
       submitError: function($form, event, errors) {
        // something to have when submit produces an error ?
        // Not decided if I need it yet
       },
       submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
         // get values from FORM
         var name = $("#contactForm1 input#name").val();  
  var phone = $("#contactForm1 input#phone").val(); 
         var email = $("#contactForm1 input#email").val(); 
         var message = $("#contactForm1 textarea#message").val();
          var firstName = name; // For Success/Failure Message
             // Check for white space in name for Success/Fail message
          if (firstName.indexOf(' ') >= 0) {
    firstName = name.split(' ').slice(0, -1).join(' ');
           }        
  $.ajax({
                  url: "recall_me.php",
              type: "POST",
              data: {name: name, phone: phone, email: email},
              cache: false,
              success: function() {  
              // Success message
                $('#success1').html("<div class='alert alert-success'>");
                $('#success1 > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
              .append( "</button>");
                $('#success1 > .alert-success')
              .append("<strong>Спасибо! Ваше сообщение отправлено.</strong>");
        $('#success1 > .alert-success')
       .append('</div>');
     
     //clear all fields
     $('#contactForm1').trigger("reset");

  setTimeout(function() {
                  $("#myModal").modal('hide');
             }, 4000);

         },
      error: function() {
    // Fail message
    $('#success1').html("<div class='alert alert-danger'>");
  $('#success1 > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
   .append( "</button>");
  $('#success1 > .alert-danger').append("<strong>Извините "+firstName+" кажется проблемы на сервере отправки писем...</strong> Вы не могли бы написать напрямую на адрес <a href='prazdniknayra@1gb.ru?Subject=Перезвоните мне'>prazdniknayra@1gb.ru</a> ? Приносим извинения за это неудобство!");
  $('#success1 > .alert-danger').append('</div>');
 
 
    //clear all fields
    $('#contactForm1').trigger("reset");
       },
             })
           },
           filter: function() {
                     return $(this).is(":visible");
           },
         });


        $("a[data-toggle=\"tab\"]").click(function(e) {
                      e.preventDefault();
                      $(this).tab("show");
          });
    });


и на странице для 2-й формы укажите id свой - contactForm1 и для сообщения success1, чтобы различались:

<!-- Form itself -->
<form name="sentMessage" class="form form-register1" id="contactForm1"  novalidate>

<div class="control-group">
<div class="controls">
<input type="text" class="form-control" onblur='if(this.value=="") this.placeholder="Ваше имя"' onfocus='if(this.value=="Ваше имя") this.value=""' placeholder="Ваше имя" id="name" required data-validation-required-message="Пожалуйста укажите ваше имя" />
  <p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="text" class="form-control" onblur='if(this.value=="") this.placeholder="Телефон"' onfocus='if(this.value=="Телефон") this.value=""' placeholder="Телефон" id="phone" required data-validation-required-message="Пожалуйста, укажите номер телефона" />
<p class="help-block"></p>
</div>
   </div>
<div class="control-group">
<div class="controls">
<input type="email" class="form-control" onblur='if(this.value=="") this.placeholder="Email"' onfocus='if(this.value=="Email") this.value=""' placeholder="Email" id="email" />
</div>
   </div>
   
<div id="success1"> </div>

<button type="submit" class="form2 button_zvonok zvonok btn-block buttoncall uppercase">Я хочу незабываемое торжество!</button>
<!--<a type="submit" class="button_zvonok zvonok btn-block buttoncall" href="#" data-label="ХОЧУ НЕЗАБЫВАЕМЫЙ КОРПОРАТИВ!">
ХОЧУ НЕЗАБЫВАЕМЫЙ КОРПОРАТИВ!
</a>-->
</form>


Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.