Безмежний contact form id. Як зробити форму зворотного зв'язку на WordPress

  05.11.2016 28.07.2017 by JMan

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

1. Можливості Contact form 7
2. Установка і настройка плагіна
3. Два варіанти захисту від спаму - фільтр akismet і captcha
4. Розміщення контактної форми у спливаючому вікні
5. Кілька спливаючих вікон з різними формами на одній сторінці

можливості модуля

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

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

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

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

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

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

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

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

Установка і настройка плагіна Contact form 7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блок «Лист»

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

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

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

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

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

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

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

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

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

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

Блок «Лист 2»

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Поставити обов'язкову капчу (це можна зробити додатковим плагіном - Really Simple CAPTCHA).
2. Скористатися антиспамерського плагіном для 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. Вставляємо код на сайт

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

add_filter ( 'widget_text', 'do_shortcode');

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

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

Кілька різних спливаючих форм на одній сторінці

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

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

Title = «Назва другої форми»]

< / div >

< / div >

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

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

Я вже вам розповідається як можна додати подію відправленого повідомлення в contact form  7 і як відстежувати цілі в WordPress, але з версії 4.2 плагін CF7 дозволяє вказувати більше налаштувань. Сьогодні поговоримо про всіх додаткових налаштуваннях для плагіна WordPress  Contact Form 7.

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

Якщо потрібно вирішити проблему з плагіном: - можна перейти за вказаним URL.

Навігація по сторінці:

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

Додаткові настройки для Contact Form 7

  з версії плагіна 4.2 додаткові налаштування  contact form 7 - розширені

on_sent_ok:  - подія contact form 7, спрацьовує, коли повідомлення було успішно надіслано. Підходить для відстеження інформації в яндекс метриці (цілі) або з метою google analytics. Для того щоб скористатися цією подією досить вставити функцію виклику javascript коду або сам код, наприклад ось так:

on_sent_ok: "alert (" повідомлення надіслано успішно ");"

on_submit: - подія contact form 7, спрацьовує коли була натиснута кнопка відправити / send / submit. Ідеально підходить для цілей google analytics і яндекс метрика мети, адже ви завжди можете дізнатися чому успішна відправка повідомлення не відбулася. Використовувати цю подію можна аналогічно попередньому on_sent_ok:

on_submit: "alert (" ви натиснули на кнопку відправити ");"

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

acceptance_as_validation:  - додатковий параметр CF7, він працює з чекбоксів acceptance і робить кнопку відправки повідомлення активної для натискання, навіть коли acceptance дорівнює false. Чи включається в додаткових настройках CF7 ось такою опцією:

acceptance_as_validation: on

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

Налаштування цілей google analytics в contact form 7

Зараз Поробуйте розповісти вам як налаштувати цілі в contact form 7 google analytics.

Вибачте, станом на 26.06.17 цей код не актуальний у зв'язку з тим що гугл оновив код виклику цілей. Чекайте нової інформації. Дякуємо.

Для початку ви повинні зареєструватися в google analytics (www.google.com/analytics), а також зайти в "Адміністратор", вибрати "Аккаунт" і "Ресурс", створити "Подання" і там налаштувати цілі.

Створюємо уявлення:

А також робимо мета з настройками, текстові поля можуть відрізнятися:

Після того як ви створили мета до неї можна доступитися по через такий код:

Gaq.push ([ "_ trackEvent", "order", "view"])

[Згорнути]

Припустимо у нас є ось такий код для створення цілі в google analytics: _gaq.push ([ "_ trackEvent", "order", "view"]), тепер ми можемо написати обробник події відправленого повідомлення в contact form 7:

on_sent_ok: "_gaq.push ([" _ trackEvent "," order "," view "]);"

якщо ми хочемо відстежувати всі успішні відправки форми, або ось такий код:

on_submit: "_gaq.push ([" _ trackEvent "," order "," view "]);"

якщо нам потрібні всі кліки (з вдалою і невдалою відправкою форми) по кнопці "Відправити"

Записувати цей код потрібно в додаткові настройки contact form 7.

Налаштування contact form 7 мети метрика

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

