Изскачащ формуляр за поръчка в wordpress. Ако дава грешка: Исканото съдържание не може да бъде заредено

Здравей, любим мой читател! В този епизод ще ви разкажа как внедрих изскачаща форма обадете се обратнона сайта на WordPress.

Факт е, че формулярът за обратно извикване много често се използва от повечето уебмастъри именно за удобство на потребителите, така че да извършат целевото действие възможно най-скоро - тоест да оставят заявка на сайта.

Често можете да ги видите на много търговски сайтове, които предоставят услуги или предлагат закупуване на всякакви продукти. Всъщност онлайн магазините не са пълен цикъл, тоест когато няма количка, но има нещо като предварителна поръчка през тази форма. Ето как може да изглеждат:

Или под формата на бутон също в заглавката на сайта:

Някой може да ги използва във футъра на сайта, това също е позволено. Изглежда така:

И така, приятели. Всичко това бяха примери, сега ще приложим същата форма за обратно извикване за WordPress сайт на практика. Ще го направя на уебсайт, посветен на озеленяването на територията на Калининград.

На първо място, трябва да влезем и да отидем в секцията с плъгини, където ще добавим нов плъгиннаречен Форма за контакт 7. Това е най-популярното решение за създаване на прости и сложни блогове.

Нищо проклето - 24 милиона изтегляния вече говорят много. Щракнете върху бутона за инсталиране и той ще се появи от лявата страна на административния панел.

Руският език вече е избран по подразбиране, така че няма нужда да се притеснявате. Продължаваме нашия процес.

Сега трябва да добавим полетата, които ще участват. Вече ги имате по подразбиране, по принцип можете да ги оставите, не ги изтривайте. Единственото, което бих добавил е задължително поле с телефонен номер.

За да направите това, трябва да кликнете върху бутона „генериране на етикет“ от дясната страна на екрана и да изберете съответния елемент. като това:

Кликнете върху елемента „Телефонен номер“, поставете отметка в задължителното поле и след това копирайте получения етикет във формуляра отляво заедно с други имена и в шаблона за писмо.

От лявата страна ще имате запис като този:

Поставете поле за телефонен номер по-долу.

От лявата страна е шаблонът входящи писмаще имаме запис като този:

Не забравяйте също да поставите отметка в квадратчето „Използване“. HTML форматписма"

В долната част ще трябва да преведете ред като този „Моля, попълнете задължителното поле“ на руски, нещо като това: „Моля, попълнете задължителното поле“

В полето Адресат добавете имейл адреса, на който ще се изпращат приложенията от сайта.

Страхотно! Формата за обратно обаждане за сайта е почти готова. Сега трябва да го накараме да изскача при щракване.

Създаване на изскачащ формуляр

Нашата задача е да гарантираме, че когато щракнете върху бутона за връзка, се появява изскачаща форма за обратно повикване. За да го създадем, се нуждаем от специален плъгин, базиран на езика Jquery, той се нарича Easy FancyBox. Предлага се и за инсталиране директно от админ панела. Нека сега го добавим.

Просто щракнете върху „Инсталиране“ и ще започне да работи за вас. Има настройки за медийни файлове. Можем да ги прегледаме накратко.

Размери на изображения – задайте свои собствени стойности за миниатюри, средни и големи изображения.

FancyBox ефект за следните медийни категории:

Снимки
PDF документи
Вградено съдържание
SWF графики
Youtube
Vimeo
Dailymotion
вградени рамки

Посочете какво искате да използвате в бъдеще. Оставям го само за снимки.

Можете също да зададете прозрачност (Непрозрачност) и цвят. Не съм задавал нищо, оставих всичко както е по подразбиране.

прозорец

Показване на икона за затваряне на прозорец
Цвят на заглавката и цвят на рамката
Размери (по подразбиране 560x340x10)
Поведение (забавяне в секунди, когато формата за обратно извикване се появи на сайта и скорост на затваряне).

Съвместим с други браузъри и устройства

Активиране на правила за браузър IE 6 и 7 версии (стилове означават)
Активиране на стилово правило за браузър IE 8

Не съм посочил нищо в тях, въпреки че можете да експериментирате с кросбраузърната функционалност на формата.

Изображения

Автоматично откриване за разширения на изображения – jpeg, png, jpg. Можете да добавите свои собствени разширения
Прилагане към всички свързани изображения
След това просто не промених настройките, оставих всичко както е. Направете същото.

Страхотно! Сега нека запазим цялото това богатство от опции.

Сега слушаме много внимателно, гледаме и повтаряме след мен. Най-добре е да поставите формата за обратно обаждане на най-видимото място, тоест в горната част на заглавката на сайта, под телефонни номера и контакти. Това ще направим. Да отидем на шаблона за заглавка. php и поставете този код:

Обадете се обратно

< a id = "myButton" href = "#contact_form_pop" class = "fancybox" >Обадете се обратно< / a >

< div style = "display:none" class = "fancybox-hidden" >

< div id = "contact_form_pop" >

< / div >

Не се тревожете, че тук има допълнителен таг div; в оформлението на моя сайт той не е развалил дизайна или е причинил грешка, но в друг случай имаше грешка. включено различни шаблониекспериментирайте по този и онзи начин.

Обърнете внимание на функцията, в която се показва формата:

[ контакт - форма - 7 id = "92" title = "Формуляр за обратно обаждане" ] !}

Може да попитате откъде мога да го взема? Всичко е елементарно, Уотсън! Отидете на Contact Form 7 -> Forms и там ще видите кратък код за вмъкване навсякъде в сайта.

Сега ще запазя страницата, която редактирах, и ще видя какво постигнах.

размер на полето, шрифт и дизайн на бутона „Изпрати“. Имай малко търпение Дж

Дизайн на формуляр за обратно обаждане

Реших да променя размера на полетата за име, имейл и телефон в дизайна. Стандартният вход не е съвсем подходящ. Как да разберете правилния им клас? Това става чрез инспектиране на елементи чрез щракване десен ключмишката и щракнете върху преглед на кода на елемента и по-долу ще видите всички елементи и класове.

Това е кодът, който вмъкнах в листа със стилове, за да получа дизайна на формата за обратно извикване, от който се нуждаех.

Здравейте, скъпи читателю, в тази статия ще ви покажа как да създадете формуляр обратна връзкав изскачащ прозорец на вашия WordPress сайт. Често, когато разработвате свой собствен уебсайт или блог, трябва да инсталирате възможността оперативни комуникациис посетителите на интернет ресурса. В този случай изскачащият формуляр за обратна връзка за WordPress ще бъде полезен, което ще помогне да се установи бърз контактс потребители.

Защо ви е необходим изскачащ формуляр за обратна връзка за WordPress? Причини за използването му

Нека да разгледаме защо е необходим този формуляр

Спестяване свободно пространствона уебсайта. Формата за контакт може да бъде поставена навсякъде: в долния колонтитул или хедъра, в основното съдържание на страницата, като плаващ бутон и др.

Ефектен външен вид. Анимацията на появата на нов прозорец изглежда интересна и необичайна

Наличност. Можете да оставяте записи в тази форма от всяко място на сайта; потребителите не трябва да се връщат на главната страница.

Допълнителен бонус: формулярът е лесен за модифициране и персонализиране, за да отговаря на нуждите на вашия сайт. Изскачаща форма за обратна връзка за WordPress може да бъде представена под формата на отварящ се прозорец за поръчка на обаждане, услуга или продукт или за абониране. При желание можете да добавите визуални ефекти, различни изображения и др.

Плъгини за инсталиране на изскачаща форма

Нека да разгледаме инструментите, необходими за разработване на изскачащи прозорци в wordpress - специално приложениеза разработка и създаване на уеб сайтове.

Форма за контакт 7

Този плъгин се използва директно за проектиране на формуляра. За да го инсталирате, изпълнете следните стъпки:

Easy FancyBox

Този плъгин е подходящ за разработване на ефект на изскачащ прозорец. Инсталационната последователност на Easy FancyBox е подобна на предишната инсталация на плъгина.

Настройване на добавки

Можете да конфигурирате настройките на добавката Easy FancyBox чрез медийни файлове. Използвайте опциите на менюто “Настройки” -> “Медийни файлове”.

В блока, който се отваря точно отдолу стандартни настройкиЩе бъдат разположени параметрите на самия плъгин. Обикновено има отметка до елемента „Изображения“, което показва, че ще се активира изскачащ прозорец, когато щракнете върху изображението. Препоръчително е да го премахнете, тъй като ако има други допълнителни инструментиКогато създавате изскачаща анимация, изображенията ще се отворят два пъти.

Но това не е всичко. Поставете отметка в квадратчето до „Вградено съдържание“

Всеки може да се задълбочи в настройките на приставката и да ги зададе по свое усмотрение.

