Жарознижувальні засоби для дітей призначаються педіатром. Але бувають ситуації невідкладної допомоги за лихоманки, коли дитині потрібно дати ліки негайно. Тоді батьки беруть на себе відповідальність і застосовують жарознижувальні препарати. Що можна давати дітям грудного віку? Чим можна збити температуру у старших дітей? Які ліки найбезпечніші?
Форма зворотного зв'язку вкрай корисна для вашого сайту – вона дозволяє тримати вашу адресу електронної пошти подалі від чужих очей (зменшує кількість спаму) і допомагає користувачам легко зв'язатися з вами безпосередньо через сайт.
Якщо ви створили сторінку Зв'яжіться з намина сайті WordPress, то додати форму зворотного зв'язку, налаштувати її і почати отримувати повідомлення не складе особливих труднощів.
Найлегшим способом створення форми зворотного зв'язку є використання – існує багато різних плагінів, і ви можете вибрати будь-який. Однак у цьому посібнику ми будемо використовувати Contact Form 7.
З більш ніж 3 мільйонами установок, Contact Form 7є найширше використовуваною формою зворотний зв'язок для WordPress. Її інтуїтивно зрозумілий інтерфейс та швидка установка допоможуть вам створити форму зворотного зв'язку за лічені хвилини.
Перед тим, як ви почнете це керівництво, вам знадобиться таке:
- Доступ до панелі керування WordPress
Крок 1 – Встановлення Contact Form 7
- Увійдіть до вашої панелі управління WordPress і натисніть на Плагіни → Додати новийу лівому меню панелі.
- Знайдіть Contact Form 7у пошуку та натисніть Встановити.
- Після встановлення, натисніть Активуватидля активації плагіну.
Крок 2 - Як створити форму зворотного зв'язку
Після активації плагіна у лівому меню панелі з'явиться новий розділ Contact Form 7.
- Натисніть Contact Form 7 → Додати новудля створення першої форми.
- Впишіть назву форми зворотного зв'язку, наприклад WordPress Contact Form.
- Деякі написи та текстові області вже розташовані, щоб допомогти вам розібратися в процесі. Ви можете видалити їх або додати нові написи та текстові області, вибравши їх зі списку зверху.
Якщо ви не впевнені, які з елементів форми вам потрібні, то просто залиште їх як є, ви зможете повернутися і відредагувати їх пізніше.
Залежно від вибраних елементів ваш код має виглядати приблизно так:
- Ви можете додавати та видаляти елементи залежно від ваших потреб. Для зручності використовуйте спеціальні інструменти над областю із самою формою.
- Значок * у коді означає, що це поле є обов'язковим для заповнення.
Крок 3 – Налаштування формату повідомлень
Коли відвідувач відправить повідомлення через форму зворотного зв'язку, то ви отримаєте повідомлення, що містить його ім'я, контактні дані і сам його зміст.
Ви можете налаштувати це повідомлення у розділі Лист– деякі з тегів, які ви можете використовувати у листі, перераховані над самим листом. Спробуйте змінити шаблон листа, додавши до нього деякі теги - ви можете повернутися в будь-який момент і змінити його знову.
ВАЖЛИВО!Переконайтеся, що ви вписали правильну адресу електронної пошти у поле Кому– це та адреса, на яку будуть доставлятися всі повідомлення.
Крок 4 – Налаштування повідомлень
У вкладці Повідомленняви можете налаштувати повідомлення, які побачить ваш відвідувач під час успішного надсилання листа або будь-якої помилки (некоректна адреса електронної пошти або не заповнення одного з обов'язкових полів тощо).
Крок 5 – Збереження та публікація форми
Коли ви закінчите налаштування, ви зможете зберегти зміни натиснувши кнопку Зберегтиу верхній правій частині панелі.
Після збереження вгорі сторінки з'явиться шорткод. Він буде виділений синім кольором і має виглядати приблизно так:
- Виділіть шорткод та скопіюйте його
- Вставте шорткод на сторінку, запис або віджет, де ви бажаєте, щоб форма відображалася
- Результат має бути приблизно таким
Крок 6 – Перевірка форми зворотного зв'язку для WordPress
Дуже важливо перевірити роботу форми зворотного зв'язку та подбати про її коректний зовнішній вигляд. Також перевірте стабільність доставки повідомлень через форму.
Щоб зробити це, просто відвідайте сторінку вашого сайту з формою та надішліть повідомлення за допомогою неї – ви завжди можете повернутися назад до редактора форми та зробити необхідні зміни.
Висновок
Цей посібник допоміг вам дізнатися, як створити форму зворотного зв'язку за допомогою плагіна для WordPress – Contact Form 7. Тепер ви можете отримувати повідомлення від своїх користувачів безпосередньо через сайт.
Бажаєте дізнатися ще більше? Ви можете поекспериментувати з тегами та шаблонами та змінити практично все. Ви також можете спробувати налаштувати Flamingo– плагін для зберігання повідомлень, щоб зберігати усі отримані повідомлення в базі даних (це досить корисно, якщо у вас є проблеми з поштовим сервером).
Добрий день друзі! У цьому уроці я навчу вас, як створити контактну форму на WordPress за допомогою плагінів. Форма зворотного зв'язку на WordPress є ідеальним рішенням для тих, хто хоче підтримувати контакт зі своєю аудиторією або отримувати заявки на адресу електронної пошти на замовлення будь-яких послуг. Ми навчимося з вами робити форму в модальному вікні. Після прочитання цієї статті ви зможете самостійно вставляти форму на свої сайти. Тож поїхали.
Для чого вам потрібна контактна форма WordPress?
Ви, можливо, будете здивовані питанням чому мені потрібна форма зворотного зв'язку на сайт вордпрес? Чому б просто не додати адресу електронної пошти на сайт, щоб люди мені просто написали?
Це найбільш поширене питання від новачків, які бояться додавати код форми на сайт без знання програмування. Правду сказати вам взагалі не потрібен код при створенні форми зворотного зв'язку на WordPress. У цьому посібнику ми крок за кроком створимо контактну форму і зробити її може навіть найабсолютніший новачок.
Нижче наведу 3 головні причини, чому використання форми краще, ніж просто додати адресу пошти на сайт.
- - спам боти із завидною регулярністю вичіплюють через свої парсери адреси пошти, де є згадка поштового домену і заносять його до себе в базу, щоб потім надсилати вам небажану кореспонденцію. З іншого боку при використанні форми зворотного зв'язку для WordPress ви позбавляєтеся проблеми засилля СПАМних листів на свою скриньку.
- Повнота інформації – при надсиланні пошти люди не завжди надсилають всю інформацію, яка вам потрібна. За допомогою контактної форми ви самі визначаєте, які поля вам потрібні, щоб полегшити користувачам можливість надіслати вам листа (ім'я, email, номер телефону, коментар та багато іншого).
- Економія часу – форма зворотного зв'язку WordPress допоможе заощадити час. Крім повноти інформації, яку ви запросили у користувача і яку він вам надішле, ви також можете вказати, що чекає на наступному кроці, наприклад, «Ваша заявка буде розглянута протягом 24 годин» або Дивіться відео та багато інших корисностей.
Нижче наведено приклад контактної форми, яку ми створюватимемо в цьому посібнику.
Почнемо, панове.
Крок 1: Вибираємо найкращий плагін форми зворотного зв'язку для WordPress
На цьому етапі нам необхідно визначитися з вибором відповідного плагіна форми. Їх існує безліч як безкоштовних, так і платних. У цьому уроці я розповім вам про різні плагіни, щоб у вас був багатий вибір. У першому випадку буде задіяно плагін WPForms.
Нижче наведені причини, за якими WPForms є кращим плагіном зворотного зв'язку:
- По-перше це найприязніший до новачків плагін. Методом простого перетягування потрібних блоків можна створити контактну форму в кілька кліків.
- WPForms Lite повністю безкоштовний.
- Коли ж ви будете готові до більш потужного функціоналу і якщо він справді для вас буде важливим, то можете перейти на версію Pro.
Відмінно, якщо ці причини виявилися достатніми і я вас переконав, тоді рухаємося вперед.
Крок 2: Встановлення плагіна контактної форми WordPress
Для цього уроку ми використовуємо версію Lite, тому що це безкоштовно та зручно в роботі. Ви можете встановити його увійшовши в блог і перейшовши в Плагіни – Додати новий.
У рядку пошуку набираємо назву нашого плагіна і тиснемо Install now (Встановити зараз).
Після встановлення плагіна переконайтеся, що ви активували його. Це показано тут:
Крок 3: Створення контактної форми WordPress
Отже, після успішного завершення активації плагіна, саме час створити нашу форму зворотного зв'язку. Для цього на панелі адміністратора блогу клацніть на вкладку WPForms Menu і перейдіть в Add New (Додати нову).
Це дозволить відкрити вам конструктор Wpforms, де простим перетягуванням потрібних блоків ви можете створити контактну форму зворотного зв'язку WordPress. У безкоштовній версії Lite доступні два попередньо вбудовані шаблони (порожній і проста форма). Ви можете використовувати їх разом, щоб скласти потрібну і зручну для вас. У цьому прикладі вам вибрали другий варіант, тобто простий контактної форми. До неї додамо ім'я, Email та текстове поле.
Ви можете натиснути на кожне поле, щоб відредагувати його. Також за допомогою миші ви можете перетягувати та змінювати порядок полів форми.
Якщо ви хочете додати нове поле, просто виберіть потрібно зі списку ліворуч та перетягніть у робочу область.
Коли все зроблено, просто натисніть кнопку Зберегти.
Крок 4: Налаштування повідомлень та підтверджень
Після того, як ви успішно створили форму зворотного зв'язку на WordPress, дуже важливо правильно налаштувати форми сповіщень та підтверджень.
Форма підтвердження це те, що бачать ваші користувачі, коли надсилають заявку з форми. Це може бути повідомлення подяки або ви можете їх перенаправити на іншу спеціальну сторінку.
Форма повідомлення – це повідомлення, які ви отримуєте, коли до вас приходить нова заявка або email лист з вашого WordPress сайту.
Ви можете налаштувати обидва ці поля, перейшовши в Налаштування (Setting) усередині плагіна конструктора фор WPForms.
Ми за умовчанням не ставили чіпати і залишили таке поле Форми Підтвердження з повідомленням «Дякую за ваше звернення». Однак, ви можете змінити його на інший текст або перенаправити користувача на окрему сторінку.
Найкращим у цій плагіні є те, що налаштування, які йдуть за замовчуванням, просто ідеальні для новачків. Їм не потрібно думати, що зробити або що змінити. Все дуже інтуїтивно зрозуміло та просто. Коли ви переходите в налаштування повідомлень, всі поля будуть заповнені динамічно.
За замовчуванням повідомлення надсилаються на ту пошту, яку ви вказали в налаштуваннях. Якщо ви бажаєте змінити адресат для надсилання повідомлень, його також можна легко змінити. Якщо хочете вказати кілька адрес пошти (вказуються через кому), то будь ласка, карти в руки, як то кажуть 🙂
Поле Тема email буде автоматично заповнено з вашим ім'ям форми. Поле ім'я буде братися з імені користувача (вашого імені). Коли ви відповідатимете на лист, то він йтиме на пошту з ім'ям користувача, який заповнив контактну форму.
Крок 5: Додавання контактної форми WordPress на сторінку
На цьому кроці, коли ви побудували та налаштували форму зворотного зв'язку, потрібно створити для неї окрему сторінку «Контакти», куди ви зможете її помістити. Або ви створюєте нову, або редагуєте існуючу сторінку, де ви можете її додати.
Ми будемо використовувати простий шорткод для вставки форми на сторінку. Просто натисніть кнопку «Add form» і виберіть назву вашої форми, щоб вставити її на сторінку.
Чудово. Тепер зберігаєте сторінку і відкриваєте перегляд, щоб побачити зміни.
Ось як приблизно виглядатиме форма на простій WordPress сторінці:
Якщо ви бажаєте просто додати форму на сторінку, то вітаю вас. Усі кроки зроблено успішно. Якщо ви бажаєте додати її у вигляді віджету в сайдбар, то продовження нижче.
Крок 6: Додавання контактної форми WordPress до сайдбару
Плагін WPForms поставляється із вбудованим віджетом форми зворотного зв'язку, який ви можете додати до сайдбару або будь-якої іншої області на сайті (наприклад у підвал).
Для цього нам потрібно перейти в розділ "Зовнішній вигляд" (Appearance) -> Віджети (Widgets). Там ви побачите встановлений віджет плагіна форми у лівій частині. Просто беремо і звичайним перетягуванням задаємо порядок відображення у потрібній області в сайдбарі.
Наступним кроком вказуєте назву віджету та зберігаєте. Переходьте на сайт і дивіться результат.
На цьому огляд нашого плагіна форми зворотного зв'язку WPForms завершено. Але, спеціально для вас я підготував ще огляд одного безкоштовного плагіна, за допомогою якого ми можемо зробити форму зворотного зв'язку, що спливає, і все ті ж фішки, що і в попередньому. Він називається Contact Form 7. Він реально дуже потужний і козир його в тому, що він повністю БЕЗКОШТОВНИЙ!
Його можна зробити адаптивним, тобто форма зворотного зв'язку буде пристосовуватися до розмірів екрана вашого пристрою.
Так, про всяк випадок, щоб ви знали, що вони є
Як зробити контактну форму зворотного зв'язку за допомогою Contact Form 7
Продовжуємо розбиратися щодо створення форм для прийому заявок з вашого сайту. Попереду ми маємо ще один плагін контактної форми вордпрес під назвою Contact Form 7. Давайте його встановимо до себе на блог і активуємо, як ми це вміємо робити.
Вона вже встановлена на моєму сайті, не на цьому блозі. Процедура стандартна. Тепер нам потрібно зайти в адмінку блогу та створити нову форму, яка збиратиме нам заявки та іншу корисну інформацію. Переходимо до розділу «Contact Form 7» -> Додати нову.
Чудово! Тепер давайте дамо їй відповідну назву, у моєму випадку цих контактних форм дуже багато. Виберемо одну, наприклад «Форма замовлення просування сайту»
Коротко розповім, що нам тут буде потрібно. Насамперед, нам потрібно визначитися скільки полів форм ми хочемо зробити. Відразу скажу, що 100 500 полів робити не потрібно і це безглуздо, тому що люди закриють ваш сайт і не залишать заявку. Їм слід спростити цей етап. Тобто якщо подумати, то нам від людини потрібно що:
- Його ім'я, щоб до нього звернутись (персональне звернення)
- Адреса пошти (зворотній зв'язок, куди надсилати йому пропозицію)
- Номер телефону, щоб одразу зателефонувати (якщо це відбудеться швидко, то він у будь-якому випадку стане вашим клієнтом)
- Власне кнопка «Надіслати»
Це основні дані, інші ви можете з'ясувати вже під час листування або телефонної розмови. Логічно? Я думаю, що так. Рухаємось далі.
Створення полів контактної форми у плагіні Contact Form 7
Так, з кількістю полів визначилися, тепер нам потрібно створити ці поля. Нам доступні такі таби:
- Text (Будь-яке текстове поле, наприклад «Ім'я», «Задати питання», або будь-яку іншу назву, яку ви збиратимете через це поле)
- Email (тут призначення одне, щоб користувач ввів)
- URL (в це поле вводитиметься адреса сайту, інші значення не прийнятні, видаватиметься помилка)
- Tel (поле з телефонним номером для нашої форми зворотного зв'язку на WordPress, припустимі числові значення, текст дасть помилку)
- Number (Числовий діапазон значень, можна застосувати, наприклад, до ціни: "скільки ви готові заплатити за сайт? Від 23000 до 120000 рублів")
- Date (Вказуємо дату, з якого за скільки. Приклад: «Бронювання автомобіля з 13/04/2016 по 25/04/2016»)
- Text Area (Текстова область, сюди можна вводити текст як коментар)
- Drop-Down Menu (Випадаючий список). Реалізовано на моєму блозі, можете подивитися. Наприкінці кожної статті я пропоную користувачам створення або простого сайту або інтернет магазину. Саме такий функціонал забезпечує ця опція.
- Checkboxes (множинний вибір, наприклад: Сайт + Створення логотипу + просування + контекстна реклама)
- Radio buttons (Вибір якогось одного пункту, наприклад: «Ви замовляєте або контекстну рекламу або таргетовану»)
- Acceptance (Приймаєте умови угоди, тобто користувальницька інформація, нібито публічної оферти)
- Quiz (Вікторина – серія коротких питань, також можна вставити в контактну форму).
- reCaptcha (Підтвердження, що ви не робот і не спамите.) Гарний захист від спаму. Примітка: ця опція працює, якщо ви підключили плагін Really Simple Captcha.
- File (Якщо ви хочете дати можливість користувачам завантажити файл, наприклад: «Прикріпіть ТЗ на розробку сайту»).
- Submit (Надіслати дані на пошту)
Отже, з полями ми визначилися, значення кожного ви знаєте. Давайте почнемо складання нашої контактної форми на WordPress.
У прикладі нижче використав 2 поля: Ім'я, Email. Відповідно вам знадобляться ці вкладки:
Натиснувши на текстову вкладку (Text), ми потрапляємо в діалогове вікно:
Тут нам потрібно натиснути на галочку Тип Поля - Обов'язкове. Зроблено для того, що якщо користувач не введе в нього ім'я, заявку він вам надіслати не зможе, буде помилка відправки, що не всі поля заповнені коректно.
Потім ви побачите шорткод для вставки цього поля та поруч із ним синя кнопка «Вставити тег». Таким чином, ви додасте одне нове поле контактної форми.
Щоб ви не заплуталися, я виділив його стилем. Код нижче:
< div class = "col-md-4" > < label class = "sr-only" >Full Name< / label >[ text * text - 658 class : form - control placeholder "(!LANG:Ваше ім'я" ] !}< / div > |
А ось скрін:
Аналогічну операцію виконуємо на полі «Email». Клікаємо на відповідну вкладку і потрапляємо в таке діалогове віконце.
Абсолютно нічим не відрізняється від попереднього, просто повторюємо наші дії з вами. У мене поле емейла також має стиль. Наводжу нижче код:
< div class = "col-md-4" > < label class = "sr-only" >Full Email< / label >[email* email - 447 class : form - control placeholder "(!LANG:Ваш Email" ] !}< / div > |
А ось скрін:
І, нарешті, кнопка Submit (Відправити дані). Вона у мене вся у стилях.
< div class = "col-md-4" >[ submit class : btn - flat class : col - xs - 12 "Замовити" ]< / div > < / div > |
Важлива примітка:Дорогі друзі, у цьому прикладі я використовую адаптивні стилі для створення контактної форми на WordPress, тобто вона може набувати форм будь-якого розміру екрану.
Кнопку ви побачите у правому верхньому кутку. Вже точно не промахнетесь. 🙂
Частину робіт ми зробили, тепер переходимо до наступного етапу.
Налаштування поштової адреси для отримання заявок
На цьому кроці нам потрібно зробити деякі налаштування, щоб листи йшли саме нам на нашу поштову скриньку. Як цього досягти, я розповім нижче.
Нам необхідно натиснути на велику вкладку «Лист». Вона буде другою після шаблону форми.
Перше, що побачите, це ваші теги, які ви додали, їх нам необхідно вставити в тіло листа, саме вони будуть підставляти дані, які вводить користувач з форми. Думаю, що пояснив зрозуміло.
Тепер по полях:
- To (Куди буде надсилатися заявка, в моєму випадку це моя адреса пошти, можна вказувати кілька адрес, куди надсилати заявки)
- From (Поле Звідки, тобто підставлятиметься значення, що заявка йде з мого студійного сайту)
- Тема (Служить визначення, з якої форми приходить заявка, у разі це заявка з форми просування сайту).
- Additional Headers (Додаткові заголовки, їх не чіпаємо, вони потрібні для коректності відправлення форми)
- Message Body (Тіло повідомлення, тут ви вказуєте, Від кого надійшов лист і з якої адреси, наприклад: «Від: Івана» «Адреса пошти: vasya @ mail . ru »)
- File Attachments (Додатки до файлу, не чіпаю)
Тепер нам необхідно налаштувати повідомлення про успішне або неуспішне надсилання листа з контактної форми WordPress.
Це будуть повідомлення, які показуватимуться користувачеві у відповідь на його дії з формою. За замовчуванням вони йдуть англійською. Я зробив переклад на російських найнеобхідніших для вас. Їх буде більш ніж достатньо, а якщо ні, то перекладач Гугла вам на допомогу. Отже, почнемо.
- При успішному надсиланні повідомлення: «Ваше повідомлення було надіслано успішно. Дякую."
- При некоректному надсиланні повідомлення з форми: «Помилка надсилання повідомлення. Будь ласка, спробуйте пізніше або зверніться до адміністратора сайту.»
- Помилка заповнення: Помилки заповнення. Будь ласка, перевірте всі поля та відправте знову.»
- Надіслані дані визначені як спам: «Помилка надсилання повідомлення. Будь ласка, спробуйте пізніше або зверніться до адміністратора сайту.»
- Деякі умови повинні бути прийняті: "Будь ласка, прийміть умови для продовження."
- Деякі поля мають бути заповнені: "Будь ласка, заповніть обов'язкове поле."
- Перевищена довжина символів у полі: «Вказано надто багато даних.»
- Недостатня довжина символів у полі: "Вказано занадто мало даних."
- Неправильний формат дати: «Формат дати неправильний».
- Рання дата в мінімальній межі: «Вказано надто ранню дату.»
- Пізня дата максимально: «Зазначено надто пізню дату.»
- Невдале завантаження файлу: «Не вдалося завантажити файл.»
- Недозволений тип файлів: «Цей тип файлу не дозволяється.»
- Завантаження занадто великого файлу: "Цей файл занадто великий."
- Завантаження файлу не вдалося через помилку PHP: «Відправлення файлу не вдалося. Виникла помилка."
- Числовий формат, введений відправником, неправильний: "Числовий формат некоректний."
- Число менше мінімальної межі: "Це число занадто мало."
- Число більше максимальної межі: "Це число занадто велике."
- Відправник не ввів коректну відповідь на запитання: Ви ввели некоректну відповідь.
- Адреса e-mail, введена відправником, невірна: «Некоректний e-mail.»
- URL, введений відправником, невірний: "Некоректна URL."
- Номер телефону, введений відправником, неправильний: "Неправильний номер телефону."
Дуже добре. З налаштуванням форми ми закінчили, тепер потрібно вставити її на веб-сайт. Для цього за вже відомою технологією, зайдемо на існуючу сторінку або створимо нову. У своєму прикладі я покажу вам приклад існуючої форми на сторінці WordPress.
Оскільки наша форма збирає заявки на просування сайту, зайдемо на аналогічну сторінку.
Щоб вставити нашу контактну форму, нам потрібно скопіювати шорткод, присвоєний їй плагіном. Він доступний за назвою вашої форми.
Копіюємо та вставляємо в нашу сторінку, попередньо перейшовши в текстовий редактор (не візуальний). Представлено на скріншоті нижче:
Збережемо нашу сторінку та подивимося, що вийшло у підсумку в браузері:
Супер! Тепер давайте спробуємо відправити форму, нічого в неї не заповнивши. І ось що ми побачимо.
Відбулася помилка відправки з форми, оскільки користувач не вказав потрібні дані у полях. Тепер давайте введемо коректні дані та подивимося, що в нас вийде в цьому випадку. 
Натискаємо відправити і ось, що пише наша форма:
Тепер побачимо, як виглядає наша заявка. Вони приходять у мене на мейлівську пошту. Перевіримо доставку:
Зайдемо всередину, щоб переконатися в коректності кодування та всіх даних.
Все просто відмінно. Форма працює справно та надсилає дані. Тепер ми можемо збирати заявки, які будуть приходити вам, коли ви займетеся, якщо ми говоримо про регіональне просування.
Отже, ми розповіли, як зробити контактну форму на WordPress на сторінці сайту. Зараз я розповім, як зробити спливаючу адаптивну форму зворотного зв'язкуза допомогою нашого плагіна Contact form 7.
Робимо спливаючу адаптивну контактну форму зворотного зв'язку на WordPress
Для того, щоб наша форма стала адаптивною, тобто гумовою, нам необхідно підключити ще один плагін, а точніше його доповнення до Contact Form 7 - називається він Bootstrap Contact Form 7. Встановлюємо і просто активуємо і все - він працює. З ним жодних налаштувань робити не потрібно. Встановили та забули.
На наступному кроці я розповім, які зміни потрібно зробити, щоб наша форма стала спливаючою та адаптивною. Подібну реалізацію зробив на головній сторінці свого студійного сайту. Для цього перейдемо до шаблону index.php, який знаходиться у розділі "Зовнішній вигляд - Редактор". Ми будемо працювати тільки з кодом вручну.
Наша спливаюча форма відображатиметься у модальному діалоговому вікні приблизно так:
Щоб досягти цього результату вам знадобиться наступний код, я представлю його повністю у сніпеті:
Замовити
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Замовити< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >& times;< / span > < span class = "sr-only" >Close< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >Залишити заявку< / h4 > < / div > |
На багатьох сайтах встановлюються форми зворотного зв'язку, щоб користувачі могли залишити повідомлення адміністратору, не залишаючи сайт. Найпопулярнішим, якісним та зручним у налаштуванні та використанні є плагін Contact Form 7– за його допомогою можна створити будь-які контактні форми і не лише. Оскільки плагін має велику кількість різних форм і полів, його можна використовувати для багатьох завдань. Я, наприклад, використовував його для створення анкети роботодавця та претендента на рекрутинговому сайті, для створення форми замовлення товару на сайті з продажу тільки однієї лінії продукту, використовував цей плагін для створення складної та об'ємної розрахункової форми для будівельного сайту, для різних форм зворотного зв'язку та інших форм. Але не про це, а про те, як зробити, щоб форма зв'язку з'являлася у спливаючому вікні, щоб можна було зробити кнопку виклику контактної форми на кожній сторінці, а не тільки на сторінці “Контакти”?
Все насправді не складно, але знадобиться ще один плагін з ефектом FancyBox, мені особисто подобаються ці два плагіни: Easy FancyBox або FancyBox for WordPress, є різні схожі плагіни, але будь-який з цих підходить відмінно і ще дозволяє відкривати popup зображення.
Загалом, встановлено два плагіни: Contact Form 7і Easy FancyBox, створена контактна форма, залишилося додати код шаблону.
Код вставляється шаблон сайту в файли.php!
Код із спливаючою контактною формою, встановлений у коді файлу шаблону:
замовити дзвінок
Якщо Ви вставляєте код виклику форми відразу у Візуальному редакторі для редагування тексту в режимі ТЕКСТ, код буде виглядати так:
Код із спливаючою контактною формою, встановлений у візуальному редакторі запису (в режимі Текст) в адмінці сайту:
замовити дзвінок
У мене в прикладі код для форми "Замовити зворотній дзвінок" - у формі всього два поля - ім'я та телефон, щоб адміністратор сайту передзвонив клієнту.
Розглянемо цей код.
Це код кнопки виклику вікна з формою, для цієї кнопки можна задавати будь-які стилі, і вставляти її в будь-якому місці шаблону:
замовити дзвінок
Це код спливаючого вікна, його можна залишити під кнопкою виклику вікна, а можна прибрати у футер для того, щоб код контенту був чистішим.
У цьому коді сама форма викликається такою функцією:
Де прописано – вивести шорткод для Контактної форми, шорткод вказаний у самій контактній формі під час її створення:
Щоб викликати кілька форм на одній сторінці, потрібно використовувати різні id для виклику форми.
Приклад виклику двох форм зворотного зв'язку у вікні pop-up:
Викликаємо форму 1
Викликаємо форму 2У цьому випадку для виклику кількох форм зверніть увагу на ці частини коду:
... і для другої форми: ... і так далі.
Замість виведення шорткоду форми зворотного зв'язку можна виводити будь-який вміст, наприклад блоки з текстом або картинками, або форму для підписки Feedburner, наприклад так виводиться форма для підписки через Feedburner на одному з сайтів
Можна використовувати цей код для своєї форми підписки, змінивши тільки адресу стрічки http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed на свою.
Важливий момент!Для того щоб форма мала гарний вигляд, для неї потрібно задати свої стилі відображення. Найкраще обернути свою форму в div ще на етапі створення форми CF7.
Як зробити, щоб вікно з формою (fancybox) зворотного зв'язку закривалося після успішного відправлення
Додаємо такий код, якщо використовується плагін з fancybox, наприклад Easy Fancybox.
class="glossaryLink" target="_blank" >CMS... Але ні... досі доводиться ставити кілька плагінів щоб отримати даний функціонал на своєму сайті. Отже, почнемо!
Потрібен нам плагін Easy FancyBox.
Заходимо в Налаштування -> Медіафайли.
Зверху бачимо блок стандартних налаштувань медіафайлів, а нижче за налаштування плагіна Easy FancyBox. За промовчанням активний попап при натисканні зображення.
Якщо стоїть сторонній плагін лайтбоксу, краще цю галку зняти, тому що вони конфліктуватимуть і ваші зображення будуть відкриватися у вікні, що спливає, двічі
Ставимо галку на пункт «Inline content»
Код зі спливаючою контактною формою, встановлений у коді файлу шаблону (наприклад, footer.php):
Якщо Ви вставляєте код виклику форми відразу у Візуальному редакторі для редагування тексту в режимі ТЕКСТ, код буде виглядати так:
Код із спливаючою контактною формою, встановлений у візуальному редакторі запису (в режимі Текст) в адмінці
Синоніми:
Інтернет-сайт, Web-сайт
" class="glossaryLink cmtt_Загальні поняття" target="_blank" >сайту:
Код кнопки, що відкриває попап:
Замовити дзвінок
Виникла дивна проблема з відносними посиланнями у хедері. До посилання на активацію форми наполегливо приписувалася адреса головної сторінки.
Переміг це, додавши прогалину перед ґратами.
Для надання формі потрібного фіда необхідно обернути поля в діви, вказати класи. Це краще робити у редакторі форм CF7. Стилі можна прописати у custom.css
Закриття popup вікна з формою зворотного зв'язку після успішного відправлення
Додаємо такий код
On_sent_ok: $.fancybox.close();
в блок Додаткові параметри вашої форми. У мене ще стоїть надсилання мети Яндекс.Метрики.
Flector 5
Це плагін створення контактних форм. Він надзвичайно популярний (по скачуванням поступається тільки плагінам і ) серед користувачів, так як вдало поєднує простоту використання і потужні можливості настроювання та конструювання контактних форм. Я спробую докладно розглянути всі можливості плагіна.
1 Розпаковуємо архів.
2 Копіюємо папку contact-form-7в /wp-content/plugins/.
3 Заходимо до адмінки блогу на вкладку " Плагіниі активуємо плагін.
При своїй активації плагін створює окреме меню в адмінці блогу під назвою "", також при цьому створюється дефолтна контактна форма, яку ви можете побачити в " Contact Form 7\Форми":
Якщо використовувати запропонований код вставки, то форма в блозі буде така:
Звичайно, зовнішній вигляд цієї контактної форми залежатиме від стилів, що використовуються у вашому шаблоні, але загалом вона виглядатиме саме так.
Для виведення цієї найпростішої форми вам знадобиться всього кілька хвилин. І саме через таку легкість додавання контактної форми багато користувачів і люблять цей плагін.
Однак, плагін має купу можливостей щодо створення просунутих контактних форм будь-якої складності. Але почнемо з простого, зі створення своєї власної форми, яка лише трохи відрізнятиметься від вбудованої в плагін форми за умовчанням. Клацаємо на посилання "Додати нову":
Відкриється така початкова сторінка додавання форми:
Плагін автоматично визначає локаль, що використовується в блозі, тому необхідності вибирати мову немає, просто клікайте на кнопку "". Після цього з'явиться сторінка конструктора форм. Перше, що ви повинні зробити тут, - це перейменувати заголовок форми:
Заголовок не має жодного значення, він потрібен лише для того, щоб ви самі не заплуталися у своїх формах. Встановили назву своєї форми, натиснули кнопку " Зберегти", отримали в результаті "код вставки":
Тепер можна вставити запропонований код у будь-який свій запис або сторінку (в режимі "Текст", звичайно), щоб вивести в ній контактну форму. Однак вона нічим не відрізнятиметься від форми за умовчанням, тому продовжимо працювати з конструктором форм. У правій частині сторінки конструктора розташована кнопка " Згенерувати тег", клік на неї видасть:
Виберемо, наприклад, номер телефону. Відкриється таке вікно:
Власне, тут взагалі можна нічого не змінювати. Розміри, класи та інше це другорядні налаштування і в більшості випадків вам їм редагувати не треба. Однак, опція "" може бути корисною як підказка відвідувачам, як саме треба заповнювати це поле.
Наприклад, задаємо такі значення:
При виведенні контактної форми поле виглядатиме так:
При натисканні цього поля введений там текст зникне, оскільки він служить лише підказкою для заповнення. Але я пропустив момент додавання вибраного тега в контактну форму. Ось цей тег:
Необхідно вставити в ліву частину сторінки конструктора форм, де розташований сам код контактної форми:
Створювати код форми треба вручну, тобто розставляйте заголовки, теги абзаців та переносів рядків самі, має вийти щось на кшталт:
Зберігаємо код форми і отримуємо в результаті таку контактну форму:
Власне, у такий же спосіб можна легко за пару хвилин додати у вашу контактну форму будь-який тег, який використовується плагіном. Не змушуватиму вас вручну пробувати кожен тег, одразу наведу їх висновок:
1 Текстове поле.
Звичайне текстове поле можна використовувати для імені, теми і т.д.
2 E-mail.
Використовується лише для введення електронної пошти адреси.
3 URL.
4 Номер телефону.
Використовується лише для введення номера телефону (цифри та дефізи).
5 Число (Spinbox).
Використовується тільки для введення числа (можна використовувати для вказівки віку, кількості одиниць товару, що замовляються, і т.д.).
6 Число (slider).
Працює некоректно. Для виведення цього числового слайдера використовується HTML5, а це, по-перше, означає, що такий слайдер виглядає по-різному в різних браузерах, а по-друге, він все одно до ладу не працює. На форумах підтримки плагіна я бачив рішення, що виправляють роботу даного тега, але мені вони не допомогли - змусити цей слайдер відображати будь-які цифри я так і не зміг. Рекомендую не використовувати цей тэг.
7 Дата.
Використовується лише для введення дати.
8 Текстове поле.
У російському перекладі цей тег теж отримав назву "Текстове поле", але в термінології HTML це текста, що, по суті, позначає лише збільшене текстове поле. Використовується для введення тексту повідомлення.
9 Випадаюче меню.
Використовується для вибору пункту (або декількох пунктів) з меню. Можна використовувати для чого завгодно – від питання про колір товару, що замовляється, до вибору статі людини.
10 Checkboxes.
Використовується для вибору одного або кількох пунктів із запропонованих варіантів.
11 Radio buttons.
Використовується для вибору лише одного пункту із запропонованих варіантів.
12 Прийняття.
Використовується для згоди з умовами.
13 Запитання.
Використовується для відповіді на зазначені питання (питання вибирається випадково із зазначених варіантів). В основному, цей тег використовується як захист від спаму. І якщо на числове питання спам-боти легко можуть відповісти, то на запитання на кшталт "на якій планеті ми живемо?" вони відповісти не в змозі.
14 CAPTCHA.
Використовується для виведення повноцінної капчі. Для використання даного тега необхідне встановлення плагіна Really Simple CAPTCHA. Капча цілком читається, тому легко пробивається просунутими спам-ботами на кшталт Хрумера.
15 Надсилання файлу.
Використовується для надсилання файлу. Можна вказати максимальний розмір та формати допустимих файлів.
16 Кнопка надсилання.
Використовується для надсилання даних контактної форми. Це є обов'язковий тег.
З тегами, що використовуються безпосередньо у контактній формі, розібралися. Тепер розглянемо, як ці самі теги із контактної форми отримати на свій email. Трохи нижче коду контактної форми в конструкторі знаходиться шаблон листа, що відсилається вам, і саме в ньому ви повинні зробити необхідні зміни. Це важливо, оскільки неправильне заповнення цього шаблону не дозволить вам дізнатися, що саме написав відвідувач у формі. Як приклад, візьму тег номера телефону. Скажімо, у вашій контактній формі він вставлений через такий код:
Отже, в шаблоні листа, що надсилається, треба вставити такий код:
Сенс, гадаю, зрозумілий. У коді контактної форми , а в листі лише назва цього поля . Плагін формує цифрові назви тегів на кшталт але ніхто не заважає вам використовувати свої імена. І з приводу інших тегів у шаблоні листа – вони теж формуються за таким же принципом – замість використовується і т.д.
Тексти, які видає контактна форма, можна також поправити в конструкторі форм у розділі "Повідомлення":
Часті питання по плагіну :
1 Помилка виду " ", як виправити?
Це означає, що або вказана форма видалена, або неправильно вказано заголовок форми (title у коді виклику критичний для виклику форми).
2 У листі я бачу теги начебто замість тексту, як виправити?
Це означає, що відвідувач не заповнив це поле. У такому разі тег не замінюється, а виводиться, як є.
3 Чи є обмеження для вибору імені для тега?
Є. Якщо циклі WordPressвикористовується ім'я "name", то ви не можете його використовувати як ім'я для тега. Найкращим способом уникнути проблем буде додавання префіксів для імен, на кшталт слова "your". З ім'ям тега проблем точно не буде.
4 Чи можна повідомити відвідувача по email, що його форму було отримано?
Можна, можливо. Використовуйте в конструкторі форм опцію "Адресат 2":
Цю опцію цілком можна використовувати як автовідповідач.
5 Чи можна надіслати заповнену форму на кілька адрес?
Можна, можливо. Використовуйте в опції "Адресат" поле "":
Де [email protected] u ваш додатковий email, на який буде надіслано копію заповненої відвідувачем форми (команда "cc" відправляє приховану копію).
6 Чи можна вивести форму не в записі чи сторінці?
Так. Вставте код дзвінка у текстовий віджет.
7 Чи можна безпосередньо вивести форму кодом у файлах шаблону?
Так. Використовуйте код:
| "" ) ; ?> |
8 Форма не надсилається, видається помилка в червоній рамці, як виправити?
Звернутися до вашого хостера, можливо в PHP заборонено виклик функції mail().
9 Під час надсилання форми видається помилка в помаранчевій рамці, як виправити?
Помаранчева рамка сигналізує про спам. Неправильне спрацювання захисту від спаму можуть викликати плагіни кешування. Налаштуйте у вашому плагіні кешування періодичне очищення файлів кешу (24 години достатньо).
10 Поле для введення електронної пошти виглядає інакше, ніж інші поля у формі, як виправити?
Плагін використовує HTML5 код для введення email-адреси ( замість ), а подібний код часто не оформлений у старих шаблонах. Вам необхідно внести зміни до styles.cssшаблону, додавши туди необхідний код для селектора input .
11 Як у email вставити прикріплений користувачем файл?
Використовувати для цього спеціальне поле "Прикріплені файли:"
Справді заслуговує на вашу увагу. На відміну від багатьох інших популярних плагінів він не змушує вас купувати якусь Proверсію - всі можливості доступні відразу. Популярність плагіна (понад 19 мільйонів завантажень) цілком заслужена - при всій своїй функціональності він надзвичайно простий у налаштуванні і доступний навіть для користувачів-початківців. WordPress.
Але все ж таки пам'ятайте - це плагін створення контактних форм, а не плагін створення просто форм. За всіх своїх можливостей він не дозволить вам створити просунуту форму на основі будь-яких умов. Його основне призначення саме створення контактних форм і більше. Для створення динамічних форм, форм створення записів і тому подібних речей використовуйте плагіни на зразок Ninja Forms, вони для цього більше підходять.
Якщо у вас залишилися якісь питання щодо налаштування плагіна – запитуйте у коментарях, обов'язково постараюсь вам допомогти.
Автор плагіна: Takayuki Miyoshi
Розглянута версія: 3.9.1
від 31.07.2014
Поточна версія: 5.1.4
від 04.08.2019
Сумісність із версією WordPress: 4.9
і вище
Активних установок плагіна: 5 000 000+
Завантажити плагін версії 5.1.4(всього завантажено 121 112 956
раз)
Сподобався піст? Підпишись на оновлення або