Не знаєте як отримати код, скористайтеся інструкцією нижче:

1)    Реєструємося в яндекс метриці. Для цього можна скористатися посиланням метрика. Якщо у вас немає облікового запису на Яндексі, то можна тут зареєструватися.

2)    Додаємо наш сайт в метрику і закидаємо собі на сайт код, який дає яндекс.

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

4)    Натискаємо на кнопку "додати мета" і заповнюємо її як у мене на скіни, в кінці потрібно натиснути кнопку "Додати мета"

on_submit: "yaCounter2015xxxx.reachGoal (" Form1 ");"

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

Як ви зрозуміли вставляємо цей код в contact form 7 додаткові настройки, як показано на малюнку:

Подія contact form 7 для кнопки submit / відправити

Я хотів би більш детально зупиниться на події плагіна. Подія on_submit дозволяє відстежувати натискання на кнопку відправити або submit. Це досить зручний функціонал в додаткових настройках, який дозволяє робити власні ефекти при кліці по кнопці відправити і багато іншого. Для виклику досить в додаткові настройки прописати:

on_submit: "goBlackFon ();"

Де goBlackFon - це ваша функція із записаними спец ефектами.

Це нова подія, що виводить плагін contact form 7 на новий рівень і дозволяє фіксувати момент натискання на кнопку Відправити, не чекаючи результатів відправки. Наприклад, якщо нам потрібно при невдалій відправці повідомлення вивести ефект на сторінці або зробити будь-яке інше дію, ми повинні слухати саме цей параметр.

Подія повідомлення надіслано в contact form 7

On_sent_ok - спрацьовує коли повідомлення було відправлено успішно і не працює коли людина не заповнив повністю потрібні дані. На базі цієї функції можна реалізувати: гугл і яндекс мети, різного роду ефекти на сторінка після відправки повідомлення, редіректи на інші сторінки після відправки пошти, додавання або розширення функціоналу (після того як людина заповнила і успішно відправив контактні дані про себе), виклик аякс додатки для подальшої роботи з ним і багато іншого. Мені доводилося реалізовувати генерацію посилання на прихований файл після заповнення форми і це вдалося тільки завдяки події on_sent_ok, Яке потрібно записати в додаткові настройки плагіна. Припустимо нам потрібно викликати свою функцію після відправки повідомлення, це робиться ось так:

on_sent_ok: "myFunction ();"

або ж, можна писати код прям в настройках:

on_sent_ok: "function () (alert (" Повідомлення надіслано успішно ");)"

В нової версії  CF7 код вище працювати не буде.

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

on_sent_ok: "yaCounter2015xxxx.reachGoal (" Form1 "); _gaq.push ([" _ trackEvent "," order "," view "]);"

Для тестування роботи такої форми можна вкинути 2 Алерта в код, такого плану:

on_sent_ok: "alert (" Повідомлення надіслано успішно "); alert (" Другий тест ");"

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

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

Висновок Contact Form 7 в шаблон

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

Зробити висновок Contact Form 7 в віджет або пост досить просто, нам потрібно банально взяти шорткод і вставити в потрібне місце, а ось з довільним висновком в шаблон доведеться повозиться.

Для виведення CF7 в шаблон WP я використовую ось такий код:

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

Встановити плагін можна традиційним способом, через панель адміністратора - вкладка «Модулі», потім - «Додати новий», далі - «Завантажити». А скачати останню версію  плагіна Contact Form 7 можна Також плагін можна закачати на сервер і по FTP, в папку / wp-content / plugins.

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

Щоб з налаштуванням плагіна у вас не виникло проблем, розглянемо детально, як це правильно зробити. Після всіх вищеописаних кроків в адмінпанелі вашого блогу з'явиться ось така вкладка:

При натисканні на неї з'явиться вікно налаштувань плагіна, яке складається з декількох пунктів:

- Налаштування поля «Title» вашої майбутньої форми зворотного зв'язку.

- Редагування всіх запропонованих полів форми.

- Налаштування поля адресата.

- Налаштування додаткових полів і функцій.

