Сьогоднішній урок допоможе вашому wordpress сайту обзавестися симпатичною і функціональною формою зворотного зв’язку. Зробимо ми її з допомогою плагіна Contact Form 7. Свого часу я витратив чимало часу на пошуки нормальної контактної форми і гідної альтернативи даному модулі так і не знайшов.

Зміст:

  • Можливості Contact form 7
  • Встановлення та налаштування плагіна
  • Два варіанти захисту від спаму – фільтр akismet і captcha
  • Розміщення контактної форми у спливаючому вікні
  • Кілька спливаючих вікон з різними формами на одній сторінці
  • Можливості плагіна

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

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

    Одним словом, плагін мегафункциональный.

    Якщо вас досі хвилює питання «робити або не робити форму зв’язку?» (можна обійтися простим розміщенням контактних даних на потрібних сторінках), то я скажу однозначно – варто робити.

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

    По-друге, контактну форму можна налаштувати і це дозволить вам отримувати листи стандартного зразка – у них буде простіше орієнтуватися. Наприклад, ви можете поставити стандартний заголовок повідомлення «Замовлення» і всі листи зі сторінки замовлень будуть приходити з таким заголовком.

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

    По-четверте, це просто стильно і сучасно.

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

    Плагін є у спільній базі wordpress, тому немає необхідності шукати десь його файли, завантажувати їх собі і потім закидати на хостинг. Все робиться простіше – через адмінку wordpress входите в розділ плагіни, набираєте в поле для пошуку «Contact form 7» і встановлюєте його. Якщо ви ніколи плагіни не ставили, то детальна інструкція як встановити плагін є тут.

    Налаштування плагіна Contact form 7

    Налаштування плагіна складається з двох етапів.

    Перший – це налаштування конкретної форми. Різних форм може бути багато, кожна з них може містити свій набір полів. Одним словом, під кожну задачу і кожну сторінку на сайті ви можете окремо створити форму зворотного зв’язку, wordpress це дозволяє – їх список буде зберігатися в базі плагіна.

    Другий етап – це вставка форми на сторінки сайту. Кожна форма, створена нами всередині плагіна, буде мати власний унікальний шорткод. Для вставки на сторінку достатньо буде вставити тільки його.

    Отже, поїхали.

    Для початку в лівому меню панелі адміністратора знаходимо вкладку Contact form 7. Під нею з’явиться меню з двома пунктами – «Форми» і «Додати нову».

    Поки у нас немає готових форм, тому, переходимо в розділ «Додати нову». Там відкриється сторінка, що пропонує вибрати мову, і там же вказано мову за замовчуванням. Просто натисніть синю кнопку «Додати нову».

    Настройка форми розділена на окремі блоки. Розглядати їх я буду по порядку.

    Блок «Назва форми»

    Перший блок відповідає за назву вашої форми – поставте курсор на напис «Без назви» і введіть потрібне вам ім’я. Це назва буде відображатися тільки вам в списку контактних форм плагіна, так що робіть його зрозумілим для вас, щоб у майбутньому не заплутатися у всьому різноманітті.

    Блок «Шаблон форми»

    Спочатку в цьому блоці задана стандартна конфігурація полів. Вона містить ім’я відправника листа, його електронну адресу, тему листа, вміст листа і кнопку відправити.

    Зірочками позначені поля обов’язкові для заповнення. Якщо це поле залишити порожнім, то повідомлення не буде вирушати.

    Розташування полів можна налаштовувати за допомогою звичайної html-розмітки.

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

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

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

    Виберіть потрібний елемент і налаштувати його параметри. Плагін російською, тому всі налаштування інтуїтивно зрозумілі.

    Перший чекбокс вказує на обов’язковість або необов’язковість поля (він додає зірочку).

    Після налаштування поля у вас з’являться 2 шорткода:

    • «Скопіюйте цей код і вставте його в шаблон форми ліворуч» — цей код вставляється в код форми аналогічно з усіма іншими;
    • «І вставте наступний код у шаблон листа нижче» – цей код знадобиться нам для оформлення листа в наступному блоці.

    Читайте також: Який хостинг краще вибрати для сайту?

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

    Блок «Лист»

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

    Наше завдання включити в лист всю інформацію.

    Першим пунктом ми вказуємо електронну адресу, на який буде відправлятися повідомлення (він може бути будь-яким).

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

    Далі ми вказуємо тему листа. Стандартно, тема береться з поля [text your-subject], який заповнюється у формі. Але можна з форми цей елемент видалити, а в полі вписати конкретну тему, задану в кожному листі автоматично. Я так зробив для форм зворотного зв’язку зі сторінок про послуги і рекламі. Повідомлення звідти завжди приходять з однією і тією ж темою «Замовлення послуг» або «Замовлення реклами» — просто і зрозуміло.

    Поле додаткових заголовків містить тег «Reply-To: [your-email]» для того, щоб при відповіді на лист, отриманий з вашого блогу ви відсилали повідомлення на блозі, а на ту адресу, який вказував відправник листа в полі форми [your-email]. Міняти це поле не варто.

    Поле «Шаблон листа» відповідає за внутрішній зміст отриманого вами повідомлення. За замовчуванням воно містить інформацію про відправника, тему і текст повідомлення, введений у поле [your-message].

    Наприкінці вказується сайт, з якого відправлено лист.

    Якщо ви вносили у форму якісь додаткові поля, не встановлені за замовчуванням, то в шаблоні листи не забудьте додати тег. Він був вам дано в блоці «Шаблон форми», там, де ви генерували відповідний тег (поле «Та вставте наступний код у шаблон листа нижче»).

    Будь-яку текстову інформацію цього блоку (крім тегів) можна міняти по своєму смаку. Також ви можете додати будь-які описи і змінювати теги місцями, розставляючи їх у тому порядку, який вам зручний.

    Блок «Лист 2»

    Якщо ви хочете, щоб відправлене повідомлення отримував хтось ще, то можна поставити галочку в цьому блоці.

    Настроюється цей блок аналогічно попередньому. За замовчуванням усі поля в ньому заповнені для того, щоб лист пішло тій людині, яка заповнювала форму (мабуть, щоб він не забув).

    Ви можете надсилати копії, наприклад, свого менеджера або бухгалтеру.

    Блок «Повідомлення при відправці форми»

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

    Активація форми

    Після того, як ви заповнили всі поля, поверніться на початок до блоку «Назва форми» та натисніть кнопку «зберегти», розташовану праворуч.

    Плагін помістить створену форму в список діючих і привласнить їй спеціальний код приблизно такого вигляду:

    1 [contactform7 id=«5464» title=«Перевірка»]

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

    Боротьба зі спамом — Akismet і Captcha

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

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

    Позбутися від спамерів можна двома способами:

  • Поставити обов’язкову капчу (це можна зробити додатковим плагіном — Really Simple CAPTCHA).
  • Скористатися антіспамерським плагінів для wordpress – Akismet.
  • Перший варіант незручний тим, що змушує відвідувачів вручну вводити додаткові символи. Це не так складно, але деяким не подобається.

    Використання плагіна Akismet зручніше тим, що він самостійно аналізує вводяться дані (імена, email адреси, посилання) і на основі напрацьованої бази робить висновки про спамности або неспамности повідомлення.

    Крім того, akismet стоїть на більшості сайтів wordpress для захисту від спаму в коментарях до статей. Значить, при його використанні не потрібно встановлювати додаткові плагіни і створювати зайве навантаження на сайт.

    Захист від спаму за допомогою Akismet

    1. Встановлюємо плагін Akismet на ваш сайт і активуємо його.

    2. Додаємо в теги контактної форми додаткові дані:

    • у поле з ім’ям автора дописуємо akismet:author
    • в полі email відправника листа akismet:author_email
    • у полі адреси сайту akismet:author_url

    Повинно вийти ось так:

    Після збереження, контактна форма повинна блокувати всі повідомлення, надіслані спамерами. Перевірити роботу фільтра можна за допомогою спеціального тестового імені “viagra-test-123? — при його введенні повинно з’явитися повідомлення про помилку.

    Щоб перевірка була менш жорстка, ви можете перевіряти лише частина полів, наприклад ім’я та електронну пошту, а адреса сайту залишити без перевірки. У цьому випадку ймовірність проходження спамний повідомлень збільшиться, але ви з меншою ймовірністю втратите потрібні повідомлення.

    Читайте також: Кращі плагіни для створення мобільної версії сайту WordPress

    Захист від спаму за допомогою Really Simple CAPTCHA

    Якщо ви виявите, що Akismet вас не влаштовує (пропускає багато спаму або блокує потрібні повідомлення), то ви можете підключити капчу. Для цього встановіть плагін Really Simple CAPTCHA.

    Відкриваємо для редагування потрібну контактну форму

    У списку тегів вибираємо Captcha. У налаштуваннях тегів можна вибрати розмір картинки з символами, в іншому нічого змінювати не варто. У нижній частині настроечного вікна з’являться 2 тега, один відповідає за виведення картинки, другий виводить поле для вводу даних з цієї картинки.

    Щоб капча почала працювати, необхідно скопіювати і вставити обидва цих тега в ліве вікно шаблону форми, після чого зберегти зміни.

    Розміщення форми зворотного зв’язку у спливаючому вікні

    Не завжди контактна форма повинна розташовуватися в якомусь певному розділі сайті, часом, клієнт повинен мати можливість отримати до неї доступ з кожної сторінки ресурсу.

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

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

    Робиться це за допомогою ще одного плагіна — Easy FancyBox.

    1. Установка плагіна

    Першим ділом встановлюємо сам плагін, він є у спільній базі плагінів, тому, достатньо в адмінці вашого блогу в пошуку плагінів ввести його назву. Після встановлення плагіну в розділі «налаштування» з’явиться вкладка «медіафайли».

    У цій вкладці потрібно знайти перелік типів контенту, який повинен відображатися у спливаючому вікні. За замовчуванням стоїть тільки Images, потрібно додати Inline content.

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

    2. Вставляємо код на сайт

    В принципі, можна використовувати звичайну текстове посилання, але кнопка-картинка буде виглядати краще.

    На вашому сайті, там де ви хочете вивести кнопку для форми зв’язку (в шапці, підвалі або сайдбарі) вставте наступний код:

    1
    2
    3
    4
    5
    6
    <a href=«#contact_form_pop» class=«fancybox-inline»><img title=«контактна форма» alt=» контактна форма « src=«http://ссылка на картинку»></a>
    <div style=«display:none» class=«fancybox-hidden»>
    <div id=«contact_form_pop»>
    [contactform7 id=«id вашої форми» title=«назву вашої форми»]
    </div>
    </div>

    У коді вам необхідно вказати адресу картинки, яку ви використовуєте в якості кнопки зворотного зв’язку, і відредагувати шорткод самої форми – прописати ваш id і title.

    3. Знімаємо обмеження на шорткоди в сайдбарі

    Цей пункт необхідний, якщо ви хочете встановити кнопку у сайдбарі. Не завжди сайдбар у вордпрес дозволяє виконувати шорткоди.

    Цю функцію вирішити, потрібно відкрити для редагування файл function.php (прямо з адмінки wordpress) і вставити перед закриваючою дужкою «?>» наступний код:

    1 add_filter(‘widget_text’, ‘do_shortcode’);

    Він дасть можливість виконувати всі шорткоди в сайдбарі.

    У мене вийшла ось така симпатична спливаюча форма:

    Кілька різних екранних форм на одній сторінці

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

    Наприклад, одна кнопка у вас веде на форму з ім’ям і телефоном і служить для замовлення зворотного дзвінка з сайту, а друга повинна відкривати іншу форм де йде докладна заявка на замовлення (з адресою, полем для опису, можливістю прикріпити файл і т. д.). У самому плагіні Contact Form 7 ви можете зробити нескінченну кількість варіантів форм, але як їх впихнути в різні кнопки однієї сторінки?

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

  • Змінюється посилання, параметром href привласнюєте значення #contact_form_pop_2
  • Змінюєте ідентифікатор id те ж значення #contact_form_pop_2
  • Для другої форми вийде такий код:

    1
    2
    3
    4
    5
    6
    <a href=«#contact_form_pop_2» class=«fancybox-inline»><img title=«контактна форма» alt=» контактна форма « src=«http://ссылка на картинку»></a>
    <div style=«display:none» class=«fancybox-hidden»>
    <div id=«contact_form_pop_2»>
    [contactform7 id=«id другої форми» title=«назва другої форми»]
    </div>
    </div>

    Таким чином ви можете виставити багато різних кнопок з формами на будь-якій сторінці ресурсу і вони не будуть конфліктувати.

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