Спливаюча форма зворотного дзвінка на сайті wordpress - створюємо форму по кроках, бізнес блог макса
Привіт мій улюблений Новомосковсктель! У цьому випуску я розповім як я реалізував спливаючу форму зворотного дзвінка на сайті WordPress.
Справа в тому, що форма зворотного дзвінка дуже часто використовується більшістю веб-майстрів саме для зручності користувачів, щоб вони зробили якомога швидше цільове дію - тобто залишили заявку на сайті.
Ви можете часто їх бачити на безлічі комерційних сайтів, що надають послуги або пропонують купити будь - яку продукцію. По суті інтернет магазини не повного циклу, т. Е коли кошика немає, а є щось на зразок замовлення через цю форму. Ось як вони можуть виглядати:
Або у вигляді кнопочки також в шапці сайту:
Хтось їх може використовувати і в футере сайту, це теж допускається. Виглядає ось так:
Насамперед нам потрібно увійти в адмін панель блогу і перейти в розділ плагіни, де ми з вами додамо новий плагін під назвою Contact Form 7. Це найпопулярніше рішення для створення простих і складних форм зворотного зв'язку для блогів.
Ні хухри мухри - 24 мільйони завантажень вже багато про що говорить. Натискаємо на кнопку встановити і вона з'явиться у нас в лівій частині панелі адміністратора.
Натискаємо на назву і далі вибираємо «Додати нову»
За замовчуванням вже обраний українську мову, так що турбуватися не варто. Продовжуємо наш процес.
Далі нам потрібно буде визначитися з назвою. Чи не горішнє, що не винаходить велосипед, а напишіть просто «Форма зворотного дзвінка». Вам буде зрозуміліше і ви точно не заплутаєтеся.
Для цього нам необхідно в правій частині екрану натиснути на кнопку «згенерувати тег» і вибрати відповідний пункт. Ось таким чином:
У лівій частині у вас буде такий запис:
У лівій частині шаблон вхідних листів у нас буде такий запис:
Не забудьте поставити також галочку в чекбоксі «Використовувати HTML формат листа»
Внизу вам потрібно буде рядок такого виду «Please fill in the required field» перекласти українською, приблизно так: «Будь ласка заповніть обов'язкове поле»
Після всіх цих дій не забудьте зберегти зміни, натиснувши на кнопку в правій верхній частині екрану.
Створення спливаючій форми
Наше завдання полягає в тому, щоб при натисканні на кнопку-посилання у нас з'являлася спливаюча форма зворотного дзвінка. Для її створення нам буде потрібно спеціальний плагін, заснований на мові Jquery, називається він - Easy FancyBox. Він також доступний для установки прямо з адмінки. Давайте тепер додамо його.
Теж досить рейтинговий плагін і скачуваний. Це говорить про те, що він регулярно оновлюється і користується гарною популярністю у блогерів. Те що потрібно!
Натискаєте просто на «Встановити» і він почне на вас працювати. У ньому є налаштування для медіафайлів. Можемо пробігтися коротко по ним.
Розміри зображення - встановлюєте свої значення для мініатюр, середніх і великих картинок.
Вказуєте те, що хочете в подальшому використовувати. Я залишу тільки для картинок.
Посилання та затемнення області з контентом (Overlay). перший чекбокс - показувати затемнення навколо контенту, відкритого в FancyBox, другий - закрити форму, при кліці на затемнену область.
Також можете задати прозорість (Opacity) і колір. Я нічого не ставив, залишив за замовчуванням всі як є.
- Показувати значок закриття вікна
- Колір заголовка і колір рамки навколо
- Розміри (за замовчуванням 560x340x10)
- Поведінка (затримка в секундах коли з'являється форма зворотного дзвінка на сайті і швидкість закриття).
Сумісність з іншими браузерами та пристроями
- Включити правила для браузера IE 6 і 7 версії (стилі мається на увазі)
- Включити правило для стилів до браузеру IE 8
Я нічого в них не вказував, хоча можете поекспериментувати кросссбраузерность форми.
Здорово! Тепер все це багатство опцій збережемо.
Ви запитаєте, а де її отримати? Все елементарно, Ватсон! Йдемо в Contact Form 7 -> Форми і там ви побачите шорткод для вставки в будь-якому місці на сайті.
Тепер я збережу сторінку, яку редагував і подивлюся, що у мене в підсумку вийшло.
розмір полів, шрифт і оформити кнопку «Відправити». Потрапити трохи J
Дизайн для форми зворотного дзвінка
Ось такий код я вставив в таблицю стилів, щоб отримати потрібний мені дизайн форми зворотного дзвінка: