І так, сьогодні будемо розбиратися і налаштовувати плагін Contact Form 7 для WordPress, а саме створювати форму зворотного зв’язку.

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

Плюси плагіна Contact Form 7

  1. Зрозумілість і простота настройки. Людина, який перший раз стикається з даними плагіном без проблем зможе розібратися.
  2. Створення великої кількості різних форм і інтеграція їх на сайт.
  3. Форма вставляється за допомогою шорткода на сторінку і в будь-яке місце сайту. Це дуже зручно.
  4. Підтримка російської та інших мов.
  5. Підтримка Ajax запитів.
  6. Захист від спаму за допомогою текстового питання або капчи. Для капчи необхідно додатково буде встановити плагін Really Simple CAPTCHA.
  7. Налаштування зовнішнього вигляду форми за допомогою css стилів.
  8. Інтеграція з сервісом Akismet, для захисту від спаму.

У нас на сайті Ви можете побачити і поюзати таку форму якщо натиснете на пункт меню “Зв’язатися з нами”, випаде вікно, де можна побачити наочний приклад.

Для початку нам необхідно завантажити цей плагін. Можна з нашого сервера ось посилання -> Завантажити Contact Form 7 або ж з офіційного сайту ось посилання -> Завантажити з офіційного сайту .

Після, того як скачали необхідно його встановити на WordPress . Як встановлювати, я не буду описувати, думаю Ви повинні цей процес знати від А до Я. Завантажили, встановили, тепер безпосередньо переходимо в сам плагін , що б розібратися і налаштувати його.

К содержанию ↑

Налаштування плагіна Contact Form 7 і створення форми зворотного зв’язку

Тепер коли ви завантажили і встановили все як потрібно, переходимо в адміністративну панель WordPress і знаходимо пункт Contact Form 7, клікаєм по ньому і ми потрапляємо на сторінку додавання нової форми.

Плагін Contact Form для WordPress
Плагін Contact Form для WordPress

Створення форми.

Для того, щоб створити нову форму необхідно натиснути на “Додати нову”, далі вибираємо мову (російську за замовчуванням) і натискаємо “Додати нову”. Після всіх виконаних кроків у Вас має бути ось така картина:

Додати форму
Додати форму

Форма створена, тепер будемо її налаштовувати, під ваші потреби і для початку даємо їй назву. У моєму випадку я назву “Тест форма”, ви називайте як хочете і після цього натискайте «Збережемо». Тепер ви можете побачити, шорткод який необхідно буде вставляти в код сайту, де буде виводиться дана форма.

шорткод форми
шорткод форми

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

Справа, що випадає “Згенерувати тег”, якщо його розкрити можна побачити багато полів які додаються в форму.

Поле "Згенерувати тег"
Поле «Згенерувати тег»

Зліва можна побачити поля які вже додані в форму.

Давайте для прикладу, зробимо простеньку форму в якій буде ім’я, пошта, телефон, текстовий питання для захисту від спаму, повідомлення і кнопка відправити.

Робимо текстове поле для імені. У випадаючому списку “Згенерувати тег” вибираємо “Текстове поле”. Ставимо галочку обов’язкове поле, даємо йому назву в моєму випадку “NAME” і присвоюємо id, що б можна було поле оформити за допомогою css стилів. У мене вийшло id = “name”. Внизу можна побачити текст “розмістіть цей код і вставте його в шаблон форми зліва”. Беремо цей код і копіюємо в шаблон форми, як на зображенні:

оформлення текстового поля
оформлення текстового поля

Для пошти (e-mail) аналогічно робимо, для телефону вибираємо зі списку “Згенерувати тег”, поле “Номер телефону” і теж за аналогією робимо.

Для настройки повідомлення вибираємо “Текстове поле” і робимо теж по аналогії з усім вище описаним.

Текстове поле для повідомлення
Текстове поле для повідомлення

Тепер додаємо поле «вопроc«. Для цього в випадаючому списку вибираємо пункт “Питання”, задаємо йому назву. В поле Питання | Відповідь, можна задавати різні питання і відповіді, під полем наведено приклад логічного питання, можна задавати текстовий, наприклад “3 за рахунком місяць року? | Март “і т.д. Код вставляємо як і раніше.

поле "Питання"
поле «Питання»

І останнє що нам необхідно, це кнопка “Відправити”, можна залишити ту, яка в шаблоні або в списку “Згенерувати тег” вибираємо “Кнопка відправки”. Шаблон готовий, натискаємо кнопку “Зберегти”.

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

Ось що у мене вийшло:

Форма зворотного зв'язку
Форма зворотного зв’язку

У Вас повинно бути, щось схоже.

Налаштування адресата форми і повідомлень

Опускаємося трохи нижче шаблону форми і бачимо настройки адресата.

  1. Поле адресат. Вводимо пошту з якої будуть приходити листи відвідувачам які заповнять форму.
  2. Поле відправник. Замість [your-name] <[your-email]>, підставляємо свої шорткоди (назви які давали полях). Подивитися їх можна вище. У моєму випадку буде [NAME] <[your-email]>.
  3. Поле тема. Я завжди пишу Форма зворотнього зв’язку і вказую сайт.
  4. Поле шаблон листи. Тут можна виводити, то що душа забажає. Для нашого прикладу роблю поле Від: [NAME] <[your-email]> і дані Телефон: [tel-231], Повідомлення [your-message]. В кінці пишемо: “Це повідомлення надіслано з сайту LoleknBolek.com ( https://loleknbolek.com )”.
  5. Решта поля порожні.
Налаштування адресата
Налаштування адресата

В кінці не забуваємо збережуться.

Якщо опуститися ще нижче, то можна побачити настройки повідомлень. Тут все російською, тому можете правити під свої потреби, як хочете. Тут думаю самі розберетеся

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

У мене все працює відмінно, після натискання кнопки “Відправити”, бачу повідомлення “Повідомлення було успішно надіслано. Дякую. “Можете тестувати і дивитися які помилки форма буде видавати якщо не правильно ввести дані.

Що стосується css стилів, їх можна додати до головного css файл style.css. За допомогою firebag, можете подивитися id і класи полів і присвоїти їм відповідні стилі.

Плагін Contact Form 7 для WordPress дуже функціональний, можна зробити форму будь-якої складності, я впевнений Ви в цьому переконалися. На цьому я буду закінчувати, якщо якісь моменти не до кінця зрозумілі, пишіть в коментарі буду намагатися допомогти розібратися. Дякуємо.

Поділитися