Съвет: ако искате формата винаги да е отворена, махнете отметката Лесни настройкиКвадратчето за отметка FancyBox до опцията „Затваряне на FancyBox при щракване върху наслагването“, което изпълнява функцията за затваряне на прозореца, когато мишката се щракне извън него.

Инструкции стъпка по стъпка

Е, със "скучно" предварителна подготовкаТова е всичко, сега нека да преминем към „вкусната“ част - как всъщност е разработена изскачащата форма за обратна връзка на WordPress.

Работа с прозореца на формуляра

Откъде да започнем? Разбира се, с предварително зададенисамата форма. Изберете „Формуляр за контакт 7“ в дясното меню и след това опцията „Добавяне на нов“.

Измислете ново име за формата, например „Експеримент“, въведете го в полето за въвеждане на прозореца, който се отваря, където се намира текстът „Заглавие“ и кликнете върху бутона „Запазване“. Можете да промените други параметри, включително самия шаблон на формуляр, но ние няма да го докоснем. Сега нашата основна цел– просто научете как да създавате изскачащи формуляри.

Погледнете резултата. Както можете да видите, плъгинът генерира специален кратък код, който се използва за последващо показване на формуляра. Трябва да го копирате.

Изход на формуляр

Сега да се захванем с програмирането. Новият програмен код може да бъде вмъкнат навсякъде в сайта, например в „Контакти“ и др. В нашия пример нова формаще се покаже в изпълнимия модул. Изберете „Външен вид“ в менюто, след това щракнете върху „Виджети“, след което в прозореца, който се отваря, щракнете върху опцията „Текст“.

Сега щракнете върху бутона „Добавяне на джаджа“.

Поставете следния код в полето за въвеждане на съдържание:

Напишете писмо Начален текст Краен текст

Ето как ще изглежда резултатът:

Моля, обърнете внимание, че вместо краткия код, посочен в примера, ще трябва да посочите този, който сте създали в резултат на създаването на нов формуляр.

Освен това формулярът може да се редактира: добавяне или премахване на полета за въвеждане, въвеждане на начален и/или краен текст преди и след формуляра, конвертиране на текста в заглавие или показване като отделен блок, използване на различни стилове, контейнери и др. Само да имаше време и желание!

Стил на връзката

Нека също да разгледаме два начина за преобразуване на връзка в бутон, за да подобрим визуалния й вид.

Метод 1: Използване на допълнителни стилове на тема.

Следният код може да бъде вмъкнат както следва:

Самият програмен код изглежда така:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/***Показване на връзка във форма на бутон****/ .contact-us a( margin:auto; /*подравняване на блока в центъра*/ display:block; width:199px; /*размер на бутона*/ padding:11px 22px ;/*inner padding:none; центриране на надписа*/ цвят:#ffffff; цветни връзки при задържане на курсора**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ;moz-преход: всички 0,6s лекота;

Резултатът е бутон като този:

Кодът вече казва кой параметър за какво отговаря. Сега всеки може да редактира кода по свое усмотрение, експериментирайки с него различни стиловеи цветове и създаване на най-подходящата връзка за изскачащия прозорец.

Метод 2 – използвайте изображение като бутон. Първо качете необходимото изображение на сайта (всяко изображение, което харесвате, не непременно под формата на бутон - няма особено значение). За да направите това, щракнете върху „Медия“ -> „Добавяне на нова“ и изберете желаната снимка. Вдясно от изображението ще се появи постоянна връзка към файла (в в този пример http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), копирайте го и го добавете към кода (не премахвайте кавичките):

Добавете получения код към основния изходен код на формата вместо текста „Напишете писмо“.

Моят уебсайт показа бутона, показан на екранната снимка по-долу:

Ето как ще изглежда бутонът, ако оставите допълнителния стил, описан в първия метод:

Добавяне към менюто

За да може изскачащият формуляр за обратна връзка за WordPress да бъде извикан директно от менюто, трябва да използвате следния код

1 2 3

Напиши писмо

Първо трябва да разберете къде точно трябва да вмъкнете този код. Отидете в „Редактор“ през „Външен вид“ и сред шаблоните изберете „Заглавка (header.php)“

Сега намерете мястото, където се намира кодът на менюто. Намерете следната информация:

1 2

По-долу поставете кода си точно преди затварящия маркер.

Като цяло няма нищо трудно да добавите формуляр за контакт към вашия уебсайт, основното е да имате малко свободно време и желание да проучите задълбочено всички аспекти. Сега знаете какво е форма за контакт, защо е необходим, как да го използвате на сайта и как да обработите връзка, за да извикате прозорец с изскачащ ефект. Успех и късмет в този труден, но вълнуващ бизнес за изграждане на уебсайтове.

Поздрави приятели. Днешният урок ще помогне на вашия WordPress сайт да има хубава и функционална форма за обратна връзка. Ще го направим с помощта на приставката Contact Form 7. По едно време прекарах много време в търсене на нормален формуляр за контакти достойна алтернативаВсе още не съм намерил този плъгин.

Нека ви напомня още веднъж, че ще работим с плъгин, така че ако имате нужда от обратна връзка без плъгин, по-добре посетете статията за, настройката е малко по-сложна, но опцията е по-универсална (подходяща за всеки сайт) и натоварва по-малко сървърите.

Основното предимство на формуляра за контакт във Формуляр за контакт 7 е неговата лекота на персонализиране, почти неограничена функционалност и автоматична настройка на дизайна към всеки WordPress шаблон. С негова помощ можете да създадете не само форма за изпращане на съобщения от сайта. Плъгинът може да се използва за създаване на бутон за поръчка, обратно обаждане или сложен въпросник с квадратчета за отметка и падащи списъци. Също така е възможно да прикачвате файлове за прехвърляне.

С една дума, плъгинът е мегафункционален.

Ако все още сте загрижени за въпроса „да правите или да не правите форма за контакт?“ (можете да се справите, като просто публикувате информация за контакт на правилните страници), тогава ще кажа недвусмислено - струва си да се направи.

Първо, изпращането на съобщение директно от сайта е по-удобно от отварянето пощенска програмаи попълнете всичко ръчно. Спестяването на време няма да навреди на никого.

Второ, формата за контакт може да бъде персонализирана и това ще ви позволи да получавате писма със стандартен формат - те ще бъдат по-лесни за навигация. Например, можете да зададете стандартна заглавка за съобщение „Поръчка“ и всички имейли от страницата за поръчки ще пристигат с тази заглавка.

Трето, използването на формата за контакт ви позволява да скриете адреса си имейли по този начин се отървете от възможния спам, който неизбежно се появява, когато имейл кутия стане публично достъпна.

Четвърто, той е просто стилен и модерен.

Плъгинът е като цяло база данни на wordpress, така че няма нужда да търсите файловете му някъде, да ги изтеглите за себе си и след това да ги качите на хостинга. Всичко е направено по-просто - чрез администратора на WordPress, влезте в секцията с плъгини, напишете „Контактна форма 7“ в полето за търсене и го инсталирайте. Ако никога не сте инсталирали плъгини, тогава подробни инструкциикак да инсталирате плъгина.

Настройката на плъгина се състои от два етапа.

Първият е настройка на конкретна форма. Различни формиможе да има много, всяко от тях може да съдържа свой собствен набор от полета. С една дума, за всяка задача и всяка страница на сайта можете отделно да създадете форма за обратна връзка, Wordpress позволява това - списъкът им ще се съхранява в базата данни на плъгина.

Вторият етап е вмъкване на формата в страниците на сайта. Всеки формуляр, който създаваме в плъгина, ще има свой собствен уникален кратък код. За да го вмъкнете в страницата, трябва само да го вмъкнете.

И така, да вървим.

За начало в лявото меню на административния панел намираме раздела Контактна форма 7. Под него ще се появи меню с два елемента - „Формуляри“ и „Добавяне на нов“.

Все още нямаме готови форми, така че нека отидем в секцията „Добавяне на нови“. Там ще се отвори страница с молба да изберете език и езикът по подразбиране също ще бъде посочен там. Просто щракнете върху синия бутон „Добавяне на нов“.

Настройките на формата са разделени на отделни блокове. Ще ги разгледам по ред.

Първият блок отговаря за името на вашия формуляр - поставете курсора върху надписа „Без заглавие“ и въведете името, от което се нуждаете. Това име ще ви се показва само в списъка с формуляри за контакт на плъгина, така че го изяснете, за да не се объркате в бъдеще от цялото разнообразие.

Първоначално този блок съдържа стандартна конфигурация на полето. Съдържа името на подателя на писмото, негов имейл адрес, тема на имейл, съдържание на имейл и бутон за изпращане.

Задължителните полета са маркирани със звездички. Ако това поле е оставено празно, съобщението няма да бъде изпратено.

Оформлението на полетата може да се персонализира с помощта на обикновен htmlмаркировки.

Що се отнася до настройката на самите полета, можете да премахнете ненужните и да добавите тези, които ви трябват. Ако не желаете темата на писмото да се въвежда ръчно, просто изтрийте съответния блок.

Добавянето на полета също е много лесно. СЪС дясната странаИма бутон за генериране на етикет; като щракнете върху него, ще видите списък с всички възможни полета, които този плъгин поддържа.

Изберете задължителен елементи конфигурирайте настройките му. Плъгинът е на руски, така че всички настройки са интуитивни.

Първото поле за отметка показва дали полето е задължително или незадължително (добавя звездичка).

След като настроите полето, ще имате 2 кратки кода:

„Копирайте този код и го поставете в шаблона на формуляра отляво“ – този код се вмъква в кода на формуляра по същия начин като всички останали;
„И поставете следния код в шаблона за писмо по-долу“ - ще ни трябва този код, за да форматираме писмото в следващия блок.

По този начин можете да добавите произволен брой полета, отметки, падащи списъци, елементи за прикачване на файлове и др.

Сега нашата задача е да персонализираме писмото, което ще получим. Писмото по никакъв начин не засяга функционалността на формата за обратна връзка, то служи само за предаване на информацията, която е въведена във формата.

Нашата задача е да включим цялата информация в писмото.

Първата стъпка е да посочите имейл адреса, на който ще бъде изпратено съобщението (може да бъде всичко).

Втората точка показва имейл, от който ще Ви бъде изпратено писмото. Не бих променил нищо тук, по подразбиране е входящата кутия на вашия блог и към нея се добавя етикет с името на лицето, което изпраща съобщението.

След това посочваме темата на писмото. Стандартно темата се взема от полето, което се попълва във формата. Но можете да премахнете този елемент от формуляра и да въведете конкретна тема в полето, което се задава автоматично във всяка буква. Направих това за формуляри за обратна връзка от страници за услуги и реклама. Съобщенията от там винаги идват с една и съща тема „Поръчка на услуги“ или „Поръчка на реклама“ - просто и ясно.

Полето за допълнителни заглавки съдържа етикета „Отговор до:“, така че когато отговорите на писмо, получено от вашия блог, вие изпращате съобщението до блога и до адреса, който подателят на писмото е посочил в полето на формуляра. Не е необходимо да променяте това поле.

Полето „Шаблон на писмо“ отговаря за вътрешното съдържание на съобщението, което сте получили. По подразбиране то съдържа информация за подателя, темата и текста на съобщението, въведени в полето.

В края се посочва сайтът, от който е изпратено писмото.

Ако сте въвели някаква информация във формуляра допълнителни полета, не е инсталиран по подразбиране, тогава не забравяйте да добавите съответния етикет в шаблона на писмото. Беше ви дадено в блока „Шаблон на формуляр“, където генерирахте съответния етикет (полето „И поставете следния код в имейл шаблона по-долу“).

обожавам го текстова информацияТози блок (с изключение на етикетите) може да бъде променен по ваш вкус. Можете също така да добавяте всякакви описания и да разменяте тагове, като ги подреждате в реда, който ви харесва.

Ако искате някой друг да получи изпратеното до вас съобщение, можете да поставите отметка в това поле.

Този блок е конфигуриран подобно на предишния. По подразбиране всички полета в него са попълнени, така че писмото да отиде при този, който е попълнил формуляра (явно, за да не забрави).

Можете да настроите копие да бъде изпратено например до вашия мениджър или счетоводител.

В този блок можете да конфигурирате съобщенията, които потребителят вижда, след като щракне върху бутона за изпращане на съобщение. Ако искате да промените нещо, моля, оставих всичко както е.

След като попълните всички полета, върнете се в началото към блока „Име на формуляр“ и щракнете върху бутона „запазване“, разположен вдясно.

Плъгинът ще постави създадения от вас формуляр в списъка с активни и ще го присвои специален коднещо като това:

[ контакт - форма - 7 id = "5464" title = "Проверка" ] !}

