Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 152. Форма обратной связи для WordPress

Урок 152. Форма обратной связи для WordPress

форма связи wordpress

Всем привет!

Когда-то я публиковал подобный урок, в котором мы делали форму обратной связи при помощи плагина Contact Form. Сегодня мы узнаем, как можно установить подобную форму к себе на блог, не прибегая к помощи плагинов. А также, как ее оформить на свой вкус.

Для начала продемонстрирую саму форму. Перейдите на контакты, и вот она - та самая форма. Со спокойной душой удалил Contact Form, одним плагином меньше!

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

Первым делом Вам необходимо скачать данный архив.

Извлеките папку на рабочий стол. Теперь ознакомьтесь с файлами. Всего 4 папки: css, js, img, php. Соответственно: в первой лежит файл, отвечающий за стили формы. Во второй, контроллер, или другими словами, скрипт, который отображает форму, проверяет правильность ввода данных, и передает все это обработчику, который находится в четвертой папке, с названием php.

О содержимом третьей папки все и так догадались. Там лежат картинки для формы. Итак, данная форма устанавливается очень просто.

Создайте страницу для обратной формы, если у Вас ее еще нет. Новички могу прочитать про создание страниц здесь.

Теперь перейдем на вкладку "Текст" на странице:

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

Вставим следующий код:

Сохраняем страницу.

Теперь берем распакованную папку callback и загружаем ее в корень сайта. Это туда, где у Вас лежат папки wp-admin, wp-content и тд.

Итак, наша задача состоит в том, чтобы подключить стили формы и скрипт к сайту. А то, как Вы видите, то, что имеется сейчас - ужас.

Тут встает один вопрос. Подключить то можно в файле header.php, но проблема в том, что эти стили и скрипт будут загружаться вообще на всех страницах, хотя нам надо, чтобы загрузка была только на странице "Обратная связь". А то зачем нам дополнительная нагрузка?!

Проблема решается с помощью wordpress-функции is_page().

Вкратце про функцию. Она работает с условиями if\else. То есть, алгоритм такой: наше условие - если страница та, что нужна, подключаем скрипты и стили. Если нет, соответственно, не подключаем.

Открываем header.php. Ищем закрывающий тег . Сразу же перед ним вставляем следующий код:

Теперь разберем каждую строку.

  • is_page(6) - шестерка, это айди моей страницы "Контакты". Как узнать айди? Все очень просто, в админке переходите в раздел "Страницы". Наводите курсор на нужную страницу, и смотрите, какая цифра стоит в урле. В урле будет конструкция post= . И вот после равно нужная нам цифра. Форма обратной связи для WordPress
  • Дальше мы подключили новую библиотеку jquery. Если форма не будет работать, как надо, попробуйте ее удалить. Это, скорей всего, будет значить то, что у Вас она уже подключена. А подключать одну и ту же библиотеку несколько раз не надо. Иначе будет конфликт, и скрипты перестанут работать.
  • Следующие две строки - подключили стили и скрипт. Замените site.ru на адрес Вашего сайта. Если Вы поместили папку туда, куда я сказал (в корень сайта), то больше в адресе ничего менять не надо. Если же Вы папку поместили в другое место - то пропишите туда адрес до нее.
  • Ну и последний код:

    Он-то и активирует форму.

С подключением разобрались.

Теперь откройте файл myformscript.js. Он находится в папке js.

В самом начале Вам надо изменить путь до файла sendtomail.php. Можете изменить значения минимального количества символов в имени человека и в сообщении. Чтобы Вам не посылали пустых писем.

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

Можете также изменить некоторые надписи, которые будут выводиться при нахождении ошибок.

 

Теперь откроем файл sendtomail.php. В нем Вы увидите, в самом начале, зону настроек. Меняете e-mail на свой, меняете адрес и название сайта, и меняете, если необходимо, сообщение, которое будет выходить при ошибке.

Тоже можете прокрутить файл вниз, и заменить пару других надписей. Думаю, разберетесь.

Вернитесь к той страницу, куда вставили форму. Обновите. Должно все отлично работать!

Форма обратной связи для WordPress. Меняем стили

Как изменить цвета и стили? Все это можно сделать в файле myformstyle.css, который лежит в папке css. Просто открываете, к примеру, фотошоп, выбираете нужный цвет, и копируете его код:

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

Открываем вышеупомянутый файл. Чтобы изменить цвет первых двух блоков (имя, почта), найдите строчку #my_beauty_form .z_field-name, и в background-color меняйте цвет. ВАЖНО: цвет должен быть вида: #ab2d5f. То есть, 6 символов, и решетка впереди.

Аналогично находим другие цвета и меняем. Сделать это очень просто тем, у кого стоит мазила с плагином firebug.

Вроде все, теперь и у Вас есть форма обратной связи для WordPress.

P.S. Статью написал по-быстрому. Единственный выходной на этой неделе, и очень много всего надо сделать. Поэтому, если у Вас что-то не работает, или какая ошибка. Или я что упустил - пишите в комментариях. Постараюсь ответить максимально быстро!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Виталий
1

Осенью прошлого года ставил себе в блоги форму обратной связи с помощью скрипта. Уже и подзабыл нюансы.
Сейчас попробую вспомнить и разобраться, заодно и со цветами, стилями поэкспериментирую.
Спасибо, Олег!

05.07.2014
Sly
0

Надеюсь пригодится 🙂

05.07.2014
Княгиня
0

Никак не решу, нужна ли мне такая форма в блоге. А заказчикам я делала формы на Вордпрессе - прям сапожник без сапог. 🙂 Только я, разумеется, верстаю её по-своему. Была там и просто форма на странице, и форма, которая всплывает по кнопке...

05.07.2014
Sly
0

Да, сверстать можно как угодно, главное чтобы не возникало трудностей при установке 🙂

05.07.2014
Desh
0

Такая форма однозначно нужна)

24.07.2014
Сергей
0

Благодарю!! Самая лучшая форма, что я нашел! И все просто)

11.10.2014
Егор
0

Спасибо за форму, только капчу отдельно надо, или как?

05.11.2014
Sly
0

Капчу отдельно, да. Хотя я без нее поставил, никакого спама нет вот уже полгода.

09.12.2014
Александр
0

Хочу себе на новом сайте красивую форму обратной связи.

02.01.2015
Sly
0

Берите эту 🙂

13.01.2015

А у меня почему-то форма не запустилась. Даже не пойму, по какой причине. На странице контакты просто не отображается, а в виджете, куда помести код, отображается, но не функционирует. т.е. не отправляет письма. А жаль, смотрится форма очень хорошо.

08.04.2017
0

Покажите, пожалуйста, сайт с формой. Я постараюсь помочь с нахождением ошибки.

09.04.2017

Сейчас уже не покажу, установила плагин. Попробую чуть позже с формой повозиться. Если что, пришлю всё, что надо. Кстати, будет потом вопрос по настройке безопасности сайта. Начну делать, а точнее повторно лелать и напишу именно в той теме, где найду проблему.

10.04.2017
0

Это как будет удобно. Вообще с безопасностью не заморачивайтесь. Ставьте хороший пароль да и все. Главное чтобы хостинг был такой, который автоматически каждый день делает резервную копию. А там если что-то случится - за 2 минуты восстановите и все. Я такой идеологией уже 4 года живу - ни один из моих проектов не был взломан за все это время.

10.04.2017

Оставить комментарий

Поделиться