Вітаю! Сьогодні в Інтернеті дуже швидко розвивається такий напрямок, як зворотний зв'язок між власником сайту та клієнтом. Паличкою виручалочкою у цьому стає спеціальна форма для спілкування. Саме тому я поставила собі за мету допомогти вам вибрати плагін зворотного зв'язку wordpress.
Навіщо потрібна форма зворотного зв'язку
В даний час нам важко уявити, що раніше доводилося вручну копіювати або набирати адресу електронної пошти, зі свого е-мейлу писати листа продавцю і чекати відповіді тривалий час. Адже за цей проміжок, поки клієнт заходив на пошту і писав листа, він міг втратити або забути потрібний url, забути саме питання і багато чого могло статися. А для власника міг бути втрачений клієнт у цій ситуації. Уловлюєте сенс?
Сучасні розробки програмістів, такі як форми зворотного зв'язку, активно допомагають власникам комерційних ресурсів не прогаяти жодного клієнта, а інтернет-користувачам дозволяють економити свій час і, задовольнивши потреби, купувати.
Де знайти готові шаблони чи заготовки
Щоразу при створенні нового сайту або станиці вебмайстру доводиться вибирати найкращий плагін вордпрес для форми зв'язку. Тому що замовнику далеко не завжди може сподобатися проста та стандартна форма. Іноді потрібно багато різноманітних штук одночасно на одній сторінці.
Форма для можливості зворотного зв'язку є однією з важливих частин wordpress сайту. Без неї упускається можливість завжди бути на зв'язку з відвідувачами та клієнтами. Крім цього без цієї примочки зростає можливість втрати потенційних покупців.
Плагіни WordPress користуються популярністю завдяки своїм переваг: постійно виходять оновлення, які дозволяють швидко та якісно розробити сайт. Така програма полегшує додавання контактної форми на сайт, а також можливість створити форму, що спливає, форму з відліком часу або замовити дзвінок.
У цій статті я хочу познайомити вас з найбільш популярними програмами та сучасними новинками:
- Contact form 7
- Fast Secure Contact From.
- Contact Form by Contact ME
- FormCraft
- Visual Form Builder
- NForms
- Gravity Forms
- Ninja Forms
- Ninja Kick
Я постараюся дати коротку характеристику цим популярним плагінам, щоб ви змогли підібрати потрібний для себе варіант.
Contact form 7
Cf7 сьогодні це найпопулярніший плагін для вордпрес.
Перевагамиу нього є:
- AJAX - надсилання повідомлень.
- Вбудована капча.
- Спеціальний спам-фільтр.
- Дозволяє завантажувати файли.
Ця розробка є абсолютно безкоштовною і її легко підлаштувати під різні потреби за допомогою HTML. Використовуючи спеціальний код, який складається лише з одного рядка, можна розмістити створену контактну форму в будь-яке місце на сторінці.
Цей плагін хоч і популярний, але не позбавлений недоліків. Одним із таких є недолік готових шаблонів. Якщо вам потрібно змінити оформлення, то доведеться це робити, використовуючи CSS.
Fast Secure Contact From
Fast Secure Contact From це нестандартна технологія, що має високу популярність. В основному він використовується власниками блогів для створення та додавання контактної форми на сайти.
Цей конструктор має розділ адміністратора, за допомогою якого можна робити необмежену кількість форм. Використовуючи капчу та спеціальний захист, конструктор здатний блокувати атаки, що базуються на тактиках спамерів.
Позитивними сторонами плагіна є:
- Не дозволяє реєструвати профіль простим користувачам.
- Надає можливість формування графіка, онлайн-зустріч.
- Підтримує кілька адрес електронної пошти.
Мінусом було визнано відсутність простого інтерфейсу, але цей недолік не стоїть руба і розробники конструктора працюють над його усуненням.
Contact Form by Contact ME
Contact Form by Contact ME – це доступний конструктор, який має у своєму арсеналі стандартний набір основних функцій. Він працює лише після проходження реєстрації на сайті. Ця процедура проста та безкоштовна. Розробники вважають, що він кращий за інші розкручені плагіни, навіть CF7.
Цей конструктор має безліч потрібних функцій:
- Надсилає повідомлення одразу на пошту та телефон.
- Дозволяє додавати у форму скрипт.
- Підтримує логотип для карти, дані про компанію та посилання на соціальні мережі тощо.
Відштовхує власників веб-ресурсів здебільшого від використання такої розробки лише наявність реєстрації на сайті Contact me.
FormCraft
Плагін FormCraft спочатку створювався та підтримувався лише як преміум додаток. Нещодавно його творці зробили і безкоштовну версію – FromBuilder, доступну кожному інтернет-користувачу.
Він підтримує конструювання різних форм у своєму вбудованому редакторі. Можливостей у нього менше, в порівнянні з преміум версією, у якої є скриптова логіка, автозбереження і безліч полів, що настроюються. Однак він визнаний одним з найкращих на сьогодні (як безкоштовна, так і преміум версія додатка, що розглядається).
Visual Form Builder
Ще один конструктор Visual Form Builder – розробка, яка дозволяє створювати та здійснювати контроль над усіма формами з одного місця. За допомогою всього одного кліка ви зможете керувати полями, антиспамом та реорганізовувати раніше створені форми. Звучить привабливо, правда?
Плюсами цього плагіна є:
- Можливість зміни порядку елементів звичайним перетягуванням.
- Здатність експортувати дані у файл CSV.
- Надсилання контрольованих повідомлень з підтвердженням.
- Можливість вказівки множини url адрес.
А мінус всього один - якщо у вас дуже великий сайт, то краще скористатися іншим плагіном, тому що він зберігає всі ці форми в базі вашого вордпресу. А це може суттєво знизити його працездатність та відкритість. Мені здається, що ви розумієте, наслідки перевантаження (тривале завантаження, зниження кількості переглядів тощо).
nForms
nForms нагадує досить простий шаблон з Ajax відправкою. Створена форма відображатиметься за допомогою спеціального шорткоду або віджету. Це досить цікавий варіант, але підходить не для будь-якого сайту (треба зіставляти результат із вашим макетом). Ця програма надає вам більше, ніж просто контактна форма. Зацікавились? Тоді проведіть експеримент, можливо, така форма стане своєрідною фішкою вашого сайту.
Gravity Forms
Gravity Forms є найповнішим рішенням для створення форми зворотного зв'язку на сайт. Багато хто вважає його найпросунутішим для вордпресу. Така технологія має візуальний якісний редактор, що дозволяє створювати ускладнені варіації. А також у конструктор вбудована функція, що полегшує використання довгих розробок та вбудовування їх у велику кількість сторінок.
Крім цього, конструктор має індикатор заповнення, який повідомляє про те, наскільки заповнена форма. Можна назвати незаперечними плюсами:
- Наявність функцій, які відсутні в інших конструкторах (калькулятор відвідувачів у режимі реального часу, створення форм замовлень).
- Присутність залежних полів, сторінок чи секцій.
- Можна вибрати кнопку надсилання.
А ось до мінусів доведеться віднести лише високу вартість плагіна. Але це вельми спірний мінус, адже програма здатна запропонувати дещо більше, ніж контактна звичайна форма. А хіба не це вам потрібне?
Mapped Contact Form Pro WordPress
Додаток Mapped Contact застосовує трохи змінений процес для відображення форми на сайті. Це чудове рішення для великої компанії або мережі фірм, тому що може позначати філії на карті Google. Виходить, що це досить корисний плагін, чи ви згодні?
Важливою перевагою є можливість вказівки розташування кожного місця, яке розглядається на сайті. Достатньо лише помістити шорткод (short code) в будь-який запис або будь-яке місце на сторінці. Зробити це нескладно, тому таку процедуру впорається будь-яка зацікавлена людина.
Ninja Forms
В останній період плагін Ninja Forms став набирати популярності. Цей конструктор форм відрізняється від інших потужністю та присутністю найзрозумілішого редактора, який використовується пріоритетно у платних плагінах. При його використанні вам буде доступне будівництво своєї унікальної форми звичайним перетягуванням та налаштуванням блоків. Всі поля створюються будь-якою з обраних мов, у тому числі і російською.
Позитивними сторонами такої розробки можна назвати:
- Досить широкий функціонал.
- Присутність зручного перемикача для можливості перегляду та тестування конструкцій.
Негативними сторонами будуть:
- безліч налаштувань, здатне заплутати початківця.
- наявність преміум модулів, які можна підключити окремо (такі як прийом платежів, розсилок пошти).
Ninja Kick
Ninja Kick - незвичайне рішення з усіх, яке відрізняється тим, що виводить окрему панель з різних сторін сайту. У його функціоналі є безліч налаштувань, більшість яких спрямована на коригування зовнішнього вигляду форми. Налаштування для полів дуже малі і це трохи засмучує інтернет-користувачів.
Цей плагін дуже цікавий та унікальний, але навряд чи підійде для серйозного сайту. Його найчастіше використовують власники розважальних порталів чи блогери.
Ось ми з вами розглянули різні доповнення для створення зворотної форми вордпрес і дійшли висновку, що для різних ситуацій, сайтів і цілей можна підібрати свій плагін. Як кажуть: «Було б бажання, а решта знайдеться».
Покроковий посібник зі створення форми зворотного зв'язку
Тепер давайте подивимося, як саме створюються ці форми на прикладі CF7:
Якщо вам потрібно добивати або змінити поля, знайдіть список під назвою «Сгенерувати тег» і виберіть зі списку необхідний тип поля. Ця функція дозволяє набути форми абсолютно будь-якої складності. Така функціональність дозволяє легко створювати унікальні продукти.
- Після проведених маніпуляцій, ви побачите, як виглядатиме форма для відвідувачів. Вона буде найпростішою і особливо нічим не примітною, але якщо ви маєте початкові навички програмування, можете пограти зі стилями.
Ось і розібралися з тим, як зробити форму через програму Contact Form 7. Нескладно, правда?
Маю бажання ще сказати пару слів про захист вашої поштової скриньки від напливу спамерів: «Щоб до вас на електронку не приходив спам, незайвим буде додати у форму зворотного зв'язку капчу. Вона встановлюється за допомогою функції "генерації тега". А для її функціонування буде потрібне доповнення Really Simple CAPTCHA. Закінчивши налаштовувати доповнення, ви зможете забути про проблему зі спамом.
А також через плагін можна налаштувати форму листа, що надходить на вашу пошту. Для цього доведеться знову звернутися до шаблону створеної форми. У ньому залишиться набрати текст, який перебуватиме в отриманому повідомленні із зазначенням імені відповідних полів обов'язково у квадратних дужках! Не прогаяти цей момент, інакше не отримайте потрібний результат.
І на завершення, можна сказати, що форма готова, залишається лише редагувати повідомлення за необхідності.
Ось так можна самостійно створювати форми для зв'язку WordPress. Це досить трудомісткий процес, який займає чималу кількість часу. Якщо з якихось причин вам не до кінця зрозумілий весь процес створення або редагування, то на допомогу прийдуть фрілансери, їм ви можете замовити конструювання форми. Це люди, які приватно допоможуть вам, і за роботу вони беруть не так багато, як у приватних фірмах. Хочу порекомендувати вам перевірені сайти, де виконують такі замовлення якісно та вчасно:
На закінчення статті давайте підіб'ємо підсумки:
- сформулювати форму зворотного зв'язку на сайт можна через плагін;
- це найпростіший і найшвидший спосіб.
Зараз є безліч плагінів на будь-який смак і навіть гаманець, тому вибір залишається тільки за вами. Однак, якщо ви не бажаєте створювати форму самостійно, можете звернутися за допомогою до професіоналів у своїй справі.
Ну все, поки що.
З повагою, Олена Ізотова.
Форма зворотного зв'язку – один із найважливіших елементів на сайті чи блозі на WordPress
З її допомогою підтримується безперервний контактний зв'язок із покупцями, читачами, партнерами. До того ж, якщо зворотний зв'язок відсутній, зникає багато можливостей для залучення нових клієнтів. Це набагато ефективніше, ніж звичайна контактна інформація на сайті.
Що потрібно для створення зворотного зв'язку на WordPress?
Зворотний зв'язок може бути створений у різний спосіб. Найкраще рішення – за допомогою плагіна. Найбільш затребуваними є:
- Contact Form 7;
- Usernoise;
- SimpleModal Contact Form;
- Custom Contact Forms;
- Slick Contact Forms.
Чому варто зробити вибір саме на користь плагінів WordPress? Тому що вони мають масу переваг, наприклад, постійно оновлюються, що у свою чергу гарантує надійність. До того ж, підходящий плагін для WordPress є найкращим помічником, який допоможе зручно розробити сайт, а контактна на сайті буде додана без зусиль. І це не кажучи вже про різні корпоративні сайти, що продають, де буває нерідко потрібна досить специфічна контактна форма. 
Contact Form 7 – швидкий контактний зв'язок та простота налаштувань
Плагін CF 7 дає можливість легко і просто створювати та налаштовувати зворотний зв'язок. Він дуже легкий, абсолютно не вантажить сайт, а також вважається найпростішим у налаштуванні. Багато хто вибирає саме його, працюючи з ВордПрес. Contact Form повністю русифікований, що дуже зручно, та має інтуїтивно зрозумілі налаштування, розібратися з якими дуже легко. При цьому він повністю безкоштовний і гнучкий. Є як проста установка – для всіх, кому подобається простота, так і багато глибини та складності – для всіх, хто любить заглибитись. Підтримує різні форми у вікні, відправку через AJAX, інтеграцію з Akismet, завантаження файлів, а також оснащений захистом від спаму за допомогою капчі і текстового питання. Багато хто визнав його одним із найкращих плагінів для системи управління контентом. CF 7 дозволяє створювати на сайті на WordPress найрізноманітніші складні форми. У списку відразу відображаються шорткоди, необхідні для вставки на сторінку.
Usernoise – спливаюча і красива форма зворотного зв'язку
Usernoise має дуже широкий функціонал, дозволяючи зробити гарну і просту у розумінні спливаючу форму у вікні. Але є певний мінус - повна частина його можливостей представлена платною версією. Однак багатьом достатньо функцій, які представлені у безкоштовному варіанті. За промовчанням Usernoise для WordPress вже налаштований як потрібно, все, що потрібно – просто його ввімкнути. Подальші налаштування, за бажанням власника сайту, здійснюються також неважко. Можна змінювати розташування кнопки, змінити її колір і тло тексту, додати іконку до кнопки, змінити шрифт та змінити стандартні написи. Все це легко налаштовується з адмінки. За його допомогою кнопка стане унікальною. Плагін повністю русифікований, що максимально полегшує роботу з ним. Ідеально підходить для блогів. Usernoise підтримується практично всіма відомими браузерами - Opera, Firefox, Safari, IE7 (від 7 версії). Головною перевагою даного плагіна є його висока продуктивність, він не впливає на швидкість завантаження.
SimpleModal Contact Form – швидка спливаюча форма у модальному вікні
SimpleModal Contact Form (SMCF) є зворотним зв'язком, який інтегрований в модальне спливаюче вікно. Працює на WordPress за допомогою jQuery. Плагін російськомовний завдяки Миколі М'ясникову та іншим «народним умільцям», які беруть участь у його русифікації. Переклад російською мовою виконано максимально грамотно, враховуються всі найменші деталі. Спливаюче вікно, яке виводить SMCF зовні нагадує вікно плагіна Lightbox. Це дуже зручна річ для всіх, хто хоче дати можливість користувачам написати листа, просто у спливаючому вікні будь-де – наприкінці посту, на окремій сторінці або в Сайдбарі. Все працює дуже швидко та зручно. Установка здійснюється традиційним способом. Також зворотна форма перевіряє правильність заповнення полів уведення. У опціях є можливість зробити автоматичне встановлення заголовка сторінки в темі листа, що є досить вагомою гідністю, коли він використовується для замовлення до опису товарів. Тема листа дозволить одразу побачити який товар замовлено. 
Custom Contact Forms – зворотні форми будь-якої складності
Плагін Custom Contact Forms (CCF) дуже популярний сьогодні. З його допомогою можна створити форми будь-якої складності на WordPress. Але, слід зазначити, що CCF немає російської локалізації. Хоча це не відіграє особливої ролі, оскільки розібратися в ньому простіше, навіть тим, хто не знає англійську мову. Створені форми вставляються у будь-які сторінки, матеріали та окремі записи. Для створення простої форми не потрібно копатися в налаштуваннях, все, що потрібно - вписати код в будь-яку статтю, а далі все робиться автоматично. Є також спеціальний віджет, який можна вставити в бічну панель, або ж будь-які інші місця на сайті, відведені під віджети. Ніяких спеціальних знань CSS для налаштування при цьому не потрібно, а налаштовується практично будь-який аспект: кольори, розміри, межі, відступи. Управління стилями здійснюється прямо в адмінці WordPress, там, де налаштовуються всі поля введення значень. Працює на сучасних технологіях Ajax та jQuery.
Slick Contact Forms – просте додавання кількох зворотних зв'язків
Плагін для ВордПрес Slick Contact Forms створює віджет, який може бути застосований для додавання декількох форм контакту на сторінці. З ним зворотну можна зробити плаваючою, що випадає і виїжджає. З'являється при кліку за посиланням у вигляді панелі, що розкривається. Вигляд дуже акуратний та красивий. Вставляти її в блог досить просто, особливо якщо використовувати віджет. Віджет вже містить всі необхідні параметри та налаштування – швидкість розгортання та згортання, ширину, загальну назву та назву полів, кількість полів, положення на екрані, зворотну електронну адресу, розташування текстових полів. Є також кілька варіантів оформлення. Можна зробити і з використанням шорткоду, але це складніше. Це один із найбільш дружніх та надійних інструментів WordPress.
Всі плагіни, перераховані вище, заслуговують на увагу і мають свої переваги. Однак вибір буде залежати від особистих переваг. Наприклад, якщо необхідно вбудувати зворотний зв'язок у сторінку, то краще вибирати перші плагіни, зокрема Contact Form 7. Якщо спливаючі вікна більше подобаються – краще зупинити вибір на SMCF і Usernoise.
Практично щоразу, коли вебмастер розробляє новий сайт, йому доводиться вибирати найкращий (під конкретні потреби) WordPress плагін для контактних форм та форм зворотного зв'язку. Зазвичай так відбувається, тому що клієнту не завжди подобається проста контактна форма, а іноді виникає необхідність і відразу в декількох формах на одному сайті.
Форма зворотного зв'язку – це один з найважливіших елементів WordPress сайту, адже без нього ви втрачаєте чудовий шанс завжди тримати зв'язок зі своїми читачами, партнерами, покупцями. Крім того, ви упускаєте безліч можливостей залучити нових клієнтів. WordPress плагін форми зворотного зв'язку полегшує додавання контактної форми на ваш сайт. Я вже не кажу про різні корпоративні сайти, що продають, де іноді потрібні дуже специфічні форми не тільки для простих контактів.
У цій статті я перерахую найпопулярніші плагіни в абсолютно випадковому порядку. Стаття обов'язково доповнюватиметься з часом найкращими рішеннями.
Contact Form 7 – це найбільш популярний (зараз налічується більш ніж 12 тисяч завантажень, і ця цифра продовжує зростати) WordPress-плагін контактної форми. Плагін може похвалитися AJAX-відправкою, вбудованою, Akismet-спам-фільтром та можливістю завантажувати файли. Плагін абсолютно безкоштовний та легко кастомізується за допомогою простого HTML
Плюси: Якщо вам потрібна проста контактна форма, цей плагін те, що ви шукаєте, тому що його потрібно просто встановити та налаштувати за допомогою простої сторінки налаштувань. За допомогою коду, що складається з одного рядка, можна вставити контактну форму будь-який запис або сторінку.
Мінуси: Технічно цей плагін не потребує доопрацювання, але було б непогано мати дещо на вибір. Якщо ви захочете змінити оформлення форми, вам доведеться погратись із CSS.
Fast Secure Contact From – це ще один популярний плагін, який вже був завантажений понад 3.5 мільйони разів. Він дозволяє власникам блогів легко створювати та додавати контактні форми на WordPress-сайти. Ви також можете використовувати форму, щоб надсилати запити-запрошення до звичайного або відео-дзвінка.
У плагіна є адмін-інтерфейс, за допомогою якого ви можете створити необмежену кількість форм і переглядати їх прищеплення. Використовуючи капчу та Akismet Fast Secure form, блокує атаки, засновані на найбільш популярних спамерських тактиках.
Плюси: На відміну від інших подібних плагінів, Fast Secure form не дає користувачам можливості зареєструвати профіль, але він може запропонувати інші чудові функції, серед яких можливість створення графіка, онлайн-зустрічі, підтримка кількох email-адрес тощо.
Мінуси: У поточній версії плагіна відсутня простий інтерфейс, але автор плагіна нещодавно випустив бета-версію, в якій справи з інтерфейсом набагато кращі. Таким чином, проблема інтерфейсу стоїть не так гостро.
Contact Form by Contact ME
Contact Form – це безкоштовний у базовому функціоналі плагін, але він зобов'язує зареєструватися на сайті contactme.com. Реєстрація абсолютно безкоштовна і не вимагає від вас жодних зусиль. Розробники плагіну заявляють, що він на порядок кращий від багатьох популярних плагінів контактної форми, включаючи contact form 7!
Плюси: плагін радує деякою корисною функціональністю - опцією для посилки повідомлень на вашу поштову скриньку і смартфон, можливістю додавати довільний код або скрипти у форму, а також тим, що він поміщає у форму логотип для картки, контактну інформацію компанії, і навіть посилання на профілі в соціальних мережах та багато іншого.
Мінуси: Для того, щоб використовувати плагін, вам доведеться створити профіль на сайті Contact Me. Навіть незважаючи на те, що реєстрація проста і безкоштовна, все-таки це не тішить, коли вас до чогось примушують.
Спочатку плагін FormCraft був створений та розвивався лише у преміум варіанті. Нещодавно автори зробили окрему, безкоштовну версію — FormCraft — Form Builder.
Як і в преміум варіанті, FormCraft – Form Builder дозволяє легко та швидко конструювати різні форми у спеціальному та дуже зручному drag & drop редакторі. Можливостей тут звичайно менше, але для звичайних користувачів цілком вистачить.
Преміум версія FormCraft може похвалитися налаштуванням скриптової логіки, авто збереженням, більш ніж 20+ додатковими полями, що настроюються, popup і fly-in формами, експортом в CSV та іншими радощами.
Один із найкращих плагінів на сьогоднішній день як у преміум, так і у безкоштовному варіанті.
Інтерфейс Visual Form Builder приємно здивує вас, оскільки плагін дозволяє створювати та керувати всіма видами форм на вашому сайті з одного місця. В один клік ви можете додавати нові поля, реорганізовувати існуючі, застосувати антиспам рішення. Для того, щоб змінити порядок полів, ви можете скористатися технологією drag & drop.
Плюси: Хоча Visual Form Builder і схожий з іншими плагінами контактної форми, перерахованими тут, у нього є свої цікаві «фішки» — можливість змінити порядок елементів простим перетягуванням, експорт даних, що вводяться у файлі CSV, повідомлення з підтвердженням, що налаштовуються, форма відправки, яка підтримує введення безлічі email'ів.
Мінуси: Якщо ваш WordPress-сайт – дуже великий, вам краще використовувати іншу плагін, оскільки цей зберігає вступні форми в базі даних вашого WordPress.
nForms – WordPress Form Builder
Drag and Drop Builder надає вам простий багатоколоночний шаблон контактної форми, з Ajax відправкою та валідацією. Ви можете навіть показувати форму, використовуючи плагін, що виводить popup-вікна. Можна відобразити форму за допомогою шорткоду, звичайної функції PHP або віджету.
Якщо вам потрібно щось більше, ніж просто контактна форма, то nForms – це плагін, який ви можете використати.
Gravity Forms – найповніше рішення для додавання контактної форми на ваш сайт. Завдяки набору класних функцій цей плагін можна назвати найпрогресивнішим і найпродвинутішим преміум-плагіном для WordPress з усіх нині доступних. Ви можете використовувати візуальний редактор, щоб створювати складні форми зворотного зв'язку для вашого сайту. Так само є зручна функція, яка полегшує використання довгих форм, дозволяючи вбудовувати їх в численні сторінки, притому, наскільки заповнена форма, показано за допомогою індикатора заповнення.
Плюси: Gravity Forms може запропонувати вам абсолютно ексклюзивну функціональність, яка недоступна в інших подібних плагінах, наприклад, опцію для створення форм замовлень (включаючи калькуляцію в режимі реального часу), залежні поля для того, щоб зрити або показати поля, секції, сторінки або навіть кнопку відправки на вибір користувачів.
Плюси: У порівнянні з іншими представленими тут плагінами цей дорогий, але знову ж таки Gravity Forms пропонує набагато більше, ніж просто контактна форма. Якщо ви шукаєте просту форму зворотного зв'язку, то немає сенсу витрачати гроші на цей плагін.
Mapped Contact Form Pro WordPress використовує інший алгоритм для показу форми на вашому веб-сайті. Це чудове рішення для бізнесу або компанії, оскільки він може бути використаний для позначення на території філій чи офісів. Також плагін ідеальний для тих, хто використовує на своїх сайтах карти.
Ви можете вказати свою адресу для кожного місця, яке є у контактній формі. Плагін легко використовувати, і він може бути поміщений в будь-який запис або сторінку за допомогою простого шорткоду.
Ще один популярний останнім часом конструктор форм. Дуже потужний, з відмінним, інтуїтивним редактором (як у платних плагінах), в якому ви можете будувати свою форму, просто перетягуючи потрібні блоки та налаштовуючи їх. Має цілий набір заздалегідь заготовлених полів та блоків. Всі поля тут же, при створенні редагуються потрібною вам мовою. За замовчуванням має лише стандартну, контактну форму для зворотного зв'язку та відповідний шорткод.
Плюси: Чудовий функціонал. Під час створення нової форми можна використовувати зручний перемикач для швидкого перегляду та тестування своїх «конструкцій».
Мінуси: Безліч налаштувань для блоків можуть відлякати новачків. Крім основного функціоналу має масу модулів, що підключаються преміум, для роботи з різними сервісами прийому платежів, поштових розсилок та іншого. Хоча це можна віднести і до плюсів звичайно.
Ninja Kick: WordPress Contact Form
Найоригінальніша контактна форма з усієї добірки. Відрізняється тим, що виводиться у вигляді окремої панелі – слайдера у лівій чи правій стороні сайту. Виглядає вкрай ефектно. Має безліч налаштувань, але здебільшого щодо свого зовнішнього вигляду. Налаштування самих полів тут мінімальне. Втім, можна ставити шорткод від популярної Contact Form 7 і це буде працювати.
Цікавий плагін та сама форма. Докладніше можете прочитати у .
Підбиваємо підсумок
Тепер саме час вибрати правильне розширення для вашого сайту. Contact Form 7 або FormCraft - Form Builder - це ймовірно найкращі рішення для звичайного блогу, а для великих сайтів, що пропонують різні сервіси та послуги, я б порадив використовувати - Gravity Forms або Ninja Forms. Любителям "виділиться" чудово підійде - Ninja Kick: Contact Form.
Здрастуйте, друзі! У цьому уроці ми поговоримо про створення форми зворотного зв'язку, або як ще кажуть у народі "контактної форми".
Сьогодні ми розберемо з вами як можна створити за кілька хвилин легку, гарнуі функціональнуформу зворотного зв'язку за допомогою мого улюбленого плагіна Contact Form 7 .
Я намагатимусь максимально докладно пояснити всі етапи встановлення контактної форми, і у зв'язку з цим урок вийде досить довгим 🙂
Створення контактної форми в WordPress
На самому початку хочу помітити, що плагін Contact Form 7 русифікований, і жодних проблем із ним у вас не буде. Як доказ моїх слів може виступати той факт, що цей плагін скачали БІЛЬШ 25 МІЛЬЙОНІВ РАЗІВ!!!
І так, давайте приступимо. Для створення форми зворотного зв'язку потрібно зробити наступне:
1. Встановіть та активуйте плагін Contact Form 7 . Як встановлювати плагіни ви можете.
2. Після активації перейдіть до Contact Form 7 -> Форми.
3. У вікні, що відкрилося копіюємо рядокіз кодом вставки.
4. Скопійований код вставляємо ту сторінку, яку ми хочемо додати форму зворотний зв'язок. Після того як вставили код, не забудьте збережіть зміни, натиснувши кнопку «Оновити».
Ось такий результатдодавання контактної форми за отримаємо:
Готово!Ви встановили робочу формузворотного зв'язку на свій сайт!
Як бачите, всього за кілька хвилинможна легко встановити на сайт форму зворотного зв'язку. На цьому можна і поставити крапку, але тим, кого не влаштовує стандартна форма та хто хоче створитиповністю нову контактну формуз іншими полями та можливостями рекомендуючитати урок остаточно.
Для того, щоб створити нову форму, потрібно для початку визначитися які поля в ній нам необхідні. У цьому уроці як приклад ми створюватимемо простеньку форму замовлення зворотного дзвінка.
Для цього нам потрібно, щоб у формі були такі поля для заповнення:
- Ім'я (Обов'язкове поле для заповнення)
- Прізвище
- Телефон (Обов'язкове поле для заповнення)
- Поле з вибором зручного часу для дзвінка
Після того, як ми визначилися з полями, переходимо до створення форми:
1. Переходимо у Contact Form 7 -> Додати новий.
2. У вікні, натискаємо кнопку «Додати нову». Якщо потрібно, виберіть мову в списку нижче. за мовчання буде російською.
3. Після натискання кнопки ви перейдете на сторінку, де знаходиться редактор форми.
На самому верху сторінку поле, в яке пишемо назва нової форми. У Шаблону формими бачимо стандартні поля форми, які створюються за промовчанням.
Нижче ми бачимо налаштування листа, що надходить на вашу пошту після того, як хтось відправив замовлення з форми на сайті. У цих налаштуваннях, наприклад, можна змінити або додати e-mail, на який будуть надходити запити з форми на вашому сайті. У шаблон листиналаштовується інформація, яка відображатиметься всередині листа.
4. Після того, як ми поверхово ознайомилися із структурою редактора, переходимо до створення нашої нової форми. Для цього нам потрібно Видалитиз шаблону форми всі рядки крім кнопки «Відправити»,а у шаблоні листа видалитивсе повністю . Після видалення у вас має вийти так:
5. Тепер нам потрібно створити нові поля: Ім'я(обов'язкове), Прізвище, Телефон(обов'язкове), Зручний час дзвінка.
Починаємо зі створення поля для введення імені, яке має бути обов'язковим для заповнення. Для цього натискаємо кнопку "Сгенерувати тег"і вибираємо Текстове поле.
У налаштуваннях нового поля ставимо галочку, яка необхідна лише в тому випадку, якщо поле має бути обов'язковим для заповнення. Далі копіюємо згенерований код шаблон форми форми справа, а наступний код копіюємо шаблон листи. Коментарі та стрілки для кращого розуміння дивіться на зображенні нижче.
6. Після того, як ми додали поле для введення імені, натискаємо "Сгенерувати тег" -> Текстове полета за аналогією створюємо поле Прізвищеі Телефонкопіювання і вставлення коду в шаблон форми і листа шаблон. Відмінність лише у тому, що для поля Прізвищеставити галочку для обов'язкового заповнення не потрібно .
Після додавання полів Ім'я, Прізвище та Телефон редактор форми виглядатиме так:
7. Тепер створюємо поле Зручний час дзвінка.Для цього натискаємо "Сгенерувати тег"і вибираємо «Випадаюче меню».
У полі Вибірпишемо в рядок за одним варіантом, у нашому випадку цей час з 8-00 до 18-00 з проміжками у дві години. Після заповнення копіюємо відповідні рядки коду шаблон форми і шаблон листи.
У результаті у вас має вийти ось так:
9. Скопіюйте код форми та вставте його на сторінку, на якій вам потрібна форма. Якщо ви все зробили правильно, у вас має бути така форма замовлення зворотного дзвінка:
Після того, як користувач зробить замовлення зворотного дзвінка з вашого сайту, на вашу пошту прийде листз таким наповненням:
ГОТОВО!Ось ми створили з вами форму замовлення зворотного дзвінка з нуля.
Згоден, що для деяких все може здатися дуже складним та страшним, але таке відчуття буде лише до першого створення контактної форми з нуля 😉
У більшості випадків цілком достатньо і стандартної форми зворотного зв'язку, яка створюється стандартним плагіном відразу після його встановлення та активації.
Сподіваюся, цей урок був вам корисним, і ви розібралися з плагіном Contact Form 7.
Якщо у вас виникатимуть по ходу створення форми запитання або щось не виходитиме. пишіть та ставте запитання у коментарях.
І пам'ятайте, що форма зворотного зв'язку на сайті – обов'язковий атрибут на сторінці контактів.
Здрастуйте, друзі! У цьому уроці ми поговоримо про створення форми зворотного зв'язку, або як ще кажуть у народі "контактної форми". Сьогодні ми розберемо з вами як можна створити за кілька хвилин легку, красиву та функціональну форму зворотного зв'язку за допомогою мого улюбленого плагіна Contact Form 7. Я постараюся максимально докладно пояснити всі етапи встановлення контактної форми, і у зв'язку з цим урок вийде досить довгим:) Створення контактної форми WordPress На самому початку хочу помітити, що плагін Contact Form 7 русифікований, і ніяких проблем з ним у вас не буде. Як доказ моїх слів може виступати той факт, що цей плагін…
Огляд
Проголосуйте за урок
100
Оцінка
Підсумок:Шановні читачі! Не полінуйтеся проголосувати та залишити коментар. Таким чином я зможу зрозуміти корисність уроків та статей, і покращити їхню якість у майбутньому. Заздалегідь дякую!
Під час створення сайту будь-якого типу важливо забезпечити прямий контакт із відвідувачами. У цьому випадку вдасться налагодити зв'язок з користувачами, що змусить їх повертатися на ваш ресурс неодноразово. Сьогодні хочу розповісти вам про те, як створити на WordPress форму зворотного зв'язку. Ми розглянемо варіанти з використанням плагіна і без нього, а ви оберете той, який вам більше підійде.
У цій статті ви дізнаєтесь:
Плагін зворотного зв'язку для WordPress
Найбільш простим варіантом використовувати зворотний зв'язок на сайті є встановлення плагіна. Особисто я обрала для цього варіант, хоч і не вітаю плагіни. Для початку потрібно завантажити плагін Contact Form 7 з офіційного сайту WordPress. Він досить простий у використанні.
Після завантаження розпакуйте архів і скопіюйте файли на сервер до папки /wp-content/plugins/ . Після активації плагіна перейдіть до його налаштувань на панелі адміністратора. Праворуч у меню з'явиться пункт "Contact". Значить, плагін зворотного зв'язку WordPress встановлений та запущений. Для встановлення стандартної форми CF7 на сайт достатньо скопіювати код «форма контакту», який ви побачите в меню Contact. Якщо ви хочете налаштувати форму на свій розсуд, перейдіть за посиланням «Додати нову».
В результаті з'явиться кілька полів:
- Назва форми;
- Форма зворотний зв'язок;
- Поштові налаштування;
- Додаткова форма зворотний зв'язок;
- Сервісні повідомлення;
- Додаткові опції.
Пункти 2 та 4 дозволяють скористатися конструктором для різних видів форм. Наприклад, так ви можете створити спливаючу форму зворотного зв'язку WordPress. Після заповнення всіх полів можна отримати готовий код для сторінки контактів. Налаштування дод. форми (№4) допомагає отримувати не лише листи на пошту, а й, наприклад, смс-повідомлення на вказаний телефон.
Коли ви отримаєте стандартний або складніший код форми, вставте його на створену сторінку для зворотного зв'язку в адмінці свого сайту.
Як варіант, можете ще випробувати плагін Cforms, він складніший, але і функцій у нього більше.
Як створити форму зворотного зв'язку WordPress без плагіна
Нагадаю, що кожен новий плагін ускладнює роботу движка WordPress, що може призвести до уповільнення його роботи. Тому покажу вам, як зробити гарну форму зворотного зв'язку WordPress без плагіна. Не закликаю вас вибирати саме цей варіант, це просто альтернатива і вирішувати вам. Наведена форма буде досить простою, це основний кістяк, до якого, за бажання, ви зможете вносити свої корективи.
Для початку потрібно створити окремий файл *.php (наприклад, contact.php чи mail.php). Після створення краще помістити його до папки з темою шаблону, тоді можна буде редагувати його з адмінки.
Ось код, який потрібно вставити у створений вами файл php:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $name \n E-mail: $email \n Тема: $subject \n Текст: $body "; $send = mail ($address , $subject , $ message, "Content-type:text/plain; charset = UTF-8\r From:$email "); if ($send == "true" ) ( echo "Дякую, ваше повідомлення успішно відправлено!"; ) else ( echo "Помилка, повідомлення не надіслано!"; ) ) else ( echo "Ви заповнили не всі поля, потрібно повернутися назад!"; } ?> |
Для свого блогу вам потрібно буде змінити URL в першому рядку і в рядку address, і за бажанням назва полів Ім'я, Тема, Текст. Також на свій розсуд ви можете змінити текстові повідомлення, які бачитиме користувач після відправки, або якщо повідомлення не надіслано.
Після створення файлу потрібно вставити його на сторінку контактів.
Для цього можна використовувати такий код:
| 1 2 3 4 | <h2 >Форма зворотнього зв'язку</ h2 > <form name = "Form1" action = "/wp-content/themes/lime/contact.php" method = "post" > П.І.Б.<input class = "input" name = "email" type = "text" style = "width:31%" / > E-mail<input class = "input" name = "subject" type = "text" style = "width:31%" / >ТемаТекст повідомлення:<textarea name = "body" cols = "1" rows = "5" style = "width:98%" / > </form> |
Форма зворотнього зв'язку
Тут найважливіше вказати правильний шлях до файлу php, який ви створили (у нашому випадку, це contact.php). В даному коді за своїм бажанням та смаком можете змінювати назви полів, та їх ширину.
Якщо ви захочете надати формі без плагіна особливого вигляду, можете використовувати різні стилі оформлення за допомогою файлу style.css.
Красива форма зворотного зв'язку
Великою популярністю на моєму блозі користуються статті, в яких я розповідаю, як зробити оформлення елементів блогу за допомогою css-коду:
Зараз я покажу, як красиво оформити форму зворотного зв'язку для WordPress.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .wpcf7-form input [type = "submit"] (background: #63c6ae; /* колір фону кнопки Надіслати*/ border: 0; width: 120px; /* ширина кнопки Надіслати*/ color: #fff; /* колір тексту кнопки Надіслати*/ height: 30px; /* висота кнопки Надіслати*/) .wpcf7-form textarea ( display : block ; margin-top : 5px ; /* верхній відступ від поля Текст повідомлення*/ background: #fff; border: 1px solid #63c6ae; /* кордон поля Текст повідомлення*/ width: 400px; color: #222; padding: 10px 10px; ) .wpcf7-form input [type = "email"], .wpcf7-form input [type = "text"] (background: #fff; border: 1px solid #63c6ae; /* межа текстових полів*/ width: 400px; color: #222; height: 30px; /* висота текстових полів*/ padding: 0 10px; /* внутрішні межі текстових полів*/ } |
Wpcf7-form input ( background: #63c6ae; /* колір фону кнопки Відправити*/ border: 0; width: 120px; /* ширина кнопки Відправити*/ color: #fff; /* колір тексту кнопки Відправити*/ height:30px; /* висота кнопки Надіслати*/ ) .wpcf7-form textarea ( display: block; margin-top: 5px; /* верхній відступ від поля Текст повідомлення*/ background: #fff; border: 1px solid #63c6ae; Текст повідомлення * / width: 400px; color: #222; padding: 10px 10px; ) .wpcf7-form input, width: 400px; #222; height:30px; /* висота текстових полів*/ padding: 0 10px;
В результаті у мене вийшло так: 
Розглянемо варіант з використанням плагіна Contact Form 7. Після того, як плагін встановлений та налаштований, вам потрібно відкрити файл style.css вашої активної теми та вставити в кінці наступний код:
Як бачите, у створенні зворотного зв'язку на WordPress як з плагіном, так і без нього немає нічого складного.
Якщо вам потрібний більш розширений функціонал, і ви не хочете вникати в хитрощі коду, використовуйте для WordPress плагін форми зворотного зв'язку. Виберіть варіант, який вам найбільше підходить для контакту з вашими користувачами.