Ajax контакт форма на WordPress

Для начала создадим запись с нашей контакт формой. Я буду проделывать все шаги на своей тестовой копией WordPress,Twenty Sixteen теме. Итак, Записи » Добавить новую:

wp-ajax-form

Для начала нужно будет добавить шорткод [form-feedback] на страницу, а позже мы его зарегистрируем, в файле темы functions.php. Выше шорткода вставляем тег span с class="ajax-preloader", элемент, который будет содержать gif в определенный момент, т.е., прелоадер.

В стилях пишем:

.entry-content, #contact-feedback {
  position: relative;
}
.ajax-preloader { 
   position: absolute; 
   width: 64px; 
   height: 64px; 
   display: inline-block; 
   top: 25%;
   left: 45%;
}

В functions.php регистрируем шорткод, он будет возвращать весь html для формы:

add_shortcode('form-feedback', function () {
   $html = '<form id="contact-feedback" onsubmit="return false">
            <p><input id="name_txt" maxlength="50" name="user_name" type="text" placeholder="*Имя"></p>
            <p><input id="phone_txt" maxlength="15" name="user_phone" type="text" placeholder="Телефон"></p>
            <p><input id="email_txt" maxlength="100" name="user_email" type="text" placeholder="*E-mail"></p>
            <p><textarea id="mess_txt" name="user_mess" placeholder="Сообщение"></textarea></p>';
   $html .= (class_exists('JBlogCaptcha')) ? do_shortcode("[jbcptch]") : '<p>Подключите плагин «JBlog Captcha»</p>';
   $html .= '<p><input id="send-feedback" type="submit"/></p>
             </form>
             <div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-body">
                      <p>Ваше сообщение успешно отправлено!</p>
                    </div>
                  <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                </div>
             </div>
          </div>
       </div>
       <div class="modal fade" id="fail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-body">
                <p>Ошибка при отправке сообщения. Письмо не отправлено!</p>
             </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
          </div>
      </div>
    </div>
</div>';
return $html;
});

Подключаем пару файлов. В header стили, в footer скрипт (модальные окна): modal.css, modal.min.js

Создадим в папке темы папку img, поместим туда прелоадер.

Подключаем плагин JBlog Captcha.

Почти всё готово, осталось только составить клиентскую и серверную части. Потребуется jQuery, я тестировал на 1.9.1. Пишем обработку кнопки «Отправить», я скрипт вставил прямо в самом верху записи в html режиме между тегами script:

$(function(){
   $('#send-feedback').on('click', function () {
      var name = $('#name_txt').val(),
          email = $('#email_txt').val(),
          phone = $('#phone_txt').val(),
          mess = $('#mess_txt').val(),
          str = $('#jbcptcha_input').val();
       $.ajax({
          type: "POST",
          url: "/wp-content/themes/twentysixteen/form-handler.php",
          data: {
              "name": name,
              "email": email,
              "phone": phone,
              "mess": mess,
              "str": str
         },
         cache: false,
         beforeSend: function () {
         $('.ajax-preloader').html('<img src="/wp-content/themes/twentysixteen/img/482.gif" alt="Загрузка.." />');
         $('#contact-feedback').css('position', 'static');
         $('#send-feedback').attr('disabled', 'disabled').css('opacity', '0.5');
         $('#contact-feedback').css('opacity', '0.3');
         },
         success: function (response) {
            var delay = setTimeout(function () {
            var json = $.parseJSON(response);
                if (json.res) {
                      $('#success').modal();
                      $('#name_txt').val('');
                      $('#email_txt').val('');
                      $('#phone_txt').val('');
                      $('#mess_txt').val('');
                      $('#jbcptcha_input').val('');
                        var src = $('#generate-jbcptcha img').attr('src');
                        var srcFirst = src.split('?');
                        $('#generate-jbcptcha img').attr('src', srcFirst[0] + '?rnd=' + json.rnd);
                 } else {
                      $('#fail').modal();
                      var src = $('#generate-jbcptcha img').attr('src');
                      var srcFirst = src.split('?');
                      $('#generate-jbcptcha img').attr('src', srcFirst[0] + '?rnd=' + json.rnd);
                }
              $('#contact-feedback').css('position', 'relative');
              $('.ajax-preloader').html('');
              $('#send-feedback').removeAttr('disabled').css('opacity', '1');
              $('#contact-feedback').css('opacity', '1');
          }, 400);
        }
      });
    });
 });

Создаем в папке темы файл form-handler.php, это будет обработчик на сервере, он же будет посылать письмо. Код файла:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
   $name = trim(strip_tags($_POST['name']));
   $email = trim(strip_tags($_POST['email']));
   $phone = trim(strip_tags($_POST['phone']));
   $mess = wp_strip_all_tags($_POST['mess']);
   $str = trim(strip_tags($_POST['str']));
     if (class_exists('JBlogCaptcha')) {
          $c = JBlogCaptcha::instance();
          $c->chekSession();
          if (!empty($email) && is_email($email) && !empty($name) && $c->getChek()) {
            $in = true;
            $to = array("admin@site.com");        // Здесь нужно указать свой email!
            $what = "<p>Поступило новое сообщение!</p>";
            $what .= "<p>Имя: " . $name . "</p>";
            $what .= "<p>Телефон: " . $phone . "</p>";
            $what .= "<p>Эл. почта: " . $email . "</p>";
            $what .= "<p>Сообщение:</p><p>" . $mess . "</p>";
            $subj = 'Новое сообщение с сайта WordPress!';
            $headers = 'MIME-Version: 1.0' . "\r\n";
            $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
            $mailit = wp_mail($to, $subj, $what, $headers);
            if ($mailit) {
               $res = true;
            } else {
               $res = false;
            }
           $rnd = md5(uniqid(rand(), true));
           $c->generateImage('captcha', $c->getSens());
     } else {
           $rnd = md5(uniqid(rand(), true));
           $in = false;
           $c->generateImage('captcha', $c->getSens());
     }
  }
   $arr = array(
      'name' => $name,
      'email' => $email,
      'phone' => $phone,
      'mess' => $mess,
      'res' => $res,
      'in' => $in,
      'rnd' => $rnd
     );
     print json_encode($arr);

В конце концов получается вот такая форма:

wp-ajax-7



Похожие заметки:

Вывод комментариев с пагинацией

Выводим все комменты на WordPress из базы данных с пагинацией

Открыть здесь

Прикручиваем Sphinx к своему поиску на сайте

Установка, задание конфигурации и запуск службы на Ubuntu для высокоскоростного поиска. Быстрый гайд

Открыть здесь

Веб-разработка

Займусь вашим проектом, если вам нужен специалист в области веб-разработки

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии