Обратная связь на PHP + Ajax. Быстрая отправка писем.

· HTML & CSS, jQuery и JavaScript, PHP и Блог · 5 мин чтения

Каждый наверное во время разработки сайт сталкивается с желанием установить форму обратной связи на свой сайт, чтобы пользователи с легкостью могли к вам обращаться если у них появились какие-либо вопросы.В этом статье я расскажу как вам сделать ajax форму обратной связи.

Посмотреть демо | Скачать скрипт архивом

HTML

<form action method="post" id="feedback"> 
  <div class="form-group">
    <label>Имя <small>*</small></label>
    <input type="text" required name="name" required value="" class="form-control">
  </div>

  <div class="form-group">
    <label>Почта <small>*</small></label>
    <input type="email" required name="email" value="" class="form-control">
  </div>

  <div class="form-group">
    <label>Тема <small>*</small></label>
    <input type="text" required name="subject" value="" class="form-control">
  </div>

  <div class="form-group">
    <label>Сообщение</label>
    <textarea name="text" required class="form-control" rows="6"></textarea>
  </div>

  <div class="form-group">
    <input type="submit" name="submit" value="Отправить"  class="btn btn-success" />
  </div>
</form>

На этой стадии мы просто создали HTML форму c id feedback, который мы теперь будем использовать для распознования формы в jQuery скрипте ниже.

jQuery

$(document).ready(function() { 
  $("#feedback").submit(function(){ 
    var form = $(this); 
    var error = false; 
    form.find('input, textarea').each( function(){ 
      if ($(this).val() == '') { 
        alert('Зaпoлнитe пoлe "'+$(this).attr('placeholder')+'"!');
        error = true; 
      }
    });
    if (!error) { 
      var data = form.serialize(); 
      $.ajax({ 
        type: 'POST', 
        url: 'mail.php', 
        dataType: 'json', 
        data: data,
        beforeSend: function(data) { 
          form.find('input[type="submit"]').attr('disabled', 'disabled'); 
        },
        success: function(data){ 
          if (data['error']) { 
            alert(data['error']);
          } else { 
            alert('Письмo было отправлено, проверьте почту.');
          }
        },
        error: function (xhr, ajaxOptions, thrownError) { 
          alert(xhr.status); 
          alert(thrownError);
        },
        complete: function(data) {
          form.find('input[type="submit"]').prop('disabled', false); 
        }
                      
           });
    }
    return false; // вырубaeм стaндaртную oтпрaвку фoрмы
  });
});

Скрипт выше сначала проверяет поля на наличие информации и если любое из них пустое показывает окошко и просит пользователя ввести нужные данные. Если ошибок нет, то идет отправка AJAX запроса к файлу mail.php (подробнее об этом файле ниже), который выполняет отправку письма на почту.

PHP

<?php
if ($_POST) { 
  
  $name = htmlspecialchars($_POST["name"]); 
  $email = htmlspecialchars($_POST["email"]);
  $subject = htmlspecialchars($_POST["subject"]);
  $message = htmlspecialchars($_POST["text"]);

  $json = array(); 
  if (!$name or !$email or !$subject or !$message) { 
    $json['error'] = 'Вы зaпoлнили нe всe пoля.'; 
    echo json_encode($json); 
    die();
  }
  if(!preg_match("|^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]{2,6}$|i", $email)) { 
    $json['error'] = 'Нe вeрный фoрмaт почты.'; 
    echo json_encode($json); 
    die(); 
  }

  // Кодировка для отправленных писем 
  function mime_header_encode($str, $data_charset, $send_charset) { 
    if($data_charset != $send_charset)
    $str=iconv($data_charset,$send_charset.'//IGNORE',$str);
    return ('=?'.$send_charset.'?B?'.base64_encode($str).'?=');
  }
  
  // Класс для отправки писем на почту
  class TEmail {
  public $from_email;
  public $from_name;
  public $to_email;
  public $to_name;
  public $subject;
  public $data_charset='UTF-8';
  public $send_charset='windows-1251';
  public $body='';
  public $type='text/plain';

  function send(){
    $dc=$this->data_charset;
    $sc=$this->send_charset;
    $enc_to=mime_header_encode($this->to_name,$dc,$sc).' <'.$this->to_email.'>';
    $enc_subject=mime_header_encode($this->subject,$dc,$sc);
    $enc_from=mime_header_encode($this->from_name,$dc,$sc).' <'.$this->from_email.'>';
    $enc_body=$dc==$sc?$this->body:iconv($dc,$sc.'//IGNORE',$this->body);
    $headers='';
    $headers.="Mime-Version: 1.0\r\n";
    $headers.="Content-type: ".$this->type."; charset=".$sc."\r\n";
    $headers.="From: ".$enc_from."\r\n";
    return mail($enc_to,$enc_subject,$enc_body,$headers);
  }

  }

  $emailgo = new TEmail; 
  $emailgo->from_email = 'bologer.ru'; // Почта отправителя 
  $emailgo->from_name  = 'Проверка формы'; // Имя отправителя 
  $emailgo->to_email   = $email;  // Куда будет отправлено письмо 
  $emailgo->to_name    = $name; // Имя получателя
  $emailgo->subject    = $subject; // Тема
  $emailgo->body 		 = $message; // Сообщение

  $emailgo->send(); 

  $json['error'] = 0;

  echo json_encode($json); 
} else { 
  echo 'У вас нет прав для входа на эту страницу!'; 
}
?>

PHP код выше проверяет данные полученые через ajax запрос от jQuery, после чего формирует данные и отправляет их на почту. В случае ошибки, данный скрипт отправляет данные обратно к jQuery скрипту и он уже обрабаывает их и показывает пользователю. После успешной отправки письма пользователь получает сообщение об успешной отправке.

Версия PHP выше, не самая безопасная, если вам нужно использовать что-то более стабильное в плане безопасности, то можете восспользоваться вот этой php библиотекой. Так же в ней больше возможностей. Или переписать скрипт самому (если у вас имеются знания в PHP программировании).

На этом все. Если у вас возникли вопросы или сомнения, пожалуйста напишите мне комментарий. Я буду рад вам ответить.

Комментарии