Като поставите този код навсякъде на вашия сайт, ще получите готова формаза комуникация с вашите потенциални клиенти.

Разпространителите на спам причиняват много проблеми на собствениците на уебсайтове и всяка нова форма, която ви позволява да напишете нещо, само увеличава броя на спам ботовете.

Ако оставите приставката за формуляр за контакт основна версия, след известно време ще бъдете атакувани от много празни и безсмислени съобщения.

Има два начина да се отървете от спамерите:

Поставете задължителна captcha (това може да стане с допълнителен плъгин – Really Simple CAPTCHA).
Използвайте плъгина против спам за WordPress – Akismet.

Първият вариант е неудобен, защото принуждава посетителите да влизат ръчно допълнителни знаци. Не е толкова трудно, но на някои хора не им харесва.

Използването на плъгина Akismet е по-удобно, тъй като той самостоятелно анализира въведените данни (имена, имейл адреси, връзки) и въз основа на натрупаната база данни прави заключения за спам или неспам на съобщението.

В допълнение, akismet е инсталиран на повечето WordPress сайтове за защита срещу спам в коментарите към статии. Това означава, че когато го използвате, няма да е необходимо да инсталирате допълнителни плъгини и да създавате допълнително натоварванекъм сайта.

1. Инсталирайте Плъгин Akismetкъм вашия сайт и го активирайте - .

