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

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

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

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

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

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

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

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

UPD. 02.08.2018
Статья переписана с учетом того, что форма была выложена на GitHub

И так, давайте приступим. Первым делом скачайте исходники формы с моего репозитория на Гитхаб.

Данную сборку я собирал с помощью таск-менеджера Gulp. Про то, как с ним работать я писал подробный обзор, обязательно прочитайте.

Подключаем форму к сайту

Распаковываем архив с формой. Далее скопируйте из папки dist все содержимое в папку формы (например, ajax-form) в вашем шаблоне сайта. Далее подключаем ресурсы – стили и скрипты. В папках css и js имеются две версии – сжатая и обычная. Если вы планируете в дальнейшем вносить правки в код, то лучше подключать несжатые версии.  

<link rel="stylesheet" href="/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/scripts.js"></script>

Если на вашем сайте уже подключена библиотека jQuery, то можете ее не подключать. Обратите внимание на порядок подключения скриптов

Инициализация формы

Сразу отмечу, что валидация полей организовано средствами HTML5.

Форма вызывается методом .simpleSendForm(), например:

$('#idForm').simpleSendForm();

Вместо #idForm указываем индификатор формы. Вообще код инициализации формы вы можете найти в файле scripts.js. Код вызова плагина можно вырезать оттуда и прописать прямо перед </body>. Не забываем про jQuery.(document).ready().

Форма может принимать некоторые опции. 

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

Опции

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

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

Нашу форму можно показать и в модальном окне. Модалку будет выводить библиотека 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">
    <!-- Код формы -->
</div>

Инициализируем модальное окно и форму. Давайте сделаем автоматическое закрытие окошка через 3 сек. после успешной отправки формы. Код вызова Magnific Popup вы также найдете в файле scripts.js.

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

// ======= 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 ====
$('#idForm').simpleSendForm({
    successTitle: "Ваша заявка принята!",
    successText: "Наш сотрудник свяжется с Вами в самое ближайшее время.",
    autoClose: true,
    autoCloseDelay: 3000
});

Как включить Recaptcha?

Если вы хотите включить рекаптчу в форме, то вам необходимо добавить пустой блок с классом recaptcha в html-коде формы в том месте, где вы хотите ее вывести. Далее в коде вызова плагина формы передаем опцию captcha со значением true, а опцииcaptchaPublicKey передаем ваш публичный ключ recaptcha. Публичный и приватный ключи можете получить здесь.

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

Далее открываем файл обработчика формы submit.php из директории form-submit. Ищем переменную recaptchaOn (примерно 7-я строка) и выставляем ей значение true. Далее ищем переменную $secret (примерно 89-я строка) и меняем приватный ключ на свой. 

Читайте также:  FlexMenu - сворачивающееся адаптивное меню на jQuery

В принципе все. После этих манипуляций каптча у вас должна появиться.

Обратите внимание на демо-сайте каптча работает в тестовом режиме, так как указаны тестовые ключи от Гугл.

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

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

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

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

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

Также проверьте корректность включения рекаптчи. То есть если отключено, то опции recaptcha в коде инициализации и $recptchaOn в файле обработчика должны быть выставлены в false или в true, если рекаптча включена.

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

Проверьте переданы ли recaptcha (вызов рекаптчи) и $recaptchaOn (файл обработчика) значения – true. Также проверьте правильно ли вы указали ключи – публичный и приватный.

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

В первую очередь советую заглянуть в консоль браузера и проверить наличие ошибок. Также проверьте подключена ли у вас библиотека jQuery. Проверьте правильность подключения файла scripts.js. Если все хорошо, то попробуйте включить отладку опцией debug: true. После включения смотрите консоль на наличие ошибок. 

Вот такая вот форма. Используйте на своем сайте, надеюсь она будет вам полезна. Что еще сказать? Давайте теперь говорить будете вы – в комментариях. Спрашивайте, если что непонятно. Также, если найдете ошибку, то прошу сообщить незамедлительно, исправим…

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

Интеграция формы на cms Joomla + вывод в списке материалов (в каждом материале) с захватом заголовка материала

Простая форма связи на Ajax
Заур Магомедов
Заур Магомедов

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

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

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

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

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

Система Orphus

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

  • Сергей Крава Авг 12, 2018 в 3:08

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

    • Заур Магомедов
      Заур Магомедов Авг 12, 2018 в 10:54

      Спасибо за дополнение!

  • Альберт Рашитович Июл 23, 2018 в 14:16

    Здравствуйте Заур! Подскажите пожалуйста как полностью убрать\отключить капчу. Какие строки нужно удалить и в каких файлах? Иначе у меня письмо отправляется но в форме крутится колесо и браузер выдает ошибку в файле functions.js строка 37. Заранее благодарю Вас за ответ!

    • Альберт Рашитович Июл 23, 2018 в 14:35

      Я удалил 37-ю строку в файле functions.js и все теперь работает =) Скажите, правильно ли я сделал или только поломал код?
      Еще вопрос))
      Можно ли использовать одну капчу на всех формах? Просто у меня около 40-ка товаров и на каждый товар своя форма получилась и так не хочется много кода оставлять для капчи на каждую форму заказа. Заранее благодарю вас за ответы!! С добрыми пожеланиями, Альберт. PS: Форма супер! =)

      • Заур Магомедов
        Заур Магомедов Июл 24, 2018 в 7:08

        Чтобы отключить каптчу нужно просто поменять true на false в первой строке кода вызова каптчи. Точно не могу сказать, с телефона пишу. Тоже самое и в файле submit.php. Но если удалили и работает, то тоже ниче. Просто она завтра может вам пригодится, а код потом будете искать.

        На счет товаров и формы. Не нужно создавать 40 форм. Достаточно только одну форму. Если нужно объясню по подробнее как это сделать.

        • Альберт Рашитович Июл 25, 2018 в 9:45

          Спасибо, Заур! На счет товаров и формы объясните пожалуйста по подробнее как сделать одну форму вместо кучи. Буду вам очень признателен!

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

            Хорошо у меня и так в задачах записать видео на эту тему.

  • Жорж Июл 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]