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

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

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

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

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

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

Пост был обновлен: Мар 21, 2018

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

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

UPD. 01.03.2018
Добавлена каптча Google Recaptcha 2.0

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

Для начала, проследите за тем, чтобы у вас была подключена библиотека jQuery. Если на вашем сайте уже подключена jQuery, то строку подключения добавлять не нужно. Также подключим Api Google Recaptcha 2.0

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Подключим javaScript код отправки данных на сервер.

<script src="js/functions.js"></script>

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

HTML код формы

<div class="form form-container">
 <form id="feedbackForm" action="#" method="post" 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>
 <div class="control-group">
 <div id="recaptcha1"></div>
 </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" name="submitFeedback">Отправить</button>
 </div>
 </fieldset>
 </form>
 </div>

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

JavaScript код формы

// ======= Ajax Submit Form Plugin =======
(function($) {
 jQuery.fn.sendForm = function(options) {
 options = $.extend({
 successTitle: "Спасибо, что выбрали нас!",
 successText: "Мы свяжемся с Вами в ближайшее время.",
 errorTitle: "Сообщение не отправлено!",
 errorSubmit: "Ошибка отправки формы!",
 errorNocaptcha: "Вы не заполнили каптчу",
 errorCaptcha: "Вы не прошли проверку каптчи",
 mailUrl: "../form-submit/submit.php",
 autoClose: false,
 autoCloseDelay: 5000
 }, options);
var make = function() {
 var $this = $(this);
 $(this).submit(function() {
function errorRes(errorMessage) {
 $this.find('.btn-submit').parents('.form__form').removeClass('sending');
 $this.append('<div class="form__error">' + errorMessage + '</div>');
 setTimeout(function() {
 $this.find('.form__error').remove();
 }, 5000);
 } 
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();
 grecaptcha.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 if (res == 2) {
 errorRes(options.errorNocaptcha);
 } else if (res == 3) {
 errorRes(options.errorCaptcha);
 } else {
 errorRes(options.errorSubmit);
 }
 },
 error: function() {
 errorRes(options.errorSubmit);
 }
 });
 return false;
 });
} // end make
return this.each(make);
 };
})(jQuery);

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

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

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

Опции

  • successTitle (строка) — Заголовок сообщения благодарности при отправленной форме. По умолчанию — «Спасибо, что выбрали нас!»
  • successText (строка) — текст под заголовком сообщения благодарности. По умолчанию — «Мы свяжемся с Вами в ближайшее время».
  • errorTitle (строка) — заголовок сообщения об ошибке отправки формы. По умолчанию — «Сообщение не отправлено!».
  • errorSubmit (строка) — текст сообщения об ошибке отправки формы. По умолчанию —  «Ошибка отправки формы!».
  • errorNocaptcha (строка) — текст ошибки, если не заполнили каптчу.
  • errorCaptcha (строка) — текст ошибки, если проверка прошла с ошибкой.
  • mailUrl (строка) — путь до файла обработчика. По умолчанию — «../form-submit/submit.php». Следует изменить и указать полный путь, если у вас папка «form-submit» лежит не в корне сайта.
  • autoClose (булево) — автоматически закрывает окно после успешной отправки формы (для форм в модальном окне). Окно формы закрывается, показав сообщение благодарности по истечению 5 сек. Данное время можно переопределить.
  • autoCloseDelay (число) — продолжительность (в миллисекундах) показа сообщения благодарности после которого оно закроется. По умолчанию — 5000 (5 сек.).

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

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

Нашу форму можно показать и в модальном окне. Модалку будет выводить библиотека 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>
 <div class="control-group">
 <div id="recaptcha2"></div>
 </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 сек. после успешной отправки формы.

Читайте также:  Анимированная кнопка для формы на чистом CSS

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

// ======= 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
 });

Вызов Recaptcha

var recaptchaOn = false;
 if (recaptchaOn) {
 var onloadCallback = function() {
 mysitekey = 'ваш публичный ключ recaptcha';
 grecaptcha.render('recaptcha1', {
 'sitekey': mysitekey
 });
 grecaptcha.render('recaptcha2', {
 'sitekey': mysitekey,
 'theme': 'light', //default - light
 'type': 'audio', //default - image
 'size': 'normal', //default - normal 
 'tabindex': 1, //default - 0
 //'callback': , //function on success
 //'expired-callback': //function when response expires
 });
 };
 }

Если вы хотите использовать рекаптчу в форме, то присвойте переменной recaptchaOn = true. Далее, в переменной mysitekey вместо строки «ваш публичный ключ recaptcha» впишите свой публичный ключ recaptcha. Публичный и приватный ключи можете получить здесь.

Обратите внимание на демо-сайте две формы и поэтому здесь приведен двойной вызов рекаптчи. Если у вас на странице одна форма, то вам необходимо удалить второй вызов — «grecaptcha.render(‘recaptcha2’, {….«, иначе в консоли могут быть ошибки. Также проследите за тем, чтобы код вызова рекаптчи был именно на страницах с формой, иначе опять же могут быть ошибки.

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

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

<?php
if(isset($_POST["go"])) {
// ===== Reference ============================
 $recaptchaOn = false;
 if ($recaptchaOn) {
 $recaptcha = $_POST['g-recaptcha-response'];
 } 
 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@zaurmag.ru"; // E-mail от имени которого приходит письмо. Почта на домене сайта.
 $subject = "Форма обратной связи";

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 ($recaptchaOn) {
 if (!empty($recaptcha)) { 
 $secret = 'ваш приватный ключ recaptcha'; 
 $url = "//www.google.com/recaptcha/api/siteverify?secret=".$secret ."&response=".$recaptcha."&remoteip=".$_SERVER['REMOTE_ADDR'];

$response = file_get_contents("//www.google.com/recaptcha/api/siteverify?secret=".$secret ."&response=".$recaptcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

if ( $response.success === false ) {
 $answer = '2';
 } else {
 if (mail($to, adopt($subject), $message, $headers)) { 
 $answer = '1'; 
 } else {
 $answer = '0'; 
 }
 }} else {
 $answer = '3';
 }
 } else {
 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"])) { ... }

Следующее, если вы хотите включить рекаптчу, то присвойте переменной $recaptchaOn значение true: $recaptchaOn = true; Также ниже по коду найдите переменную $secret и впишите в нее свой секретный ключ.

Далее, мы заносим отправленные данные с полей в переменные, т.к. с ними нам предстоит работать ниже. Если добавите свое дополнительное поле, то вам придется создать еще одну переменную по аналогии. Значение $_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 на который присылать письмо.

Читайте также:  Показываем всплывающее окно на сайте один раз

В переменной » $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 ($recaptchaOn) {
 if (!empty($recaptcha)) { 
 $secret = 'приватный ключ recaptcha'; 
 $url = "//www.google.com/recaptcha/api/siteverify?secret=".$secret ."&response=".$recaptcha."&remoteip=".$_SERVER['REMOTE_ADDR'];$response = file_get_contents("//www.google.com/recaptcha/api/siteverify?secret=".$secret ."&response=".$recaptcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if ( $response.success === false ) {
 $answer = '2';
 } else {
 if (mail($to, adopt($subject), $message, $headers)) { 
 $answer = '1'; 
 } else {
 $answer = '0'; 
 }
 }} else {
 $answer = '3';
 }
 } else {
 if (mail($to, adopt($subject), $message, $headers)) { 
 $answer = '1'; 
 } else {
 $answer = '0'; 
 }
 }die($answer);

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

  • письмо было отправлено — $answer = 1;
  • письмо не было отправлено — $answer = 0;
  • рекаптча включена и не была заполнена — $answer = 2;
  • рекаптча включена и была заполнена неправильно — $answer = 3;

Одно из данных значений вернет наш обработчик после отправки формы.

die($answer);

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

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

Возможные ошибки

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

Посмотрите, правильно ли указан путь до файла обработчика в инициализации формы:

mailUrl: — путь до файла обработчика

Не показывается Google Recaptcha в форме

Проверьте выставлены ли переменным recaptchaOn (вызов рекаптчи) и $recaptchaOn (файл обработчика) значения — true.

Все сделал по инструкции, но форма не работает, где искать ошибку?

В первую очередь советую заглянуть в консоль браузера и проверить наличие ошибок. Также проверьте подключена ли у вас библиотека jQuery. Проверьте также подключение таких ресурсов, как — functions.js и recaptcha api. Пути должны быть правильными.

Код формы связи был обновлен 01.03.2018 г.

===============================================

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

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

Пост был обновлен: Мар 21, 2018

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

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

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

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

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

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

Система Orphus

19 комментариев к статье "Простая форма связи на Ajax"

  • Жорж Июл 17, 2018 в 19:02

    Прошу прощения, что отнял время на ответ) Ещё до того, как задать вопрос, по ошибкам в консоли удалил строки, связанные с recaptcha в function.js — 37 строка, если не изменяет память, (это если что и был ответ на вопрос) а вот кэш почистить забыл, и ловил ошибку раз за разом, пока не открыл в другом браузере. И такое случается х)

    • Заур Магомедов
      Заур Магомедов Июл 17, 2018 в 19:32

      Да все нормально. Мы же люди, а не роботы в конце концов)).

  • Жорж Июл 17, 2018 в 15:40

    Добрый день. Спасибо за форму, работает почти(!) всё. После отправки письма (а оно отправляется) продолжает крутиться прелоадер, т.е. сообщения об успехе не получаю. Куда можно копнуть? Спасибо заранее за совет 🙂

    • Заур Магомедов
      Заур Магомедов Июл 17, 2018 в 16:37

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

  • Светлана Мар 21, 2018 в 19:12

    Добрый день. Подскажите, пожалуйста, в Вашей демо-версии при отправке в консоли выдает ошибку «ReferenceError: errorRes is not defined», как можно это исправить?

    • Заур Магомедов
      Заур Магомедов Мар 21, 2018 в 20:05

      Здравствуйте! По идее ошибки не должно быть, т.к. все пути правильны прописаны на демо-сайте. А ошибку выдавало потому, что не была найдена функция errorRes, перенес ее выше. Скачайте заново архив с формой и замените ваш файл functions.js на файл из архива.

  • Александр Мар 15, 2018 в 15:45

    Здравствуйте. Подскажите, а если в модальную форму добавить поле с почтой, то какие файлы нужно править?

    • Заур Магомедов
      Заур Магомедов Мар 15, 2018 в 17:15

      Здравствуйте. Правим тот файл, в котором находится код с формой. Например, на демо-сайте это файл index.html

      • Александр Мар 15, 2018 в 17:17

        Спасибо большое. Еще один вопрос, можно ли сделать так, чтобы после отправки был редирект на страницу?

        • Заур Магомедов
          Заур Магомедов Мар 15, 2018 в 18:59

          На какую страницу — на другую?

          • Александр Мар 15, 2018 в 19:54

            Да, к примеру, на страницу Благодарности.

            • Заур Магомедов
              Заур Магомедов Мар 15, 2018 в 20:04

              Не вижу смысла отправлять на другую страницу. Благодарность ведь сразу показывается после отправки формы. Это же ajax-форма. А так, как это должно быть — пользователь жмет кнопку отправки и его сразу перекидывает на страницу благодарности? Должно ведь хоть какое то действие произойти.

              • Александр Мар 16, 2018 в 12:23

                Я хотел сделать две вещи: это четко фиксировать конверсию пользования формой и разместить там баннер с акцией.

                • Заур Магомедов
                  Заур Магомедов Мар 16, 2018 в 23:19

                  Конверсию можно через цели метрики отслеживать. А вот по поводу баннера даже не знаю. Если сайт на Joomla, то можете использовать конструктор RsForm.

  • Николай Фев 18, 2018 в 22:42

    Добрый день Заур!Спасибо большое! Все понятно, доступно и главное работает. Поставил себе на лендинг страницу

  • Илона Янв 15, 2018 в 1:56

    Спасибо))

  • Цифровой Янв 12, 2018 в 15:57

    Блин, вот когда я уже освою этот AJAX!?? У меня истерика )))))

  • Андрей Окт 30, 2017 в 12:19

    здравствуйте! есть в этой форме защита от роботов-спамеров?

    • Заур Магомедов
      Заур Магомедов Окт 30, 2017 в 14:37

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

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

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

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

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

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