2. Добавете допълнителни данни към етикетите на формата за контакт:

в полето с името на автора добавете akismet:author
в полето с имейл на подателяимейли akismet:автор_имейл
в полето за адрес на сайта akismet:author_url

Трябва да изглежда така:

След като бъде запазен, формулярът за контакт трябва да блокира всички съобщения, изпратени от спамери. Можете да проверите работата на филтъра, като използвате специалното име на теста „viagra-test-123? – когато го въведете, трябва да се появи съобщение за грешка.

За да направите проверката по-малко строга, можете да поставите отметка само в някои от полетата, например име и имейл, и да оставите адреса на уебсайта без отметка. В този случай вероятността от спам съобщения ще се увеличи, но ще бъде по-малко вероятно да загубите необходими съобщения.

Ако установите, че Akismet не ви подхожда (пропуска много спам или блокира необходимите съобщения), тогава можете да активирате captcha. За да направите това, инсталирайте плъгина Really Simple CAPTCHA.

Отворете желаната форма за контакт за редактиране

Изберете Captcha от списъка с тагове. В настройките на етикета можете да изберете размера на изображението със символи, в противен случай не е необходимо да променяте нищо. В долната част на прозореца за настройки ще се появят 2 етикета, единият отговаря за показването на изображението, вторият показва поле за въвеждане на данни от това изображение.

За да започне captcha да работи, трябва да копирате и поставите и двата маркера в левия прозорец на шаблона на формуляр и след това да запишете промените.

Формата за контакт не винаги трябва да се намира в определен раздел на сайта, понякога клиентът трябва да има достъп до нея от всяка страница на ресурса.

В такива случаи публикуването на пълен формуляр не винаги е удобно. Много по-лесно е да поставите бутон на видно място, което привлича вниманието. Щракването върху този бутон вече трябва да води до отваряне на формуляра.

Така човек ще може да изпраща съобщения от сайта, без да напуска страницата, от която се нуждае.

Това става с друг плъгин – Easy FancyBox.

Първо, инсталираме самия плъгин; той е в общата база данни на плъгини, така че всичко, което трябва да направите, е да въведете името му в административния панел на вашия блог в търсенето на плъгини. След като инсталирате приставката, в секцията „Настройки“ ще се появи раздел „медийни файлове“.

В този раздел трябва да намерите списък с типове съдържание, които трябва да се показват в изскачащия прозорец. По подразбиране има само изображения, трябва да добавите вградено съдържание.

Сега, когато настройката на приставката е завършена, нека да преминем към настройката на бутона за обратна връзка.

По принцип можете да използвате обикновена текстова връзка, но бутон с изображение ще изглежда по-добре.

Във вашия сайт, където искате да се покаже бутон за формата за контакт (в горния, долния колонтитул или страничната лента), поставете следния код:

< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "форма за контакт" alt = "форма за контакт" src = "http://ссылка на картинку" > < / a >

< div style = "display:none" class = "fancybox-hidden" >

< div id = "contact_form_pop" >

[ contact - form - 7 id = "id на вашия формуляр" title = "име на вашия формуляр" ] !}

< / div >

В кода трябва да посочите адреса на изображението, което използвате като бутон за обратна връзка, и да редактирате краткия код на самата форма - въведете вашия идентификатор и заглавие.

Този елемент е необходим, ако искате да инсталирате бутон в страничната лента. Страничната лента в WordPress не винаги позволява кратки кодове.

