4.2.2 Встановлення та налаштування плагіна Contact Form 7
WP Contact Form — це популярне рішення для створення простих та зручних форм зворотного зв’язку на сайті WordPress. Його головне завдання – допомогти Вашим відвідувачам легко зв’язатися з вами: залишити питання, запросити зворотній дзвінок чи надіслати заявку на послуги. Принцип роботи простий - користувач заповнює форму на сайті, а введені дані надсилаються на вказану електронну адресу. Завдяки гнучким налаштуванням, ви можете створювати форми для будь-яких цілей: від збирання відгуків до реєстрації на заходи. Це незамінний інструмент для будь-якого сайту, будь то особистий блог, інтернет-магазин чи корпоративний ресурс.
Підготовка
Врахуйте: розділ Підготовка актуальний тільки для наших клієнтів, які використовують панель керування ISPManager4, на послугу хостингу або інших.
Перед налаштуванням самого плагіна, слід виконати ряд дій на панелі керування. Цю частину ми покажемо на прикладі хостингу, але вона також актуальна для віртуальних та виділених серверів з панеллю ISPManager4.
1. Перейдіть до панель управління хостингом.
2. Відкрийте вкладку Поштові скриньки та переконайтеся, що у Вас створена поштова скринька на базі Вашого домену, за типом admin@example.com.ua
:
3. Майбутню форму зв’язку ми налаштуємо таким чином, щоб вона спочатку надсилала листа на пошту на базі Вашого домену. Вже потім вона пересилатиме листи на потрібну зовнішню пошту, наприклад на Gmail. Для налаштування такого пересилання, відкрийте властивості поштової скриньки та пропишіть потрібну пошту у формі Слати копії листів на e-mail:
4. Потім відкрийте в панелі керування вкладку Налаштування PHP та переконайтеся, що у графі E-Mail у Вас вказана ця АБО інша пошта на базі Вашого домену:
На цьому приготування закінчено і можна переходити до встановлення та налаштування самого плагіна.
Встановлення плагіна
1. Увійдіть до адмін-панелі WordPress Вашого сайту.
2. Перейдіть в меню Плагіни і натисніть Додати новий у верхньому лівому кутку:
3. У рядку пошуку введіть Contact Form 7:
4. Знайдіть плагін і натисніть Встановити та дочекайтесь установки. Після закінчення натисніть на місці попередньої кнопки нову - Активувати.
Створення форми зворотного зв’язку
1. Після активації в адмін-панелі з’явиться новий розділ: Contact Form 7 → Контактні форми:
2. Перейдіть до цього розділу та натисніть Додати нову:
3. Введіть назву форми (наприклад, Зворотній зв'язок
).
4. Відкриється вбудований редактор, у якому потрібно налаштувати поля майбутньої форми зворотного зв’язку. Для зручності пояснення, ми позначимо відвідувача Вашого сайту, що заповнює її, як клієнт:
За замовчуванням створюються такі поля, які потрібно буде заповнити вашому клієнту:
- Ім’я;
- E-mail;
- Тема повідомлення;
- Тіло повідомлення.
Щоб додати нові поля (наприклад, номер телефону), використовуйте кнопки зверху редактора. Детальна настройка форми – це дуже велика тема, яку немає можливості вмістити в ознайомлювальну статтю, на жаль.
Налаштування відправки на пошту з форми
Ви можете переглянути як виглядатиме лист вже на Вашу пошту після заповнення всіх даних клієнтом у вкладці Лист:
Перш за все, перевірте такі поля:
- Кому: вкажіть email, куди надходитимуть повідомлення. У разі використання хостингу це може бути email на базі Вашого домену, а вже з нього Ви можете пересилати пошту далі, як описувалося в першому параграфі статті.
- Від кого: повинен аналогічно містити email-адресу на базі Вашого домену. Це важливо для коректної роботи пошти.
У результаті може статися ситуація, коли ми шлемо пошту з адреси admin@example.com.ua
на ту ж адресу пошти admin@example.com.ua
. Це нормально, у разі налаштування переадресації це буде працювати.
Інші налаштування можна залишити за замовчуванням або налаштувати за потреби.
Після налаштування форми натисніть Зберегти у верхньому правому куті.
Вставка форми на сайт
Після збереження форми вам буде надано код (наприклад, contact-form-7 id="123" title="Зворотній зв'язок"
). Скопіюйте його:
Перейдіть до розділу Сторінки → Усі сторінки, виберіть сторінку, куди хочете вставити форму, або створіть нову.
Вставте код у текстове поле сторінки або запису:
Після цього збережіть зміни на сторінці.
Тестування форми
Перейдіть на сторінку з формою зворотного зв’язку на Вашому сайті після збереження її змін або публікації:
Як видно, наша тестова форма додана та існує. Заповніть усі поля та надішліть тестове повідомлення.
Після чого плагін повідомить Вас про результат відправки. Якщо все вищеописане було виконано правильно, Ви побачите наступне стандартне повідомлення:
Тепер можна переконатися, що лист дійсно прийшов на пошту на базі нашого домену. Для цього можна скористатися будь-яким поштовим клієнтом, включаючи наш вбудований:
Як бачимо, лист дійсно прийшов відповідно до всіх налаштувань. Аналогічний лист має бути пересланий на пошту, вказану як мету переадресації у першому параграфі статті.
Додаткові налаштування
Captcha (капча). Для захисту від спаму встановіть додатковий плагін, наприклад, reCAPTCHA by Google, та інтегруйте його через налаштування Contact Form 7.
Важливо: без інтегрованої до форми зворотного зв’язку капчі вона обов’язково стане метою спам-ботів та різного виду недоброзичливої активності.
Складальник пошти. GMail славиться своїми ретельними критеріями щодо прийому пошти на свої скриньки, тому для 100% доставляння листів з пошти на базі Вашого домену на пошту GMail ми рекомендуємо скористатися функціоналом під назвою [Імпорт пошти](https://support.google.com/mail /answer/21289?hl=ua) з їхнього боку.