< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приятные полезности для сайта » Простая форма связи на Ajax

Простая форма связи на Ajax

Простая форма связи на Ajax

Пост был обновлен: Май 29, 2017

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

Если вы делаете сайт на движке, например, на Joomla или WordPress, то можно конечно использовать различные готовые решения для форм, в том числе и конструкторы. Но что, если вы верстаете просто на чистом HTML и заказчик попросил «оживить» формы, чтобы они работали. Вот здесь как раз и пригодится данная форма. 

Данная форма работает, используя библиотеку jQuery. Сейчас практически на каждом сайта она подключена и грех не воспользоваться ее возможностями. И так, давайте приступим.

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Форма обратной связи

HTML код формы

<div class="form form-container">
<form id="feedbackForm" action="#" class="form__form feedback-form">
<fieldset class="form__fields form__hide-success">
<div class="control-group">
<input name="name" class="inputbox" type="text" placeholder="Ваше имя*" required="required" />
</div>
<div class="control-group">
<input name="email" class="inputbox" type="email" placeholder="Ваш e-mail*" required="required" />
</div>
<div class="control-group">
<textarea class="textbox" name="message" id="message" cols="30" rows="10" placeholder="Ваше сообщение*" required="required"></textarea>
</div>
<input type="hidden" name="go" value="5">
<input type="hidden" name="submitFeedback" value="feedback">
<div class="btn-block">
<button type="submit" class="btn-submit btn btn-s40 btn-empty btn-grey btn-w100">Отправить</button>
</div>
</fieldset>
</form>
</div>

Валидация полей задана без дополнительных плагинов просто средствами HTML5. Обязательным полям указываем атрибут required

JavaScript код формы


// ======= Ajax Submit Form Plugin =======
(function($) {
 jQuery.fn.sendForm = function(options) {
 options = $.extend({
 successTitle: "Спасибо, что выбрали нас!",
 successText: "Мы свяжемся с Вами в ближайшее время.",
 errorTitle: "Сообщение не отправлено!",
 errorSubmit: "Ошибка отправки формы!",
 mailUrl: "../form-submit/submit.php",
 autoClose: false,
 autoCloseDelay: 5000
 }, options);

var make = function() {
 var $this = $(this);
 $(this).submit(function() {
 var data = $(this).serialize();
 $.ajax({
 url: options.mailUrl,
 type: "POST",
 data: data,
 beforeSend: function() {
 $this.find('.btn-submit').parents('.form__form').addClass('sending');
 },
 success: function(res) {
 if (res == 1) {
 $this[0].reset();
 $this.find('.form__hide-success').slideUp().delay(5000).slideDown();
 $this.find('.btn-submit').parents('.form__form').removeClass('sending');
 $this.find('.form__hide-success').after('<div class="form__sys-message"></div>');
 $this.find('.form__sys-message').html('<div class="form__success-title">' + options.successTitle + '</div><p class = "form__success-text" >' + options.successText + '</p>');
 setTimeout(function() {
 $this.find('.form__sys-message').fadeOut().delay(3000).remove();
 if (options.autoClose) {
 $.magnificPopup.close();
 }
 }, options.autoCloseDelay);
 } else {
 $this.find('.btn-submit').parents('.form__form').removeClass('sending');
 $this.append('<div class="form__error">' + options.errorSubmit + '</div>');
 setTimeout(function() {
 $this.find('.form__error').remove();
 }, 5000);
 }
 },
 error: function() {
 $this.find('.btn-submit').parents('.form__form').removeClass('sending');
 $this.append('<div class="form__error">' + options.errorSubmit + '</div>');
 setTimeout(function() {
 $this.find('.form__error').remove();
 }, 5000);
 }
 });
 return false;
 });

} // end make

return this.each(make);
 };
})(jQuery);

Данный код позволяет работать с несколькими формами на странице (смотрите демо).  Вызываем плагин ajax-формы.


jQuery(document).ready(function() {
    $('#feedbackForm').sendForm();
});