За да активирате тази функция, трябва да отворите файла function.php за редактиране (директно от Администратор на WordPress) и вмъкнете следния код преди затварящата скоба „?>“:

add_filter("widget_text", "do_shortcode");

add_filter ("widget_text" , "do_shortcode" ) ;

Това ще ви даде възможност да изпълните всички кратки кодове в страничната лента.

В крайна сметка получих този хубав изскачащ формуляр:

Понякога има нужда да поставите няколко формуляра на уебсайт с различни настройкии полета.

Например, единият бутон води до форма с име и телефонен номер и се използва за поръчка на обратно обаждане от сайта, а вторият трябва да отвори друга форма, където има подробно приложение за поръчка (с адрес, поле за описание, възможност за прикачване на файл и др. ). В самия плъгин Contact Form 7 можете да създадете безкраен брой опции за формуляри, но как можете да ги поставите в различни бутони на една и съща страница?

За да направите това, трябва да коригирате кода на бутона от предишния параграф. Първият бутон използва опцията, представена по-горе. Във втория се променят две стойности:

Връзката се променя, присвоете на параметъра href стойността #contact_form_pop_2
Променете идентификатора на същата стойност #contact_form_pop_2

здравейте всички Бяхме бомбардирани с въпроси за това как да приложим формуляра, който се появява в модален прозорецслед щракване върху бутона и след изпращане ще се покаже съобщение за успех или неуспех.

Мисля, че има много подобни неща в интернет, но тъй като хората питат, реших да го направя. Освен това такава функционалност трябва да присъства на почти всяка целева страница, за да се приложи бутон за обратно повикване. И наистина, сега има все повече и повече резултати от AB тестове, които показват, че отворените форми работят по-зле от тези, скрити в модален прозорец и отворени след натискане на бутон.

Някои твърдят, че това се дължи на факта, че хората бавно „развиват имунитет“ и отворената форма е агресивна продажба. Твърди се, че сега е моментът, когато потребителят, след като види отворена формасмята, че се опитват да му продадат нещо. Не съм напълно съгласен с тази теория, но има зрънце истина. Това може да е вярно в някои видове бизнес. Е, сега нека се заемем с прилагането на формуляра.

Забележка! Няма да описвам подробно всяко действие, но ви предлагам готова версия в изходния код. Ако имате въпроси, пишете в коментарите. Ще го измислим :)

Днес ще започнем не с jQuery, а с оформлението на бутона и формата. Ще включим всички скриптове в края на страницата.

Бутон, който при натискане отваря модален прозорец:

Оставете заявка

Можете да зададете произволен клас, но в href напишете #modal - това ще бъде id на контейнера със засенчване и форма за контакт.

Сега ще дам кода за формуляра и блока, на който ще се намира формуляра:

Оставете вашите данни за контакт и наш консултант ще се свърже с вас. Искам тази форма за моя уебсайт

След добавяне на стилове изглеждаше така:

За създаване на модален прозорец е използвана библиотеката Remodal. Това е набор от css и js файлове само за създаване на анимирани модални прозорци. Можете да го изтеглите от връзката или с моите редакции в края на статията.

Добавяме стилове между таговете head:

И преди затварящия етикет body добавете скриптове:

Script.js е скрипт за обработка на формата. Същият Ajax, който ни позволява да извършим цялата процедура без презареждане на страницата:

