Зі створенням самої форми проблем немає - для цього прекрасно підходить плагін Contact Form. який більшість блогерів використовує для створення форми зворотного зв'язку. Насправді за допомогою цього плагіна можна створити форму будь-якої складності, не тільки форму контактів - там є безліч різних елементів, від звичайних полів для введення даних до написів, вибору дати у вигляді випадає календарика і інших корисних штук.
Отже, вихід ось - плагін Contact Form для створення будь-якої бажаної форми + плагін FancyBox для виведення картинок у спливаючому вікні. Картинок? Так, але цей плагін має набагато більше маловідомих можливостей, в тому числі він може виводити у вікні практично будь-який контент, а не тільки картинки. Я давно встановив FancyBox на блозі, коли писав статтю з великими скриншотами і потрібно було зробити можливість їх показу в окремому вікні. З цим він справляється успішно, а тепер я його і зовсім заповажав, тому що за можливостями навіть платні плагіни і близько до нього не підійдуть, а FancyBox абсолютно безкоштовний, і використовувати його дуже просто.
Як FancyBox показує картинки, можна побачити, клікнувши по зображенню на початку статті. Але перейдемо до практичної частини.
Робимо спливаючу форму на блозі
Для початку покажу, про що взагалі мова, і що виходить в результаті. Ось для прикладу кнопка, на яку можна повісити будь-яку спливаючу форму, клікніть по ній:
Отже, встановіть і активуйте плагін Contact Form. Він є в офіційному репозиторії WordPress. У ньому потрібно створити якусь форму, наприклад - форму зворотного зв'язку. У багатьох це вже зроблено, так що тут проблем виникнути не повинно.
Тепер встановіть і активуйте другий плагін - "FancyBox for WP". Встановити його можна прямо з блогу, з адмінки, натиснувши посилання "додати новий плагін" і вписавши назву - він теж є в офіційному репозиторії WordPress. Можна використовувати і його різновид - "Easy FancyBox", але у мене в шаблоні було вбудоване слайд-шоу і картинки при натисканні на них виводилися відразу в двох вікнах, та й налаштувань в ньому менше, тому мені він не підійшов. Я раджу FancyBox for WP, з ним навряд чи будуть проблеми навіть якщо на блозі встановлена преміум-тема. А в іншому ніякої різниці немає - все працює однаково.
Замість «КОД ФОРМИ CONTACT FORM» поставте свій код для вставки форми, який дає плагін Contact Form - повністю, разом з квадратними дужками. У підсумку отримуємо ось таку посилання: Написати лист
А якщо Ви хочете отримати не просто посилання, а поставити якусь картинку у вигляді кнопки або інше зображення, то заздалегідь приготуйте його, завантажте на блог (наприклад, в бібліотеку медіафайлів) і скопіюйте посилання на цю картинку. Код для вставки трохи зміниться - приберемо напис і додамо картинку:
Цей код поставить на блог кнопку з посиланням на спливаючу форму (кнопка працює):
От і все! Цей код можна вставляти на будь-яку сторінку блога або в сайдбар. Але пам'ятайте, що на одній сторінці можна ставити скільки завгодно таких кнопок, але всі вони повинні викликати одну й ту ж форму. Ви можете поставити 2 кнопки для 2-х різних форм на одній сторінці, але обидві будуть показувати спливаюче вікно з тією формою, яка йде на сторінці першої. На різних сторінках можна викликати різні форми - саме цей результат мені і був потрібен.
Якщо поставити в сайдбар звичайний текстовий віджет і вставити в нього цей код, то там також все буде працювати.
Я не знаю, що це за тема, їх тисячі. Модулі можуть конфліктувати з деякими, тому що в них часто вбудовують вже різні скрипти. На простих точно все працює, а якщо є якісь навороти, то можуть бути проблеми. Спробуйте інший FancyBox, зазвичай якийсь із двох нормально працює, а зовнішньої різниці особливої між ними немає. Код теж перевірте - все повинно збігатися до останньої коми. Я на десятці тим вже випробував - завжди працювало.
Юрій, тоді обов'язково встановлю! Хотів шукати відповідь на це питання, тепер все ясно. Допомогли вирішити дві проблеми, величезна Вам спасибі !!
Привіт, така штуковина. Встановив все як написано. При першому натисканні випливає форма зворотного зв'язку, все прекрасно. Після того як зверну форму і знову натискаю на кнопку ось тут відбувається неймовірне), спливає вікно, яке як би копіює сторінку і звичайно ніякої форми. Після перезавантаження все по колу. Прошу допоможенія!
Олег, так буває на деяких шаблонах. З чим це пов'язано, не можу сказати, але є припущення. Я міняв тут різні шаблони, і на одному теж таке було. Але на інших все працювало нормально. Швидше за все справа в підключених в шаблоні скриптах, є якісь накладки і конфлікти, тому що плагін Fancy Box теж додає в код свої скрипти, а якщо в шаблоні вже є вбудовані скрипти спливаючих вікон, слайдерів і іншого, то виходить казна-яка каша , і працює це все потім дивним чином. Також можуть впливати інші включені плагіни.
Привіт Юрій! Випробував на порожній сторінці код, все працює, але мене цікавить інше питання. У мене в встановленої темі мого сайту taxi-more.ru на головній сторінці є кнопка відкриває сторінку, на даний момент «РОЗРАХУНОК ВІДСТАНЕЙ». Підкажіть будь ласка чи можна написати код що б місце заслання вставити код при натисканні якого відкривалися не сторінка, а вікно з контактною формою. Шукав плагіни за допомогою яких можна було розміщувати на головній сторінці форму зворотного зв'язку, але не знайшов. Який плагін порадили б?
Добрий день, Іван. Все набагато простіше, ніж здається -є плагін Layered Popups, за допомогою якого можна створювати красиві анімовані вікна з будь-яким вмістом. Так що і городушкі зі статті теж не потрібні. У комплекті плагіна є купка готових форм, які можна редагувати під свої потреби. Потім форму можна вставити на сторінку або прив'язати до будь-якої кнопки просто як посилання. Плагін платний, але нову версію завжди можна взяти, наприклад, на skripter.info. Приклад, як я її вставляв, можна подивитися, наприклад, тут ecoprodukt72.ru - кнопка замовлення дзвінка в верхньому меню якраз і викликає вікно. Вставляється така штука просто посиланням, так що можна її засунути хоч куди.