Если вы посмотрите на javaScript код формы то заметите, что в ней имеются опции.

Опции

successTitle (строка) — Заголовок сообщения благодарности при отправленной форме. По умолчанию — «Спасибо, что выбрали нас!»

successText (строка) — текст под заголовком сообщения благодарности. По умолчанию — «Мы свяжемся с Вами в ближайшее время».

errorTitle (строка) — заголовок сообщения об ошибке отправки формы. По умолчанию — «Сообщение не отправлено!».

errorSubmit (строка) — текст сообщения об ошибке отправки формы. По умолчанию —  «Ошибка отправки формы!».

mailUrl (строка) — путь до файла обработчика. По умолчанию — «../form-submit/submit.php». Следует изменить и указать полный путь, если у вас папка «form-submit» лежит не в корне сайта.

autoClose (булево) — автоматически закрывает окно после успешной отправки формы. Окно формы закрывается, показав сообщение благодарности по истечению 5 сек. Данное время можно переопределить.

autoCloseDelay (число) — продолжительность (в миллисекундах) показа сообщения благодарности после которого оно закроется. По умолчанию — 5000 (5 сек.).

JavaScript код формы я вынес в отдельный файл и назвал его — functions.js. Инициализацию формы можно поместить в сам файл index.html, до закрывающего тега body. 

Читайте также:  Горизонтальное многоуровневое меню на css с эффектом анимации

Форма в модальном окне

Нашу форму можно показать и в модальном окне. Модалку будет выводить Magnific Popup. Подключаем Magnific Popup. Как это сделать читайте в подробном обзоре по данному плагину.

HTML код

Код кнопки

<div class="modal-btn-container btn-block">
    <a href="#callback" class="modal-popup btn-submit btn btn-s40 btn-empty btn-grey">Заказать звонок</a>
 </div>

Код формы

<div id="callback" class="zoom-anim-dialog mfp-hide white-block">
 <form id="callbackForm" action="#" class="form__form callback-form">
 <fieldset class="form__fields form__hide-success">
 <div class="control-group">
 <input name="name" class="inputbox" type="text" placeholder="Ваше имя*" required />
 </div>
 <div class="control-group">
 <input name="phone" class="inputbox" type="number" placeholder="Ваш телефон*" required />
 </div>
 <input type="hidden" name="go" value="5">
 <input type="hidden" name="submitCallback" value="callback">
 <div class="btn-block">
 <button type="submit" class="btn-submit btn btn-s40 btn-empty btn-grey btn-w100">Отправить
 </button>
 </div>
 </fieldset>
 </form>
 </div>

Инициализируем модальное окно и форму. Здесь мы переопределим некоторые опции — сделаем автоматическое закрытие окошка через 3 сек. после успешной отправки формы.

Вызов формы с модальным окном


// ======= Init magnific popup =======
 $('.modal-popup').magnificPopup({
 type: 'inline',
 fixedContentPos: false,
 fixedBgPos: true,
 overflowY: 'auto',
 closeBtnInside: true,
 preloader: false,
 midClick: true,
 removalDelay: 300,
 mainClass: 'mfp-top-up'
 });

// ===== Init modal form ====
 $('#callbackForm').sendForm({
 successTitle: "Ваша заявка принята!",
 successText: "Наш сотрудник свяжется с Вами в самое ближайшее время.",
 autoClose: true,
 autoCloseDelay: 3000
 });

Теперь давайте заглянем в файл обработчика (submit.php) формы и пройдемся по основным кускам кода. Обработчик работает на языке php, поэтому если хотите протестировать форму вам необходимо будет использовать локальный сервер

Файл обработчика формы


<?php
if(isset($_POST["go"])) {
 
 // ===== reference =====
 if( isset($_POST["name"]) ) {
 $name = $_POST["name"];
 }
 if( isset($_POST["email"]) ) {
 $email = $_POST["email"];
 }
 if( isset($_POST["phone"]) ) {
 $phone = $_POST["phone"];
 } 
 if( isset($_POST["message"]) ) {
 $text = $_POST["message"];
 }

// ===== Variables =====
 $to = "demo@zaurmag.ru"; // E-mail на который присылать письмо
 $fromEmail = "no-reply@youdomain.ru"; // E-mail от имени которого приходит письмо. Почта на домене сайта.
 
 if ( isset($_POST["submitCallback"]) ) {
 $subject = "Заказан обратный звонок"; 
 }
 if ( isset($_POST["submitFeedback"]) ) {
 $subject = "Обращение из формы обратной связи"; 
 }

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

$message = '<html><body>';
 $message .= "<table>";
 if (!empty($name)) {
 $message .= "<tr>";
 $message .= "<td>";
 $message .= "<strong> Имя: </strong>";
 $message .= "</td>";
 $message .= "<td style='padding-left:12px;'>";
 $message .= "$name";
 $message .= "</td>";
 $message .= "</tr>";
 }
 if (!empty($email)) {
 $message .= "<tr>";
 $message .= "<td>";
 $message .= "<strong> E-mail: </strong>";
 $message .= "</td>";
 $message .= "<td style='padding-left:12px;'>";
 $message .= "$email";
 $message .= "</td>";
 $message .= "</tr>";
 }
 if (!empty($phone)) {
 $message .= "<tr>";
 $message .= "<td>";
 $message .= "<strong> Телефон: </strong>";
 $message .= "</td>";
 $message .= "<td style='padding-left:12px;'>";
 $message .= "$phone";
 $message .= "</td>";
 $message .= "</tr>";
 }
 if (!empty($text)) {
 $message .= "<tr>";
 $message .= "<td>";
 $message .= "<strong> Сообщение: </strong>";
 $message .= "</td>";
 $message .= "<td style='padding-left:12px;'>";
 $message .= "$text";
 $message .= "</td>";
 $message .= "</tr>";
 }
 
 $message .= "</table><br><br>";
 $message .= '</body></html>';
 $headers = "MIME-Version: 1.0" . PHP_EOL .
 "Content-Type: text/html; charset=utf-8" . PHP_EOL .
 'From: '.adopt($name).' <'.$fromEmail.'>' . PHP_EOL .
 'Reply-To: '.adopt($name).' <'.$email.'> ' . PHP_EOL;

if (mail($to, adopt($subject), $message, $headers)) {
 $answer = '1';
 } else {
 $answer = '0';
 }
 die($answer); 
} ?>

Начинается все с проверки на POST запрос. Если заметили у нас в каждой форме присутствует скрытое поле 

<input type="hidden" name="go" value="5">

Если глобальный массив $_POST существует, т.е. если форма будет отправлена, то выполнится условие 

if (isset($_POST["go"])) { ... }

Далее, мы заносим отправленные данные с полей в переменные, т.к. с ними нам предстоит работать ниже. Если добавите свое дополнительное поле, то вам придется создать еще одну переменную по аналогии. Значение $_POST соответствует атрибуту «name» в полях формы.

// ===== Reference =====
 if( isset($_POST["name"]) ) {
 $name = $_POST["name"];
 }
 if( isset($_POST["email"]) ) {
 $email = $_POST["email"];
 }
 if( isset($_POST["phone"]) ) {
 $phone = $_POST["phone"];
 } 
 if( isset($_POST["message"]) ) {
 $text = $_POST["message"];
 }

Далее в переменных ниже содержится информация об e-mail адресах.

// ===== Variables =====
 $to = "demo@youremail.ru"; // E-mail на который присылать письмо
 $fromEmail = "no-reply@yourdomain.ru"; // E-mail от имени которого приходит письмо. Почта на домене сайта.

В переменной «$to» содержится e-mail на который присылать письмо.

Читайте также:  RSForm - ajax отправка форм без перезагрузки страницы

В переменной » $fromEmail» содержится тот e-mail с которого пришло письмо. Вот здесь есть некоторый ньюанс. Можно предположить, что в данной переменной должен содержаться e-mail пользователя, отправивший данное письмо. Да, все верно, по идее должно быть так. Но представьте, что в форме нет поля e-mail, например, в форме заказа обратного звонка? Это первое. Второе, некоторые хостинги подставляют в поле «From» в почтовом ящике не e-mail пользователя, а свой какой-то технический e-mail. Сделано это в целях защиты от СПАМа. Один из таких хостингов — beget.com

Почта noreply Бегет

Чтобы этого не произошло мы поступим следующим образом — в поле «From:» мы подставим нашу почту на домене сайта. Именно почта на домене позволяет обойти защиту от СПАМа в Бегет. Так советует поступить сама тех. поддержка хостинга. Почта должна быть на домене того сайта, на котором работает форма. Почту можно вписать любую, причем создавать реально ее не обязательно. Я всегда использую что-то типа — no-reply@site.ru (вместо site.ru реальный домен).

Теперь получается так «Имя пользователя» подставляется реальное, а почта «От» наша no-reply почта. Теперь, чтобы ответить пользователю на его e-mail (если есть поле e-mail), то нам необходимо в поле «Reply-To:» подставить реальную почту пользователя. Теперь надеюсь вам понятно для чего нужна переменная — $fromEmail.

Теперь перейдем к теме сообщения. Как определить с какой формы пришло сообщение, чтобы подставить правильный заголовок темы сообщения? В переменной «$subject» лежит тема сообщения. Далее идет условие и данная переменная переопределяется строками ниже.

В HTML коде формы присутствует еще одно скрытое поле. Вот, например, из формы обратной связи:

<input type="hidden" name="submitFeedback" value="feedback">

В обработчике идет проверка откуда прилетело сообщение и соответственно подставляется нужная тема сообщения.


$subject = "Форма обратной связи";

if ( isset($_POST["submitCallback"]) ) {
$subject = "Заказан обратный звонок"; 
}
if ( isset($_POST["submitFeedback"]) ) {
$subject = "Обращение из формы обратной связи"; 
}

По умолчанию в переменную $subject можно записать все, что угодно. Можно вообще оставить пустой.

Далее у нас идет функция — adopt. Она исправляет кодировку поле имени (От кого) в некоторых почтовых сервисах. Например, у меня в Яндекс почте имя пользователя, приславшего письмо отображалось крякозябрами, тогда, как с gmail проблем не было.

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

Далее формируем само тело письма и подставляем переменные — имя, e-mail, телефон, сообщение. Здесь думаю все понятно, не буду особо комментировать. 

E-mail адреса $to и $fromEmail записываем в переменную $headers с присвоением кодировки.

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

Ну и последнее вызываем функцию mail(). Данная функция в php позволяет отправлять письма на почту.

if (mail($to, adopt($subject), $message, $headers)) {
 $answer = '1';
 } else {
 $answer = '0';
 }
 die($answer);

Здесь мы проверяем, если письмо было отправлено, то вывести результат — 1, иначе — 0. Одно из данных значений вернет наш обработчик после отправки формы. Данное значение мы будем получать после ajax запроса на сервер и в зависимости от того, какое значение получим будем выполнять действие. Например, если нам придет ответ — 1, то покажем сообщение благодарности об успешной отправке формы.

success: function(res) {
 if (res == 1) { ... }
}

Я прошелся по основным кускам кода формы. Естественно тем, кто хоть немного разбирается в HTML, JavaScript (jQuery), PHP разобраться будет намного легче. Что еще сказать? Давайте теперь говорить будете вы — в комментариях. Спрашивайте, если что непонятно.

На этом все. Спасибо за внимание. До встречи в следующих постах!

Пост был обновлен: Май 29, 2017

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (1 оценок, среднее: 5,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

    Комментариев пока нет, будьте первым.

    Добавить комментарий

    Войти с помощью: 

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

    • Код HTML - тегами [html] ваш код... [/html]
    • Код CSS - тегами [css] ваш код... [/css]
    • Код PHP - тегами [php] ваш код... [/php]
    • Код JavaScript - тегами [code lang="js"] ваш код... [/code]