$(document).ready(function () ( $("form").submit(function () ( // Получаване на ID на формуляра var formID = $(this).attr("id"); // Добавяне на хеш към името ID var formNm = $("#" + formID); $.ajax(( тип: "POST", url: "mail.php", данни: formNm.serialize(), успех: функция (данни) ( // Изходен текст на резултата от изпращането $(formNm).html(данни); грешка: функция (jqXHR, текст, грешка) ( // Показване на текста на грешката при изпращане $(formNm).html(грешка); ) ) );

Няма да цитирам изходен код css и js от файловете, отговорни за модалния прозорец и формата, тъй като те са доста големи. Ако е така, вижте източника. Но манипулаторът на PHP е до голяма степен стандартен (ако мога така да се изразя):

Моля, не забравяйте да промените имейл адресите си на свой собствен.

като това ajax формаполучи се. Съжалявам, че не се опитах да обясня подробно как е направен всеки елемент. Просто исках да дам завършен резултат, но няма смисъл да описвам всички анимации и изяви. Изтеглете източника и го внедрите на вашия уебсайт. И това е всичко за днес. Успех на всички!

Момчета, призовавам ви да тествате формата на реално или виртуален сървър(хостинг). Моля, уверете се, че вашият сървър поддържа PHP, имате платен план и не тестов период. В противен случай в 90% от случаите формата няма да работи.

Не чакайте писмо у вас пощенска кутия, ако просто отворите индексния файл в браузъра и щракнете върху бутона „Изпращане“. Php е сървърен език!

Ако сте твърде мързеливи, за да го разберете и да направите формуляра сами, тогава препоръчвам да обърнете внимание.

Актуализирана версиястатия се намира

(Последна актуализация: 08.07.2016 г.)

здравейте всички! Отново съм аз, с полезна публикация- изскачащ прозорец за WordPress - за начинаещи и др Потребители на WordPress. Ако се интересувате от изскачащия плъгин Прозорци на WordPress, нарича се още плъгин за модален прозорец, тогава вие, приятели, сте попаднали точно на правилното място.

Плъгинът, който ще представя по-долу, можете да използвате за: Формуляр за контакт 7 в модален прозорец; всяка форма за контакт (обратна връзка) в модален (изскачащ) прозорец; видео в модален прозорец; снимки в изскачащ прозорец; настаняване полезна информацияс връзки; форма за абонамент по пощата за нови статии в модален прозореци така нататък, и така нататък, не можете да изброите всичко. Плъгинът е много прост, без сложни настройки и почти не натоварва допълнително сайта.

Можете да инсталирате този плъгин по стандартен начин, през админ панел - Plugins - Add new и в полето Search for plugins въведете името Easy Modal, натиснете Enter. Трябва да е първо в списъка. Инсталирайте го и го активирайте както обикновено. След това можете да преминете към създаване на нов модален прозорец.

За да направите това, щракнете върху новата секция Easy Modal, която се появява, и изберете Modals:

След това в най-горната част на страницата щракнете върху бутона Добавяне на нов:

И тук всичко е просто:

IN общи настройки(раздел Общи) дайте името на новия прозорец (няма да се показва, това е за вас, ако например създадете няколко модални прозореца); тип натоварване Load Sitewide (за целия сайт); заглавие на прозореца и накрая поставете необходимия код в редактора (текстов режим). В моя пример съм вмъкнал видео код от YouTube.

В параметрите можете да изберете размера на прозореца; дали да се използва фон или не; тип анимация за модален/изскачащ прозорец; местоположението на прозореца и можете също да коригирате прозореца (поставете отметка в квадратчето и посочете разстоянието от горната част на екрана).

В раздела Примери ще намерите примерни кодове за показване на изскачащ прозорец в WordPress:

Тук можете да изберете проста текстова връзка, бутон или икона. Моля, обърнете внимание, че на всеки новосъздаден прозорец се присвоява eModal - клас. Първият създаден прозорец ще има клас eModal - 1, вторият eModal - 2 и т.н. Трябва само да замените сами цифрата след знака -. Този код може да бъде поставен във или навсякъде във вашата статия. Естествено, можете да напишете произволен текст в кода. Да, почти забравих, че след като създадете модален прозорец от дясната страна на страницата, не забравяйте да щракнете върху бутона Публикуване.

Вмъкнах кода за модалния прозорец с видеото в страничната лента като бутон:

Посетителят кликва върху него и се отваря прозорец с видео:

Надявам се, приятели и другари, общ принципРазбирате как да работите с плъгина Easy Modal. Само ще добавя, че можете след това или веднага да персонализирате външния вид на модалния прозорец, като щракнете върху елемента Тема. За съжаление, в безплатна версияПлъгинът има само една тема за дизайн, но можете да я проектирате както искате, има достатъчно настройки. При настройка външен видна модалния прозорец можете незабавно да видите визуализация на дизайна вдясно:

След всички настройки за външния вид на прозореца, щракнете върху бутона Запазване вдясно. И накрая, дами и господа, ще ви покажа пример за извеждане на информация за контакт Форми за контактФормуляр 7 в модален прозорец.

Създайте нов модален прозорец, както е показано по-горе и в текстов редакторпросто поставете краткия код на формуляра за контакт 7 (ако имате инсталиран този плъгин, ако не):

Ако читателят иска да се свърже с вас, той ще натисне бутона и формата за контакт ще се отвори в модален прозорец:

Ето го, нещо подобно. Освен това всички ваши създадени изскачащи прозорци ще бъдат показани на страницата (елемент Modals), където между другото са посочени класовете за всеки модален прозорец: