4.2.2 Встановлення та налаштування плагіна Contact Form 7

TheHost Plugin Banner

WP Contact Form — це популярне рішення для створення простих та зручних форм зворотного зв’язку на сайті WordPress. Його головне завдання – допомогти Вашим відвідувачам легко зв’язатися з вами: залишити питання, запросити зворотній дзвінок чи надіслати заявку на послуги. Принцип роботи простий - користувач заповнює форму на сайті, а введені дані надсилаються на вказану електронну адресу. Завдяки гнучким налаштуванням, ви можете створювати форми для будь-яких цілей: від збирання відгуків до реєстрації на заходи. Це незамінний інструмент для будь-якого сайту, будь то особистий блог, інтернет-магазин чи корпоративний ресурс.

Підготовка

Врахуйте: розділ Підготовка актуальний тільки для наших клієнтів, які використовують панель керування ISPManager4, на послугу хостингу або інших.

Перед налаштуванням самого плагіна, слід виконати ряд дій на панелі керування. Цю частину ми покажемо на прикладі хостингу, але вона також актуальна для віртуальних та виділених серверів з панеллю ISPManager4.

1. Перейдіть до панель управління хостингом.

2. Відкрийте вкладку Поштові скриньки та переконайтеся, що у Вас створена поштова скринька на базі Вашого домену, за типом admin@example.com.ua:

Поштові скриньки

3. Майбутню форму зв’язку ми налаштуємо таким чином, щоб вона спочатку надсилала листа на пошту на базі Вашого домену. Вже потім вона пересилатиме листи на потрібну зовнішню пошту, наприклад на Gmail. Для налаштування такого пересилання, відкрийте властивості поштової скриньки та пропишіть потрібну пошту у формі Слати копії листів на e-mail:

Налаштування поштової скриньки

4. Потім відкрийте в панелі керування вкладку Налаштування PHP та переконайтеся, що у графі E-Mail у Вас вказана ця АБО інша пошта на базі Вашого домену:

Налаштування PHP

На цьому приготування закінчено і можна переходити до встановлення та налаштування самого плагіна.

Встановлення плагіна

1. Увійдіть до адмін-панелі WordPress Вашого сайту.

2. Перейдіть в меню Плагіни і натисніть Додати новий у верхньому лівому кутку:

Плагіни, додати новий

3. У рядку пошуку введіть Contact Form 7:

Плагіни, пошук

4. Знайдіть плагін і натисніть Встановити та дочекайтесь установки. Після закінчення натисніть на місці попередньої кнопки нову - Активувати.

Створення форми зворотного зв’язку

1. Після активації в адмін-панелі з’явиться новий розділ: Contact Form 7 → Контактні форми:

Contact Form в адміністративній панелі

2. Перейдіть до цього розділу та натисніть Додати нову:

Додавання нової форми

3. Введіть назву форми (наприклад, Зворотній зв'язок).

4. Відкриється вбудований редактор, у якому потрібно налаштувати поля майбутньої форми зворотного зв’язку. Для зручності пояснення, ми позначимо відвідувача Вашого сайту, що заповнює її, як клієнт:

Вбудований редактор форми Contact Form 7

За замовчуванням створюються такі поля, які потрібно буде заповнити вашому клієнту:

  • Ім’я;
  • E-mail;
  • Тема повідомлення;
  • Тіло повідомлення.

Щоб додати нові поля (наприклад, номер телефону), використовуйте кнопки зверху редактора. Детальна настройка форми – це дуже велика тема, яку немає можливості вмістити в ознайомлювальну статтю, на жаль.

Налаштування відправки на пошту з форми

Ви можете переглянути як виглядатиме лист вже на Вашу пошту після заповнення всіх даних клієнтом у вкладці Лист:

Вбудований редактор форми Contact Form 7, Лист

Перш за все, перевірте такі поля:

Вбудований редактор форми Contact Form 7, Лист, необхідні поля

  • Кому: вкажіть email, куди надходитимуть повідомлення. У разі використання хостингу це може бути email на базі Вашого домену, а вже з нього Ви можете пересилати пошту далі, як описувалося в першому параграфі статті.
  • Від кого: повинен аналогічно містити email-адресу на базі Вашого домену. Це важливо для коректної роботи пошти.

У результаті може статися ситуація, коли ми шлемо пошту з адреси admin@example.com.ua на ту ж адресу пошти admin@example.com.ua. Це нормально, у разі налаштування переадресації це буде працювати.

Інші налаштування можна залишити за замовчуванням або налаштувати за потреби.

Після налаштування форми натисніть Зберегти у верхньому правому куті.

Вставка форми на сайт

Після збереження форми вам буде надано код (наприклад, contact-form-7 id="123" title="Зворотній зв'язок"). Скопіюйте його:

Contact Form 7, шорт-код

Перейдіть до розділу Сторінки → Усі сторінки, виберіть сторінку, куди хочете вставити форму, або створіть нову.

Вставте код у текстове поле сторінки або запису:

Вставка шорт-коду на сторінку

Після цього збережіть зміни на сторінці.

Тестування форми

Перейдіть на сторінку з формою зворотного зв’язку на Вашому сайті після збереження її змін або публікації:

Форма зворотного зв'язку, приклад

Як видно, наша тестова форма додана та існує. Заповніть усі поля та надішліть тестове повідомлення.

Після чого плагін повідомить Вас про результат відправки. Якщо все вищеописане було виконано правильно, Ви побачите наступне стандартне повідомлення:

Повідомлення про успіх

Тепер можна переконатися, що лист дійсно прийшов на пошту на базі нашого домену. Для цього можна скористатися будь-яким поштовим клієнтом, включаючи наш вбудований:

Отриманий лист

Як бачимо, лист дійсно прийшов відповідно до всіх налаштувань. Аналогічний лист має бути пересланий на пошту, вказану як мету переадресації у першому параграфі статті.

Додаткові налаштування

Captcha (капча). Для захисту від спаму встановіть додатковий плагін, наприклад, reCAPTCHA by Google, та інтегруйте його через налаштування Contact Form 7.

Важливо: без інтегрованої до форми зворотного зв’язку капчі вона обов’язково стане метою спам-ботів та різного виду недоброзичливої активності.

Складальник пошти. GMail славиться своїми ретельними критеріями щодо прийому пошти на свої скриньки, тому для 100% доставляння листів з пошти на базі Вашого домену на пошту GMail ми рекомендуємо скористатися функціоналом під назвою [Імпорт пошти](https://support.google.com/mail /answer/21289?hl=ua) з їхнього боку.