Вы здесь
Главная > Мой блог > WEB-разработка > Форма обратной связи без плагинов

Форма обратной связи без плагинов

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.

Форма обратной связи на вордпресс без плагинов

Преимущества такой формы очевидны — она универсальна и может быть установлена на любой сайт, включая популярные CMS, такие как WordPress, Joomla и даже на простые HTML сайты. Если в качестве примера рассматривать ВордПресс, то отсутствие дополнительных плагинов снизит потенциальную нагрузку сервер.

Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:

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

Что для этого требуется? Чуточку внимания, чтобы дочитать статью до конца и немного свободного времени для воплощения идеи в жизнь) В конце статьи есть ссылки на онлайн-демонстрацию и загрузку архива с исходниками.

Вставка формы обратной связи на блог

Для размещения формы обратной связи можно выбрать как отдельную запись, так и статическую страницу. Целесообразно ее использовать на специально отведенной странице для контактов. Итак, предлагаю использовать вот такой код, которой необходимо вставить в HTML-режиме редактора:

В первой строке Вам придется немного подкорректировать и указать свой путь к файлу-обработчику (mail.php), о котором расскажу ниже. Содержание тега label (текстовая метка поля ввода) и атрибута placeholder (подсказка внутри текстового поля, исчезающая при вводе) измените при желании.

Для того чтобы заменить текстовое поле с темой сообщения на раскрывающийся список необходимо заменить строку 7, применяя тег select с вариантами выбора option:

Атрибут required появился в HTML5 и указывает браузеру, что поле является обязательным для заполнения. Таким образом на стороне пользователя проводится проверка полей до отправки запроса на сервер. Атрибут работает не во всех браузерах, поэтому добавим в обработчике свою проверку.

Создаем обработчик формы обратной связи

Файл-обработчик с именем mail.php я поместил в папку с темой шаблона, в таком случае он будет доступен для редактирования прямо из админки блога, в меню Внешний вид/Редактор. Создаем файл, открываем его и вставляем туда следующий код:

Для использования формы обратной связи на своих блогах Вам потребуется обязательно изменить строку 15, т.к. параметр $address отвечает за то, на какой адрес будет приходить отправленное сообщение.

На этом настройка файла mail.php заканчивается и можно переходить к следующему этапу — подключению необходимых скриптов и стилевому оформлению.

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

Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в заголовке до закрывающего тега </head> следующим образом:

Еще один способ подключить jQuery на WordPress с помощью файла functions.php, в который необходимо вставить:

Преимущество второго способа заключается в том, что если какой либо плагин подключает свою версию библиотеки, то она отключается и загрузка происходит с CDN Google, исключая дублирование скриптов и предотвращая возможные конфликты.

Теперь нам необходимо подключить свой скрипт, который будет работать в паре с обработчиком mail.php и отправлять сообщения, а также выводить информационные сообщения без перезагрузки страницы. Для этого создаем файл contact.js со следующим содержимым:

В 6 строке Вам необходимо изменить путь к файлу-обработчику mail.php.

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

Основная работа завершена и наша форма на данном этапе уже полностью работоспособна, остался последний штрих — придать ей форму.

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:

Вам потребуется два изображения, которые доступны в архиве с исходниками или сохраните их с этой страницы через контекстное меню по изображению «Сохранить картинку как…» и не забудьте в CSS изменить путь к этим файлам, если загружаете в иную папку.

valid — появляется в поле input при валидации формы;
invalid — появляется в поле input когда форма не заполнена или заполнена неверно.

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

Есть конечно и более функциональные плагины для CMS, например Contact Form 7 для WP, но зачем загружать блог? Данный код успешно справляется с возложенными на него функциями, к тому же не все плагины идеально работают и порой конфликтуют с шаблоном.

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

Top