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

Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте 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 — основной, он собирает все данные из полей формы и отправляет на почту.

Видео

 

 

Делаем Fotorama адаптивной

Очень простой и крутой плагин Fotorama, но он совсем не адаптивный. Например нужно сделать, чтобы…

Определяем браузер пользователя и подставляем его название в страницу

Задача: Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.

Варианты «clearfix-хака» и его замен: сводная таблица

Сразу напишу, что я использую такой вариант для clearfix: .clearfix:after { content:" "; display:table; clear:both;…

Добавляем классы к дочерним элементам «одноуровневого» списка

Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти…

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

Владимир

Спасибо, очень удобно! Явно человек с понятием о масштабируемых системах писал) Супер!

Кому интересно. Универсальный плаг обратной связи https://github.com/WahaWaher/sendmail-js
Любые поля форм + файлы, авто оформление в таблицу и отправка на почту. jq php phpmailer ajax

Как сделать чтобы сообщение отправлялось мне на почту после паузы 5 минут?

Алексей

Здравствуйте, подскажите пожалуйста почему она не отправляет на mail.ru на яндекс отправляет на ура а на mail.ru не приходят

Если сервер сайта находится в Украине, то на yandex.ru и mail.ru почта не будет отправляться.

Проверьте спам, и желательно, что бы почта отправителя была не от почтового сервиса, а от почтового домена, например, admin@site.com, тогда проблем не должно быть.

Лариса

Здравствуйте! Интересно.
А как прикрутить приложения … прикрепленные файлы?

Николай

Главное в таких формах $_POST и $_GET фильтровать, а то взломают, у меня так код вредоносный в php файл вписали и спам рассылали. После этого плюнус и на stepFORM форму собрал, как-нибудь нужно еще попытаться свою форму сделать))

Алексей

Добрый день.
Подскажите как сделать, чтобы письмо приходило на 2 почты?
Пробовал почту через запятую, не выходит.

Сергей

Да, крутая дыра для рассылки)
Замените всё, начиная от строки
} else if ( $method === 'GET' ) {
ДО строки
$message = "$message";
на строку
}
Иначе с вашего хостинга начнут рассылать спам через этот скрипт

Спасибо, надо будет протестировать.

Drakonoved

See alternative variant with using Java+Spring and AngularJS+Material: https://drakonoved.org/blog/2020/04/30/simple-feedback-form.html

Здравствуйте, подскажите пожалуйста, как убрать e-mail (куда отправлять) из формы на странице, в php скрипт?

Замените

trim($_POST["admin_email"])

на

'mail@mail.com'

Спасибо большое!)

на почту приходит не таблица а открытый код

на почту приходит не таблица а открытый код

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

ПЕРЕПРОБОВАЛ ВСЕ , НЕ ПОЛУЧАЕТСЯ .ПРОБЛЕМА НЕ РЕШАЕТСЯ )

ну хотите, скиньте мне доступы для фтп на почту mail [at] denis-creative.com и скажите адрес страницы, для которой выделена директория фтп — я попробую тестовую форму сделать.

у меня на нескольких сайтах данная форма до сих пор стоит, всё работает

Замените :

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

на:

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: '.adopt($project_name).' <'.$admin_email.'>' . "\r\n";
$headers .= 'Reply-To: '.$admin_email.'' . "\r\n";

для php 8.1 какие изменения?

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: '.adopt($project_name).' ' . "\r\n";
$headers .= 'Reply-To: '.$admin_email.'' . "\r\n";

это помогло.

Спасибо за уточнение, протестирую, поправлю код в статье

Помогите мне прошу вас, таблица как у вас на выходе не получаться почему я не понимаю

Ответить