В налаштуваннях поля «Title» можна змінити назву форми зв'язку. Для цього лівою пахвою клікніть по поточному назвою «Форма для контактів 1» і впишіть свою назву. Ця функція організована тільки для зручності адміністратора, і істотно нічого не змінює. Натисніть кнопку «Зберегти».

Далі будемо налаштовувати саму форму зв'язку. Тут можна додавати і видаляти поля для розширення або зміни функціональних можливостей  форми зворотного зв'язку. Для додавання додаткового поля в форму необхідно натиснути кнопку «», а з випав списку тегів ви вже виберіть потрібний вам тип поля.

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

В результаті отримаємо:

Не плутайте порядок побудови полів форми, так як поля будуть відображатися зверху вниз, по звичній для всіх схемою. Для повного набору функціональних можливостей плагіна можна додати поле «Captcha» для того, щоб не допустити проникнення спамерських розсилок. Але для організації цієї функції вам доведеться встановити ще один плагін - Really Simple CAPTCHA.

Як налаштувати адресат?

В поле "Адресат" введіть електронну адресу на який будуть відправлятися повідомлення, тобто - ваш.

Поле "Відправник" - тут вказуються вихідні параметри відправника.
  Поле "Тема" - налаштовується відображення теми, що відправляється.
  В поле "Додаткові заголовки" можна ввести дополнітельний- (е) ​​заголовок- (ки) повідомлення. Але це не обов'язково.
  В поле "Прикріплені файли" вказуються файли, які необхідно прикріпити і відправити.

«Використовувати - HTML-формат листа» активуйте за бажанням.
  Додаткова функція - використання другого адреси. Налаштування ще однієї адреси виробляються в поле «Використовувати Адресат (2)».
  Налаштування форми зворотного зв'язку закінчена. Тепер необхідно додати її на сторінку сайту, зазвичай її називають «Контакти» або «Зворотній зв'язок».

Як додати форму на сайт? Створіть на сайті нову сторінку з назвою, скажімо, «Контакти».

Введіть всю необхідну інформацію. Сторінку озаглавьте «Контакти». Переведіть редактор тексту в HTML-режим і вставте в сторінку наступний код (він був запропонований вам раніше):

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

Все майже готове, залишилася одна проблема, і ви самі визначите, чи варто вам її вирішувати. Вашу сторінку з формою зворотного зв'язку можуть коментувати. Щоб цього уникнути, коментарі потрібно вимкнути, а для цього виконайте наступні дії:

- Перейдіть в адмінпанелі на сторінку «Контакти», далі - «Властивості», приберіть галочку з пункту «Дозволити коментарі» і обновіть сторінку.

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

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

Особливість Contact Form 7 - він відмінно підійде як новачкові, якому просто потрібна контактна форма, так і запеклому профі, який любить поколупатися в настройках і зробити все «під себе».

Я не буду зупинятися на установці плагіна, впевнений, що все впораються з цим.

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

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

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

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

Я, як любитель мінімалізму, все підписи прибрав, а назви полів додав в placeholder поля.

Contact Form 7 підтримує 16 типів тегів, Які зроблять форму будь-якої складності. Це і звичайні текстові поля, і спеціальні поля під телефон і E-mail з валідація, і чекбокси, і купа інших полів. Кожне поле підтримує настройку, давайте розглянемо докладніше.

Налаштувань багато, але далеко не завжди все вони використовуються:

• Галочка « Обов'язкове поле»- робить поле обов'язковим для заповнення.
• поля id  і class  дають можливість призначити полю власний клас або ідентифікатор. Іноді буває необхідно, для призначення полю окремих стилів.
• поля size  і maxlength  встановлюють розмір і максимальну довжину вмісту в поле. Я жодного разу не використовував і не можу придумати жодного сценарію використання. Якщо у вас є ідеї - поділіться в коментарях
• Налаштування імені автора  від плагіна Akismet, я теж ніколи не використовував. Використовується для боротьби зі спамом.
• Значення за замовчуванням  я використовую майже завжди. Мені не подобається окремо підписувати поля в формі, тому я використовую це значення як заповнювач / placeholder

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

