Від автора: вітаю вас, шановні читачі. Якщо вам знадобилася форма зворотного зв’язку на сайт WordPress, тоді ця стаття саме для вас. Після прочитання статті ви дізнаєтеся, як зробити форму зворотного зв’язку на WordPress, при цьому зробити легко, швидко і якісно.
Отже, для вирішення поставленого завдання ми будемо використовувати плагін форми зворотного зв’язку, який називається Contact Form 7. Не знаю, чому автор обрав саме таку назву, точніше порядковий номер у назві, можливо, це його щасливе число 
Як би те ні було, плагін Contact Form 7 для WordPress — це один з найпопулярніших плагінів як серед плагінів для створення форми зворотного зв’язку WordPress, так серед будь-яких інших. І дійсно, більше мільйона установок — цифра говорить сама за себе. Оцінка плагіна досить висока — 4,5 зірки, що відкидає всі сумніви щодо його використання. До того ж плагін вже русифікований, тому вам не доведеться переводити поля форми і повідомлення на російську мову.
УСТАНОВКА ПЛАГІНА CONTACT FORM 7 ДЛЯ WORDPRESS
Ну що ж, давайте пройдемо процес установки стандартний. До речі, якщо ви ще ніколи не встановлювали плагіни, тоді обов’язково ознайомтеся зі статтею «WordPress. Установка плагінів», в якій знайдете всі можливі способи установки плагінів.
В адмінці сайту переходимо в розділ Плагіни — Додати новий і в рядку пошуку вводимо назву плагіна — “contact form 7”. Перший знайдений плагін форми зворотного зв’язку — потрібний нам варіант.
Тиснемо кнопку Встановити і активуємо плагін. Після установки в меню з’явиться новий розділ Contact Form 7 з кількома пунктами.
Перший пункт Форми містить список поточних форм на вашому сайті і дозволяє керувати ними: редагувати або видалити. Готова форма являє собою ні що інше, як шорткод (короткий код), який можна вставити в запис, сторінку або навіть віджет. Цей шорткод буде розгорнуто на сторінці в повноцінний код форми. В плагіні вже встановлено приклад форми зворотного зв’язку, давайте скопіюємо її шорткод і вставимо його, наприклад, на сторінку контактів. Після цього перейдемо на сторінку і побачимо на ній вже готову робочу форму зворотного зв’язку WordPress.
Можемо спробувати заповнити форму та надіслати її, лист буде доставлено на адресу email, вказаний у налаштуваннях профілю адміністратора. Зверніть увагу, плагін Contact Form 7 не просто пропонує звичайну стандартну форму зворотного зв’язку. Немає, плагін дозволяє гнучко її настроювати. До того ж, форма відправляється без перезавантаження сторінки, що є додатковим плюсом. Ну і, звичайно ж, валідація полів форми, можливість вказати обов’язкові для заповнення поля — це ще один величезний плюс.
НАСТРОЙКА ФОРМИ ЗВОРОТНОГО ЗВ’ЯЗКУ ДЛЯ WORDPRESS
Ну що ж, ми використовували вже готову форму. А як щодо її зміни? Чи можливо це і чи легко це зробити? Відповідь — так — на обидва питання. Приміром, я хочу прибрати з форми полі Тема, як це зробити? Перейдемо до редагування форми в меню плагіна Форми і побачимо наступну картину.
Для того, щоб прибрати тему, досить прибрати 2 відповідні рядки, обведені рамкою на скріншоті. Тут цікава друга рядок: [text your-subject]. Як ви вже здогадалися, це ні що інше, як шорткод, який і розгортається в поле форми. В даному випадку це поле типу text зі значення атрибута name — your-subject.
Якщо, наприклад, мова йде про текстовій області нижче, то її шорткод виглядає так: [textarea your-message]. Тут textarea — це тегу textarea форми, а your-message — ім’я даного елемента форми. Все просто.
Тут ви можете поставити цілком логічне запитання: а що робити з іншими елементами форми? Як дізнатися, який шорткод відповідає, скажімо за випадаючий список? Тут теж нічого складного немає. Над полем шаблону форми що редагується є кнопки, клацнувши по яким ми додамо необхідні елементи в форму.
Ну а якщо все ж виникнуть складнощі, тоді вам допоможе документація до директорії, де можна знайти безліч прикладів.
Отже, давайте як приклад видалимо тему повідомлення і додамо список з варіантами вибору теми повідомлення. Для створення випадаючого списку гукнемо по кнопці drop-down menu. У відкритому модальному вікні заповнюємо форму. Ключовим є поле Options, в яке ми вводимо варіанти для випадаючого списку. Кожен варіант з нового рядка. Інші поля форми мають бути інтуїтивно зрозумілі. Наприклад, якщо ми відзначимо галочка в полі Field type (Required field), то тим самим зробимо створюване поля форми є обов’язковими для заповнення. Чекбокс Allow multiple selections дозволяє створити список з можливістю вибору декількох варіантів, а чекбокс Insert a blank item as the first option створить першим порожній варіант у списку. Поля Id, Class говорять самі за себе — це поля для додавання атрибутів id, class, дозволяють в подальшому оформити полі.
Після створення списку з необхідними варіантами в шаблоні форми з’явиться нове поле.
Зберігаємо шаблон і пробуємо протестувати нову форму зворотного зв’язку. На сайті форма дійсно змінилася, замість текстового поля теми з’явився випадаючий список з варіантами вибору теми.
Давайте спробуємо заповнити і відправити форму. Форма відправляється, але oops… в отриманому листі немає обраного варіанту теми. Як так? Як виправити це непорозуміння? Не хвилюйтеся, виправляється це просто. Йдемо редагування форми і перемикаємося на вкладку Лист.
У цій вкладці налаштовується формат листа, який приходить на email з форми зворотного зв’язку. На скріншоті в першій обведеної області ми бачимо список шорткодов (імен полів форми), які використовуються в нашій формі зворотного зв’язку. Саме значення цих полів і підставляються в шаблон листа. Ми бачимо на другій зазначеної області, що для поля Тема залишилося ім’я колишнього поля. Також у полі Message Body вказаний колишній шорткод. Давайте замінимо їх відповідним тегом зі списку вище — [menu-236]. До речі, тут же можемо змінити і email одержувача, він записаний в поле To. Також можемо змінити і інші налаштування нижче, всі вони підписані і зрозумілі.
Зберігаємо зміни і пробуємо відправити повторно лист. Тепер форма зворотного зв’язку працює, як і належить, — на email приходить лист з вибраною темою.
У наступній вкладці Повідомлення при відправці форми ми можемо налаштувати повідомлення про успіх або помилки, що виникають при відправці форми.
ЗАХИСТ ФОРМИ ЗВОРОТНЬОГО ЗВ’ЯЗКУ
А що щодо спаму, ви можете задати цілком резонне питання? Автор плагіна подбав і про це. В розділі налаштувань плагіна є пункт Integration.
Тут ми можемо налаштувати сервіс reCAPTCHA від Google. Для цього вам потрібно буде перейти по вказаному посиланню на відповідний сервіс Гугла і далі слідувати інструкціям, щоб отримати необхідний ключ і інтегрувати каптчі з вашим сайтом.
Для тих же, хто не хоче використовувати сервіс reCAPTCHA, плагін пропонує захист від роботів у вигляді поля питання/відповідь. Для додавання поля в шаблоні форми клікаємо по кнопці quiz і заповнюємо форму точно так само, як ми це робили для випадаючого списку. Питання і відповідь вводимо через вертикальну лінію.
Після цього у формі зворотного зв’язку з’явиться нове поле з одним з варіантів питань, які ви набрали. Тепер, щоб форма вирушила, необхідно дати правильну відповідь на питання.
Як бачимо, зробити форму зворотного зв’язку на WordPress — простіше простого. Плагін Contact Form 7 дозволяє побудувати форму практично для будь-яких цілей. Це може бути і форма зворотного зв’язку, і форма якої-небудь заявки і т. д. Так, як я і говорив вище, форму можна вставити не тільки в запис або сторінку, але і в віджет сайдбара. Для цього досить створити віджет Текст і вставити в нього шорткод потрібної форми. Ну а нові форми, як ви здогадалися, можна створювати меню плагіна Додати нову.
На цьому у мене все. Поиграйтесь з плагіном Contact Form 7 для WordPress, спробуйте створювати різні форми, повірте, там є ще маса можливостей для дослідження. Якщо ж у вас виникнуть питання, тоді я, як завжди, чекаю їх в коментарях. Удачі!
