Спливаюча контактна форма WordPress
Нещодавно один із відвідувачів поставив питання, як створити спливаючу контактну форму? Пропоную вам створити таку форму за допомогою двох плагінів Contact Form 7 і Easy FancyBox.
Перше, що необхідно, це встановити обидва плагіна. Після того як встановили та активували необхідно в панелі адміністрування зайти в меню Контакти (CF7) та налаштувати форму. Процес налаштування досить простий я упущу цю частину уроку, якщо він необхідний напишіть мені у коментарях і я доповню цей урок. Після створення форми плагін запропонує вам шорткод для вставки у статтю. Виглядати це буде ось так:
Після створення форми необхідно створити сторінку та вставити в неї шорткод форми:
 |
|
Отже, форма у нас є, залишилося змусити з'являтися її у вікні, що спливає, для цього підміняємо шорткод форми на наступний код.
|
1 2 3 4 5 6 7 |
<a href="#contact_form_pop" class="fancybox">Открыть контактную форму</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form 1 "Contact form 1"] </div> </div> |
Приклад вставки коду форми:
Після вставки коду та збереження сторінки, можна натиснути на посилання, потім відкриється контактна форма у спливаючому вікні.
Код перевірив на одному з сайтів, що розробляються мною, все працює. Удачі в розробці сайтів.
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
Доброго дня!
А як цей оновлений код форми прикріпити до кнопки. Кнопка у вигляді картинки або комірка у меню навігації.
Підкажіть будь ласка!
Для того, щоб посилання викликало контактну форму, необхідно в неї ввести код як показано в прикладі “Приклад вставки коду форми:”. Відстилізувати посилання за допомогою CSS можна як завгодно вам під ваш дизайн.
Сергій трохи вище у коді є приклад, думаю якщо встановите обидва плагіна і зробите за прикладом все стане ясно. Якщо не розберетеся напишіть на якому сайті вам потрібно зробити і де, спробую допомогти.
Дякую! Вийшло
Дуже радий, що мої праці зі спливаючою контактною формою не спрямовані.
Відмінне рішення. Аби ще заглибитись у трохи в стиль самої контактної форми. Привести її до ладу.
Тут основне завдання було показати як форму вбудовувати, а стилізація форм це вже наступний етап і робиться у стилях (css).
Доброго дня, підкажіть а де міняти стилі? і як зробити кнопку, а не текст?
Стилі теми в WordPress тут: /wp-content/themes/папка з ім'ям теми/style.css.
Кнопку а не текст де? У нас на прикладі кнопка відправки є.
Чомусь не спрацьовує в опері. При натисканні нічого не відбувається. У хромі при повторному натисканні вантажить не форми, а саму сторінку у цьому спливаючому вікні.
Скинь посилання на коментар якщо сайт доступний в інтернет, може допоможу.
Доброго дня ! Стаття сподобалася. Але форма спливає один раз. А потім спливає вся сторінка!!!!!Допоможіть!!!
Потрібно подивитися на сам сайт, так навскідку сказати складно.
Був схожий глюк – вирішилося встановленням Easy FancyBox
спасибі за підказку! Думаю цей плагін краще працює, так як у мене на деяких сайтах теж була проблема описана вище. Додам його і до уроку.
добрий день! Дякую за чудову статтю. А як зробити, щоб форма виринала при натисканні на кнопку-шорткод?
Для того, щоб форма реагувала на кнопку, можна просто оформити стилями посилання “Відкрити контактну форму”, або як варіант, просто додати до потрібного елемента клас class=”фантазія”.