налаштування адресата  досить прості. Власне, адреса власника, на який потрібно надсилати форми, адреса відправника, який автоматично створюється на основі даних форми (можна налаштувати фіксований адресу), тема листа.

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

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

Буквально пару слів про опції « Адресат-2 ": Вона дає можливість відправляти контактну форму на ще одну адресу email. Налаштування аналогічні блоку з адресатом. Штука досить зручна, але далеко не всім знадобиться.

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

Модулі для Contact Form 7

Contact Form 7 Integrations

Дуже потужний плагін для інтеграції контактних форм сайту і сторонніх сервісів на зразок MailChimp і Google Docs. У плагіна досить специфічна функціональність, але з розвитком CRM систем в крупних компаніях, його корисність зростає.

Contact Form DB

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

Contact Form 7 Select Box Editor Button

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

Contact Form 7 reCAPTCHA Extension

Як зрозуміло з назви - плагін додає в Contact Form 7 можливість вставки reCAPTCHA. Оригінальний плагін вже підтримує вставку капчи, але загальновизнаний лідер цього ринку все ж саме reCAPTCHA, тому не буде зайвою можливість її установки.

Contact Form 7 Modules

Плагін дозволяє вставляти в контактні форми приховані поля (hidden fields). Далеко не всім це необхідно, але познайомитися з ними я все ж раджу. Крім того, ці поля можуть містити дані про записи або сторінці, з якої відправлено форма, вміють передавати url сторінки і автора записи.

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

Contact Form 7 Dynamic Text Extension

Дивовижний плагін, який додає в Contact Form 7 два нових типи полів - поле з динамічним содаержаніем і приховане поле з динамічним змістом. Скажу простіше, значення в поле формується шорткодом, з усіма наслідками, що випливають безмежними можливостями. Кілька інформаційних шорткодов вже вбудовано в плагін, так що протестувати роботу плагіна можна, не заглиблюючись в нетрі настройки. Але все ж це плагін з серії «не для всіх», майте це на увазі.

Contact Form 7 Phone Module

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

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

Вдалого дня

Коментарів: 62

1. Psyonid

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

2. Андрій Зенков

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

3. Костянтин

   А досвід роботи з плагіном Contact-Form-7: 3rd Party Integration є?

4. Павло

   Дякуємо! Найцікавіша стаття!

5. Alex

   Мені потрібно зробити можливість для користувача додавати поля. Наприклад йому потрібно вписати Не 1 людини, а 10. не хочеться робити «простирадло» з 10 однакових полів. Хочеться щоб була кнопка «додати користувача» яка або додає поле, або показує раніше приховане. Можна цього досягти з даними плагіном?

   Не думаю, що CF7 так зуміє. Спробуйте FormCraft c Codecanyon

6. pycc-site

   Дякую за статтю. Але все одно не виходить налаштувати форму для свого сайту

7. mike

   добрий день. шановний, а як на слайдер встановити форму зворотного зв'язку і таймер зворотного відліку?

8. Азат

   Добридень! Форма відправляє лист. Після відправки сторінка повинна перезавантажуватися, але замість цього видає помилку ERR_EMPTY_RESPONSE. Це хром видає. Загалом можна відобразити сторінку, нібито. Гугл нічого не знайшов. Перевстановив плагін - марно. Техпідтримка хостингу говорить, що блокується watch.js від Яндекс. це Вебвізор, який підключений до сайту. Без нього те ж саме абсолютно, та й якось щоб через скрипта Яндекса тут сайт падав - якесь марення. в чому може бути проблема?

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

9. Максим

   Доброго дня! У мене проблема з відправкою файлів, а саме в тому, що файли приходять без назв тільки з розширенням. Це властиво для файлів з назвою російською мовою, якщо у файлі перші літери назви латинські, а інші російські, то файли доставляються з нормальним назвою. Хто з таким стикався, як вирішити цю проблему?

   • Іван

     Я зіткнувся з таким-же поведінкою. Максим, чи вдалося вирішити проблему?

