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

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

34 216 в JavaScript 37

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

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

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

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

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

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

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

<link <span class="html-attribute-name">rel</span>="<span class="html-attribute-value">stylesheet</span>" <span class="html-attribute-name">href</span>="/css/main.css">
<span class="html-tag"><script <span class="html-attribute-name">src</span>="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></span><span class="html-tag"></script></span>
<script src="/js/scripts.js"></script>

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

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

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

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

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

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

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

Опции

  • 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 (строка) — публичный ключ рекаптчи.
Читайте также:  Индикатор загрузки страницы - preloader

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

Нашу форму можно показать и в модальном окне. Модалку будет выводить библиотека 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').<span class="pl-en">simpleSendForm</span>({
    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-я строка) и меняем приватный ключ на свой.

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

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

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

Читайте также:  Уведомление о КУКИ на сайте

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

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

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

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

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

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

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

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

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

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

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

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (6 оценок, среднее: 4,33 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории