Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.
Преимущества такой формы очевидны — она универсальна и может быть установлена на любой сайт, включая популярные CMS, такие как WordPress, Joomla и даже на простые HTML сайты. Если в качестве примера рассматривать ВордПресс, то отсутствие дополнительных плагинов снизит потенциальную нагрузку сервер.
Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:
Что для этого требуется? Чуточку внимания, чтобы дочитать статью до конца и немного свободного времени для воплощения идеи в жизнь) В конце статьи есть ссылки на онлайн-демонстрацию и загрузку архива с исходниками.
Вставка формы обратной связи на блог
Для размещения формы обратной связи можно выбрать как отдельную запись, так и статическую страницу. Целесообразно ее использовать на специально отведенной странице для контактов. Итак, предлагаю использовать вот такой код, которой необходимо вставить в HTML-режиме редактора:
|
1 2 3 4 5 6 7 8 9 10 11 |
<form id="contact" action="/wp-content/themes/lime/mail.php" method="post"> <H3>Форма обратной связи</H3> <div id="note"></div> <div id="fields"> <p><input type="text" name="name" id="author" placeholder="Имя" required> <label for="author">Как вас зовут</label></p> <p><input type="email" name="email" id="email" placeholder="E-mail" required> <label for="email">Электронная почта</label></p> <p><input type="text" name="sub" id="url" placeholder="Тема" required> <label for="url">Тема сообщения</label></p> <p><textarea name="message" cols="1" rows="10" id="comment" style="width:98%" placeholder="Введите сюда текст сообщения" required></textarea></p> <p><button type="submit" id="submit" class="go">Отправить сообщение</button></p> </div> </form> |
В первой строке Вам придется немного подкорректировать и указать свой путь к файлу-обработчику (mail.php), о котором расскажу ниже. Содержание тега label (текстовая метка поля ввода) и атрибута placeholder (подсказка внутри текстового поля, исчезающая при вводе) измените при желании.
Для того чтобы заменить текстовое поле с темой сообщения на раскрывающийся список необходимо заменить строку 7, применяя тег select с вариантами выбора option:
|
1 |
<p><select name="sub" id="url" required><option value="" disabled selected>Выберите тему</option><option value="1">Пункт 1</option><option value="2">Пункт 2</option></select></p> |
Атрибут required появился в HTML5 и указывает браузеру, что поле является обязательным для заполнения. Таким образом на стороне пользователя проводится проверка полей до отправки запроса на сервер. Атрибут работает не во всех браузерах, поэтому добавим в обработчике свою проверку.
Создаем обработчик формы обратной связи
Файл-обработчик с именем mail.php я поместил в папку с темой шаблона, в таком случае он будет доступен для редактирования прямо из админки блога, в меню Внешний вид/Редактор. Создаем файл, открываем его и вставляем туда следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $post = (!empty($_POST)) ? true : false; if($post) { $email = $_POST['email']; $name = $_POST['name']; $email = $_POST['email']; $sub = $_POST["sub"]; $message = $_POST['message']; $error = ''; if(!$name) {$error .= 'Укажите свое имя. ';} if(!$email) {$error .= 'Укажите электронную почту. ';} if(!$sub) {$error .= 'Укажите тему обращения. ';} if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';} if(!$error) { $address = "primer@example.ru"; $mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email"); if($send) {echo 'OK';} } else {echo '<div class="err">'.$error.'</div>';} } ?> |
Для использования формы обратной связи на своих блогах Вам потребуется обязательно изменить строку 15, т.к. параметр $address отвечает за то, на какой адрес будет приходить отправленное сообщение.
На этом настройка файла mail.php заканчивается и можно переходить к следующему этапу — подключению необходимых скриптов и стилевому оформлению.
Подключение необходимых библиотек и скриптов
Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в заголовке до закрывающего тега </head> следующим образом:
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Еще один способ подключить jQuery на WordPress с помощью файла functions.php, в который необходимо вставить:
|
1 2 3 4 5 |
function my_jquery() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); wp_enqueue_script( 'jquery' ); } |
Преимущество второго способа заключается в том, что если какой либо плагин подключает свою версию библиотеки, то она отключается и загрузка происходит с CDN Google, исключая дублирование скриптов и предотвращая возможные конфликты.
Теперь нам необходимо подключить свой скрипт, который будет работать в паре с обработчиком mail.php и отправлять сообщения, а также выводить информационные сообщения без перезагрузки страницы. Для этого создаем файл contact.js со следующим содержимым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(document).ready(function($) { $("#contact").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "/wp-content/themes/lime/mail.php", data: str, success: function(msg) { if(msg == 'OK') { result = '<div class="ok">Сообщение отправлено</div>'; $("#fields").hide(); } else {result = msg;} $('#note').html(result); } }); return false; }); }); |
В 6 строке Вам необходимо изменить путь к файлу-обработчику mail.php.
Подключать скрипт допустимо как на одной странице с формой, так и для всего сайта в заголовке или подвале, указав свой путь к файлу:
|
1 |
<script src="/wp-content/themes/lime/contact.js"></script> |
Основная работа завершена и наша форма на данном этапе уже полностью работоспособна, остался последний штрих — придать ей форму.
Оформление внешнего вида с помощью CSS
В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
form#contact { border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; } #contact label { font-size: 14px; } #contact input:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; } #contact textarea:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; } #contact input:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid.png) no-repeat 98% center; } #contact textarea:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; } .err { border: 1px solid #ff8c00; padding: 10px; background: #FFDF97; text-align: left; border-radius: 3px; } .ok { border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center; border-radius: 3px; } #author, #email, #url { width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; } #comment { padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; } #submit { font-weight: 400; background: #393; font-size: 15px; color: #fff; padding: 10px 50px; border: none; cursor: pointer; } |
Вам потребуется два изображения, которые доступны в архиве с исходниками или сохраните их с этой страницы через контекстное меню по изображению «Сохранить картинку как…» и не забудьте в CSS изменить путь к этим файлам, если загружаете в иную папку.
— появляется в поле input при валидации формы;
— появляется в поле input когда форма не заполнена или заполнена неверно.
Приведенный мною фрагмент стилей оформления добавьте в свой файл style.css. На свое усмотрение Вы имеете возможность менять внешний вид формы или ее отдельных элементов, применять различные стили оформления и тем самым вписать ее в любой дизайн так, чтобы смотрелось гармонично.
Есть конечно и более функциональные плагины для CMS, например Contact Form 7 для WP, но зачем загружать блог? Данный код успешно справляется с возложенными на него функциями, к тому же не все плагины идеально работают и порой конфликтуют с шаблоном.