10. Alex

    Доброго дня. Ніхто не стикався, чи можна до мітках меню (select) прикрутити class або id (потрібно для вибору ПІБ співробітника зі списку і його фото. Якраз для фото і потрібно). Спасибі заздалегідь!

11. Остап

    Здравствуйте! Зіткнувся з такою проблемою: було на сайті близько 6-7 готових форм розташованих на різних сторінках  сайту, сьогодні зайшов і виявив що плагін пішов (!!!) сам! На сторінках шорткоди стоять, а самого плагіна немає! Відкотився аж на тиждень назад, тільки потім з'явився знову! Але справа в тому що в тому бекап немає половини важливих форм які вже були! Хотів зробити бекап тих які є, а немає такої можливості. Встановив останній бекап сайту на якому вже немає плагіна, хотів встановити заново і ось що мені видає:
      Каталог призначення вже існує. / Home / nat0703 / g / wp-content / plugins / contact-form-7 /
      Установка плагіна не вдалася
      Хто знає в чому проблема, підкажіть будь ласка!

12. Дмитро

    Дякую за статейку - знайшов в коментах то що шукав)))
      Ось відповідь на найчастіше питання  «Не надсилається лист». Зв'язався з техпотдержкой свого хостингу - сказали щоб перейшов з php5.2 на php5.3 ... Зробив, все ОК.
      хай щастить

13. Андрій

    Добрий вечір! Може підкажете проблему. Все відправляється і доходить крім файлів. Від файлів тільки назви приходять. В папці wpcf7_uploads теж немає. Ставив 777. Все одно навіть в папку не потрапляють.
    Може хто стикався з такою проблемою. Наперед дякую!
      З повагою Андрій

14. Олексій

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

    • Андрій

      Вся проблема в вашому шаблоні, а конкретніше в style.css
        Там прописані жорсткі рамки для всіх текстових полів, тому розмір і не змінюється

15. Дмитро

    Може хто на цьому сайті допоможе:
      Цікавить можливість реалізації додавання товарів в корзину за допомогою заповнення Ajax форми покупки, як на цьому сайті: veschichka.com/help/how-to-order/. Можна і не Ajax, а за допомогою Contact Form 7, головне-щоб працювало.
      Конкретніше: додавання товару в корзину відбувається шляхом заповнення спеціальної форми, в якій вказуєш ціну товару з сайту taobao, посилання на нього і зворотні дані (Все це легко робиться за допомогою Contact Form 7). Після заповнення форми товар з'являється в кошику !!! При чому ціна та, яку вказали ви в цій самій формі.
      Як мені раелізовать таку ж можливість !?
      Потрібно, щоб ці з цієї форми йшли в кошик, в якій буде проводитися підсумовування цін замовлення і згодом, відправлятися у вигляді листа на пошту замовнику для оплати.А ще краще, якщо в цій самій кошику буде прикручена форма оплати.
      Сподіваюся, на даному блозі мешкають досить досвідчені й чуйні люди. Буду дуже вдячний за відповідь. Стежу за коментарями ...

16. Олексій

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

17. jaks

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

    Відпишіть в техпідтримку хостингу, це у них вирішується ваше запитання

18. Михайло

    Добрий день. Підкажіть будь ласка, в чому справа. Чи не працює contact form 7. Після заповнення форми, дуже довго думає і в підсумку видає помилку 504. Тобто сама форма налаштована правильно, але до пошти не доходять листи, те ж саме стосується входу і реєстрації в особистому кабінеті  (Плагін wp-recall).
      Підкажіть будь ласка, що робити?

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

19. Сергій

    Доброго дня! На сайті інстальований плагін спливаючих вікон «dreamgrow-scroll-triggered-box». А також плагін Contact Form 7. Ідея така, що хочу виводити в спливаючому вікні форму зворотного зв'язку CF7. Але при натисканні кнопки «відправити» не відбувається візуальна інформація відвідувачеві, тобто немає повідомлення, що неправильно заповнені поля, або повідомлення успішно відправлено. Але при цьому повідомлення приходять мені на пошту, тобто функція відправки на e-mail працює. Що порадите в даному випадку?

20. Юрій