Уникальная форма обратной связи с ajax на php

23.03.2017

Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте http://webdesign-master.ru/blog/tools/578.html и использую уже очень давно.

Выложу здесь коды, чтобы было проще копировать, но все исходники есть на GitHub https://github.com/agragregra/uniMail.

В чем уникальность этого скрипта — в том, что у вас может быть любая форма с любым количеством различных полей, и не нужно под каждое поле создавать вывод данных в письме, скрипт просто проходит по всем полям и выводит все данные из них. Например, при добавлении нового поля в файле html, нет необходимости добавлять еще какие-то параметры в mail.php. И это очень круто и просто. То есть форма будет работать уже при минимальных правках из коробки.

Структура такая:

index.html

<form>

  <!-- Hidden Required Fields -->
  <input type="hidden" name="project_name" value="Site Name">
  <input type="hidden" name="admin_email" value="admin@mail.com">
  <input type="hidden" name="form_subject" value="Form Subject">
  <!-- END Hidden Required Fields -->

  <input type="text" name="Name" placeholder="Your name..." required><br>
  <input type="text" name="E-mail" placeholder="Your E-mail..." required><br>
  <input type="text" name="Phone" placeholder="Your phone..."><br>
  <button>Send</button>

</form>

В скрытые поля вносим данные для отправки письма — Имя отправителя, имя отправителя (он же и получатель), тема письма.

script.js

$(document).ready(function() {

  //E-mail Ajax Send
  $("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      alert("Thank you!");
      setTimeout(function() {
        // Done Functions
        th.trigger("reset");
      }, 1000);
    });
    return false;
  });

});

Перед подключением скрипта обязательно подключаем jquery, если он еще не подключен:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

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

mail.php

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

  $project_name = trim($_POST["project_name"]);
  $admin_email  = trim($_POST["admin_email"]);
  $form_subject = trim($_POST["form_subject"]);

  foreach ( $_POST as $key => $value ) {
    if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
      $message .= "
      " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
        <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
        <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
      </tr>
      ";
    }
  }
} else if ( $method === 'GET' ) {

  $project_name = trim($_GET["project_name"]);
  $admin_email  = trim($_GET["admin_email"]);
  $form_subject = trim($_GET["form_subject"]);

  foreach ( $_GET as $key => $value ) {
    if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
      $message .= "
      " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
        <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
        <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
      </tr>
      ";
    }
  }
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
  return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

Файл mail.php — основной, он собирает все данные из полей формы и отправляет на почту.

Видео

 

 

Полезная инфа:

Оставить комментарий