У даній статті я покажу, як робиться якісна форма зворотного зв'язку WordPress за допомогою плагіна Contact form 7.
Ця форма дійсно якісна, так як вона дуже проста у використанні і має той функціонал, який може застосовуватися в разі створення форми зворотного зв'язку без плагіна. наприклад - функція прикріплення файлу при відправці повідомлення.
До того ж, вона і робиться простіше нікуди. Втім, я пропоную відразу перейти до її реалізації без жодних філософських міркувань про важливість контактної форми на сайті, а тим більше персональному блозі.
Робимо форму зворотного зв'язку за допомогою плагіна Contact form 7
Спершу встановлюємо плагін, скачавши його з офіційної сторінки. Потім приступаємо до самого процесу створення форми.
Після встановлення плагіну в адмін-панелі WordPress з'являється новий пункт, який називається так само, як і плагін - Contact form 7.
Ми можемо відразу додати нову форму, перейшовши в пункт "Додати нову" або ж змінити існуючу, яка створюється при установці плагіна.
Якщо потрібна російська мова (за замовчуванням), то тиснете на першу кнопку додати.
Якщо ж потрібен іншу мову, то обираєте його зі списку і продовжуєте створення форми.
Мене, звичайно, цікавить варіант за замовчуванням. Тому я тисну на кнопку "Додати нову" і потрапляю на сторінку з усіма настройки форми.
Насамперед нас цікавить заголовок форми. Я рекомендую призначити унікальне ім'я для форми. Це потрібно для того, щоб при створенні нових форм ви не плуталися. Щоб ви чітко знали де яка форма і могли відредагувати потрібну.
Так як форму я буду розміщувати на сторінці, то приблизно так її і назвав - "Форма зворотнього зв'язку для сторінки Контакти".
Далі нас цікавить наступний блок налаштувань - "Шаблон форми". Це той шаблон, в якому будуть виводитися необхідні поля, які потрібно буде заповнити і їх назви.
Як бачимо, є всі найнеобхідніші поля:
З цими полями можна вже розміщувати форму зворотного зв'язку на сайті, але я пропоную зробити ще одне поле, яке в деяких випадках дуже корисне і важливе. Все залежить від тематики сайту. Якщо ж це блог, то неодмінно треба його зробити.
Це поле для прикріплення файлу до повідомлення. Уявіть, що у вас тематика сайту, як у мене. Технічна тематика, де дуже складно зрозуміти суть проблеми без якихось графічних даних. Щоб в такому випадку краще взаємодіяти з читачами, необхідно давати їм можливість пояснювати свої проблеми по максимуму, так як від цього залежить якість вашої відповіді і допомоги в цілому.
Щоб реалізувати це поле, спочатку потрібно в стандартний шаблон додати ще одне поле. Робимо це наступним чином. Копіюємо 2 передостанні рядки, тобто код виведення поля повідомлення, і дублюємо їх. Має вийти, як на скріншоті нижче.
Тепер необхідно змінити назву поля. Змінюємо фразу "Повідомлення" на "Прикріпити файл".
Далі в цьому ж коді потрібно замінити другу частину "[textarea your-message]" на код, який буде виводити поле для вибору файлу з комп'ютера. Спочатку необхідно згенерувати такий код. Для цього справа шаблону форми є спеціальна функція генерації тега. Тиснемо на неї і вибираємо з усього списку пункт "Відправлення файлу".
Далі з'явиться блок налаштувань для поля прикріплення файлу. Нам потрібно в ньому 2 невеликих коду.
Першим кодом ми замінюємо раніше вказану частину коду в шаблоні форми.
Тепер можна зберігати створену форму, натиснувши на кнопку у верхній частині сторінки праворуч від назви форми.
Тепер можемо перейти на сторінку. Повинні побачити саму контактну форму з усіма полями. У мене все вийшло і форма має наступний вигляд.
Далі я пропоную перевірити форму, щоб переконатися, що листи доходять.
Для цього ми заповнюємо всі поля і для прикладу можна прикріпити якийсь графічний файл (картинку).
Після того, як я заповнив усі поля і натиснув на кнопку "Відправити" мені без перезавантаження сторінки, що дуже добре, показало повідомлення про успішну відправку.
Але чи дійсно це так? Переходимо в пошту і бачимо, що повідомлення дійсно прийшло.
Повідомлення прийшло. Також файл прикріпився. Значить, зробили все правильно. Якщо у вас також, то можете спати спокійно. Але я пропоную виконати ще одну дію. Потрібно перевірити працездатність форми на перевірку помилок при заповненні.
Як правило, така ситуація поширена в формах ОС, які робляться за допомогою кодів без плагіна. В даному ж випадку, якщо ми не заповнимо якийсь обов'язкове поле, нам видасть помилку і підпише необхідні поля для заповнення.
Форма прекрасно працює, що і слід було зробити.
На цьому я закінчую цей мануал. У наступній статті я покажу, як зробити якісну форму зворотного зв'язку без плагіна. Вона також буде перевіряти помилки при заповненні, вдало доставляти листи і мати гарне компактне оформлення.
Така реалізація зараз у мене на блозі. Можете подивитися на сторінці "Написати мені".
З повагою, Костянтин Хмельов!
40 років Перемоги 51937 Україна, Дніпропетровська обл. м Дніпродзержинськ, +38 093 338 11 41