Здравейте всички. Те бяха засипани с въпроси за това как да внедрят формуляр, който се появява в модален прозорец след щракване върху бутон и след изпращането ще се покаже съобщение за успех или неуспех.
Мисля, че вече има много от това в интернет, но тъй като хората питат, реших да го направя. Освен това подобна функционалност трябва да присъства на почти всяка целева страница, за да се реализира бутон за обратно извикване. Всъщност сега се появяват все повече и повече резултати от AB - тестване, които казват, че отворените форми работят по-зле от тези, които са скрити в модален прозорец и се отварят след щракване върху бутона.
Някои твърдят, че това се дължи на факта, че хората бавно "изграждат имунитет" и отворената форма е агресивна продажба. Уж сега е дошло времето, когато потребителят, когато види отворена форма, си мисли, че се опитват да му „продадат“ нещо. Не съм съвсем съгласен с тази теория, но има зрънце истина. Това може да е вярно в някои видове бизнес. Засега нека преминем към изпълнението на формуляра.
Забележка!Няма да описвам подробно всяко действие, но ви предлагам готов вариант в източника. Ако имате въпроси, пишете в коментарите. ще разберем :)
Днес ще започнем не с jQuery, а с оформлението на бутона и формата. Всички скриптове са включени в края на страницата.
Бутонът, с щракване върху който ще се отвори модалния прозорец:
Изпратете вашата кандидатура
Можете да зададете всеки клас, но в href напишете #modal - това ще бъде идентификаторът на контейнера със засенчването и формата за контакт.
Сега ще дам кода на формуляра и блока, в който ще се намира формуляра:
След добавяне на стилове, изглежда така:
За създаване на модален прозорец беше използвана библиотеката Remodal. Това е набор от css и js файлове, само за създаване на анимирани модални прозорци. Можете да го изтеглите от линка или вече с моите редакции в края на статията.
Включете стилове между таговете head:
И преди затварящия маркер body - добавете скриптове:
Script.js е скрипт за обработка на формуляр. Същият Ajax, който ни позволява да извършим цялата процедура без презареждане на страницата:
$ (документ) .ready (функция () ($ ("формуляр"). submit (функция () (// Вземете идентификатора на формуляра var formID = $ (това) .attr ("id"); // Добавете хеш към името ID var formNm = $ ("#" + formID); $ .ajax ((тип: "POST", url: "mail.php", данни: formNm.serialize (), успех: функция (данни) (/ / Извеждане на текст на резултата за изпращане $ (formNm) .html (данни);), грешка: функция (jqXHR, текст, грешка) (// Извеждане на текста за грешка при изпращане $ (formNm) .html (грешка);)) ); върне false;) );));
Няма да цитирам изходния код на css и js от файловете, отговорни за модалния прозорец и формата, тъй като те са доста големи. Ако има нещо, вижте източника. Но php манипулаторът е до голяма степен стандартен (ако мога да кажа така):
Име на изпращател:$ име Телефон:$ phone "; $ изпрати = поща ($ до, $ тема, $ съобщение, $ заглавки); if ($ изпрати ==" true ") (ехо"
Моля те, не забравяйте да промените имейл адресите на вашите собствени.
Ето една ajax форма. Съжалявам, че не се опитах да обясня подробно как е направен всеки елемент. Просто исках да дам завършен резултат, но няма смисъл да описвам всички анимации, изяви. Изтеглете източника и го вградете в сайта си. И това е всичко за днес. Успех на всички!
Момчета, призовавам ви да тествате формуляра на реален или виртуален сървър (хостинг). Моля, уверете се, че вашият сървър поддържа php, имате платен план, а не пробен период. В противен случай в 90% от случаите формата няма да работи.
Не чакайте писмо в пощенската си кутия, ако току-що сте отворили индексния файл в браузъра си и сте щракнали върху бутона „Изпращане“. PHP е език от страна на сървъра!
Ако сте твърде мързеливи, за да разберете и направите формата сами, тогава препоръчвам да обърнете внимание.
Намира се актуализирана версия на статията
(Последна актуализация: 08.07.2016 г.)
Здравейте всички! Отново съм аз, с полезна публикация - изскачащ прозорец за WordPress- за начинаещи и не само потребители на WordPress. Ако се интересувате от WordPress изскачащ плъгин, нарича се още модален плъгин за прозорец, тогава вие, приятели, попаднете точно на правилното място.
Можете да използвате плъгина, който ще ви представя по-долу, за: Формуляр за контакт 7 в модален прозорец; всяка форма за контакт (обратна връзка) в модален (изскачащ) прозорец; видео в модален прозорец; снимки в изскачащ прозорец; поставяне на полезна информация с връзки; формуляр за абонамент за поща за нови статии в модален прозореци така нататък, и така нататък, всичко и не можете да го изброите. Приставката е много проста, без сложни настройки и почти не създава допълнително натоварване на / сайта.
Лесен модален плъгин - изскачащ/модален прозорец за WordPress
Modal Window Plugin за WordPress - Easy Modal Можете да инсталирате този плъгин по стандартния начин, през административния панел - Plugins - Добавете нов и в полето Search plugins въведете името Easy Modal, натиснете Enter. Трябва да е първият в списъка. Инсталирайте го и го активирайте както обикновено. След това можете да продължите към създаването на нов модален прозорец.
За да направите това, щракнете върху новата секция Easy Modal, която се появява, и изберете елемента Modals:
Easy Modal - създаване на нов модален прозорец След това в горната част на страницата щракнете върху бутона Добавяне на ново:
Добавете нов прозорец И тук всичко е просто:
Създайте изскачащ прозорец за видео В общите настройки (раздел Общи) дайте името на новия прозорец (няма да се показва, това е за вас, ако например създадете няколко модални прозореца); тип натоварване Зареждане на целия сайт (за целия сайт); заглавието на прозореца и накрая поставете кода, от който се нуждаете, в редактора (Текстов режим). В моя пример има вмъкнат видео код от YouTube.
Настройка на модален прозорец В параметрите можете да изберете размера на прозореца; дали да използвате фон или не; тип анимация за модален / изскачащ прозорец; местоположението на прозореца и можете също да коригирате прозореца (отметнете квадратчето и посочете отстъпа от горната част на екрана).
В раздела Примери ще намерите примери за код за показване на изскачащ прозорец в WordPress:
Модален изходен код в WordPress Тук можете да изберете обикновена текстова връзка, бутон или икона. Имайте предвид, че на всеки новосъздадения прозорец е присвоен клас eModal -. Първият създаден прозорец ще има клас eModal - 1, вторият eModal - 2 и т.н. Трябва само сами да замените числото след знака -. Този код може да бъде поставен във или навсякъде във вашата статия. Естествено, можете да напишете всеки текст в кода. Почти забравих, че след като създадете модалния прозорец от дясната страна на страницата, не забравяйте да щракнете върху бутона Публикуване.
Вмъкнах кода на модалния прозорец с видеото в страничната лента като бутон:
Бутон на страничната лента на блога Посетителят щраква върху него и се отваря прозорец с видео:
Модален прозорец с видео Надявам се, приятели и другари, общият принцип на работа с приставката Easy Modal ви е ясен. Ще добавя само, че можете след това или веднага да проектирате външния вид на модалния прозорец, като щракнете върху елемента Тема. За съжаление, безплатната версия на плъгина има само една тема за дизайн, но можете да я проектирате както искате, има достатъчно настройки. Когато персонализирате външния вид на модалния прозорец, можете да видите визуализация на външния вид вдясно:
Редактиране на тема - стилизиране на модален / изскачащ прозорец След всички настройки за външния вид на прозореца щракнете върху бутона Запиши вдясно. И накрая, дами и господа, ще ви покажа пример за показване на формуляр за контакт 7 в модален прозорец.
Създайте нов модал, както е показано по-горе и в текстов редактор просто поставете краткия код на формуляр за контакт 7 (ако имате инсталиран този плъгин, ако не):
Създайте формуляр за контакт 7 в изскачащ прозорец 
Бутон за писане на автор след съобщение Ако читателят иска да се свърже с вас, той ще щракне върху бутон и формата за контакт ще се отвори в модален прозорец:
Форма за връзка с автора в модален прозорец Нещо такова. Също така, всички създадени от вас изскачащи прозорци ще бъдат показани на страницата (елемент Modals), където, между другото, са посочени класовете за всеки модален прозорец:
Създадени модали в WordPress Наскоро за един сайт ме помолиха да направя формуляр за обратна връзка на WordPress в модален прозорец. Тоест, когато щракне върху връзката „пиши ни“, вместо да отиде на съответната страница, потребителят трябва да отвори нов изскачащ прозорец, където ще се намира функцията за изпращане на съобщение. Това е по-интерактивно решение, въпреки че не всеки го харесва. Аз лично предпочитам класическата реализация със страница за контакт, но формулярите в сайтовете са различни - така че ще бъде полезно да разгледаме решението на този проблем. В работата си използвах 2 плъгина: познат на много Contact Form 7 и модула Easy Modal, за да направя модален прозорец в WordPress.
Актуализация на 18.05.2017 г.: Съдейки по последните прегледи в хранилището, в някои случаи може да има проблеми с работата му. Ако това също ви засяга, опитайте ново решение от разработчиците, наречено Popup Maker. Може да се обмисли и друга алтернатива.
Няма да се спирам подробно на инсталирането и конфигурацията на Contact Form 7, цялата информация за него. В блога имаше и статия за това, което може да бъде полезно.
Нека да преминем направо към Easy Modal... Намери го. Разработчиците твърдят, че това е най-доброто решение за създаване на модали в сайта с различни интересни възможности за представяне на съдържание.
Повече от 10 хиляди изтегляния, оценка 4.6. Валидни версии са 3.4 - 4.0.8, въпреки че успешно го стартирах на WP 4.3.1. Въпреки факта, че приставката вече се е трансформирала в ново решение за създаване на изскачащи прозорци, все още можете да намерите обичайната Easy Modal версия 2.0.17 на wordpress.org и когато търсите плъгини в административната област. Използвайки неговия пример, ще ви разкажа за създаването на модален прозорец за обратна връзка в WordPress.
След инсталирането ще се появи раздел със същото име, където има няколко елемента. Ще ни трябва първият - Модални... Кликнете върху бутона Добавяне на ново там.
Това ще създаде нов модал за вашия WordPress сайт. В настройките на елемента ще има 4 раздела:
- Общи - общи параметри.
- Display Options - опции за показване.
- Close Options - настройки за затваряне на прозореца (с щракване или бутон Esc).
- Примери - примери за код за използване.
Общите настройки съдържат името на прозореца (не се показва на сайта), неговото заглавие, съдържание и вид на изтегляне. В блока за съдържание, след като преминете към HTML режим, добавете краткия код на формуляра си за обратна връзка в модалния прозорец.
Типът на натоварване има 2 опции:
- Заредете целия сайт (за целия сайт).
- На страница / публикация (за конкретни публикации и страници).
Много интересен вариант. Ако имате нужда от изскачащ прозорец, който ще се показва на всички страници на сайта (връзката се намира например в страничната лента), тогава изключете първата опция. Във втория случай съответният блок за настройки ще се появи на страниците / публикациите на сайта при редактиране:
Можете да активирате и изберете своя изскачащ прозорец за конкретна страница. Ако не поставите отметка в квадратчето, тогава елементът няма да бъде зареден на сайта.
Вторият раздел на параметрите на модула - Опции на дисплея.
Тук посочвате:
- размер на прозореца - автоматичен, среден, адаптивен, малък, голям и др .;
- фон - можете да използвате фона за формуляра или да го покажете без него;
- анимация на показване на изскачащ прозорец;
- позиция (местоположение) - горе в центъра, долу вдясно и т.н.; фиксирано или не;
- вдлъбнатина в горната част на екрана.
Примери за показване на изхода на модален прозорец в WordPress с помощта на приставката Easy Modal могат да бъдат намерени в последния раздел.
Трябва да поставите този код през джаджа в страничната лента или в текстов редактор. Не е по-различно от всеки друг HTML код, единственото нещо е, че той определя класа на конкретен модален прозорец (eModal-1). За втория елемент, който сте създали, класът ще бъде eModal-2 и т.н. За да не направите грешка при поставянето на кода, най-лесният начин е да го копирате от тази страница.
Редактиране на кожата на модален прозорец
В приставката Easy Modal, в допълнение към настройките за конкретен елемент, можете да дефинирате теми за изскачащи прозорци (Theme). В основната безплатна версия на модула има само един шаблон, но това е повече от достатъчно.
Този инструмент има 6 раздела:
- Общи - посочете името на темата;
- Overlay - фон (тук можете да изберете цвета и прозрачността на фона на фигурата);
- Контейнер - различни настройки за самия модал (запълване, рамка, сянка);
- Заглавие - параметри на заглавието на изскачащия прозорец (шрифт, сянка);
- Съдържание - шрифт и цвят на текстовете в блока;
- Close - елемент за затваряне на формата (текст и дизайн).
Както можете да видите, външният вид може да бъде персонализиран според вашите нужди. Получих този прост формуляр на WordPress в модален прозорец:
След като зададете всички настройки, не забравяйте да ги запишете (щракнете върху бутона Save).
Видео за добавяне на формуляр за контакт 7 в изскачащ прозорец на Easy Modal
Между другото, намерих видео за работа с приставката Easy Modal, демонстриращо процеса на създаване на модален прозорец за обратна връзка в WordPress. Там интерфейсът на модула е леко остарял (някои настройки изглеждат различно), но общата същност е уловена. Може би ще бъде по-лесно за някой да разбере този проблем с помощта на видео.
Общо за модалните прозорци за wordpress
Както бе споменато по-горе, сега плъгинът Easy Modal (съдейки по официалната страница) е конвертиран в Popup Maker. Успях да намеря модул със същото име в хранилището, но не съм го тествал. Разказвам ви за това, за да знаете какво да търсите, ако изведнъж Easy Modal в WordPress на следващите версии спре да работи.
И двете решения са безплатни, въпреки че имат платени добавки. Те ви позволяват да персонализирате насочването, да добавяте повече теми, да съдържате анализи и някои други функции. Ако имате нужда от по-усъвършенстван механизъм за модален прозорец, можете да разгледате по-отблизо тези разширения.
Що се отнася до задачата за отваряне на формата за обратна връзка на Contact Form 7 в изскачащ прозорец, има достатъчно основни Easy Modal възможности. Освен това, това решение може да се използва и за показване на други модални прозорци в WordPress – полезни съвети, допълнителна информация и т.н. Предвид наличието на редактор за вмъкване на HTML код, можете да показвате видеоклипове, формуляри и т.н. в изскачащия прозорец. Като цяло полезен плъгин. Ако имате въпроси относно това, пишете в коментарите.
Поздрави, приятели. Днешният урок ще помогне на вашия wordpress сайт да получи хубава и функционална форма за обратна връзка. Ще го направим с помощта на плъгина Contact Form 7. Едно време прекарах много време в търсене на нормална форма за контакт и не намерих достойна алтернатива на този плъгин.
Характеристики на плъгин
Нека ви напомня още веднъж, че ще работим с плъгин, така че ако имате нужда от обратна връзка без плъгин, по-добре посетете статията за, настройката там е малко по-сложна, но, от друга страна, опцията е повече универсален (подходящ за всеки сайт) и по-малко натоварване на сървъра.
Основното предимство на формата за контакт на Contact Form 7 е нейната простота на персонализиране, почти неограничена функционалност и автоматична настройка на дизайна за всякакви шаблони на WordPress. С негова помощ можете да направите не само форма за изпращане на съобщения от сайта. Плъгинът може да се използва за създаване на бутон за поръчка, обратно повикване или сложен въпросник с квадратчета за отметка и падащи списъци. Също така е възможно да се прикачат файлове за прехвърляне.
Накратко, плъгинът е мегафункционален.
Ако все още се притеснявате от въпроса "да направите или не да направите форма за контакт?" (можете да се справите с просто поставяне на информация за контакт на необходимите страници), тогава ще кажа недвусмислено - струва си да се направи.
Първо, по-удобно е да изпратите съобщение директно от сайта, отколкото да отворите програмата за електронна поща и да попълните всичко ръчно там. Спестяването на време няма да навреди на никого.
Второ, формата за контакт може да бъде персонализирана и това ще ви позволи да получавате писма със стандартен формуляр - ще бъде по-лесно да навигирате в тях. Например, можете да поставите стандартна заглавка за съобщението „Поръчка“ и всички имейли от страницата за поръчки ще идват с тази заглавка.
На трето място, използването на формуляр за контакт ви позволява да скриете имейл адреса си и по този начин да се отървете от евентуален спам, който неизбежно се появява, когато имейл акаунтът ви е свободно достъпен.
Четвърто, просто е стилен и модерен.
Инсталиране и конфигуриране на плъгина Contact form 7
Приставката е в общата база данни на WordPress, така че няма нужда да търсите нейните файлове някъде, да ги изтегляте за себе си и след това да ги качвате на хостинга. Всичко е улеснено - през административния панел на WordPress влезте в секцията за плъгини, въведете „Формуляр за контакт 7“ в полето за търсене и го инсталирайте. Ако никога не сте инсталирали плъгини, тогава подробни инструкции как да инсталирате плъгин.
Конфигуриране на приставката за контактна форма 7
Конфигурацията на плъгин се състои от два етапа.
Първият е персонализиране на конкретна форма. Може да има много различни форми, всяка от тях може да съдържа свой собствен набор от полета. С една дума, за всяка задача и всяка страница на сайта можете отделно да създадете форма за обратна връзка, wordpress позволява това - списъкът им ще се съхранява в базата данни на плъгините.
Вторият етап е вмъкване на формуляра в страниците на сайта. Всяка форма, която създаваме в приставката, ще има свой собствен уникален кратък код. За да го вмъкнете в страницата, ще бъде достатъчно да вмъкнете само него.
Така че да тръгваме.
Като начало, в лявото меню на административния панел намираме раздел Форма за контакт 7. Под него ще изскочи меню с два елемента – „Формуляри“ и „Добавяне на нов“.
Все още нямаме готови формуляри, затова отидете в секцията „Добавяне на нов“. Там ще се отвори страница, предлагаща да изберете език и езикът по подразбиране също е посочен там. Просто щракнете върху синия бутон Добавяне на ново.
Персонализирането на формуляра е разделено на отделни блокове. Ще ги разгледам по ред.
Блок с имена на формуляри
Първият блок е отговорен за името на вашия формуляр - поставете курсора върху надписа "Untitled" и въведете името, от което се нуждаете. Това име ще се показва само на вас в списъка с формуляри за контакт с приставки, така че направете го разбираемо за вас, за да не се объркате в цялото разнообразие в бъдеще.
Блок шаблон на формуляр
Първоначално този блок съдържа стандартна конфигурация на полета. Той съдържа името на подателя на писмото, неговия имейл адрес, темата на писмото, съдържанието на писмото и бутона за изпращане.
Задължителните полета са маркирани със звездички. Ако това поле е оставено празно, съобщението няма да бъде изпратено.
Оформлението на полетата може да се персонализира с помощта на обикновена html маркировка.
Що се отнася до настройката на самите полета, можете да изтриете ненужните и да добавите тези, които са ви необходими. Ако не искате темата на писмото да се въвежда ръчно, просто изтрийте съответния блок.
Добавянето на полета също е много лесно. От дясната страна има бутон за генериране на етикет, като щракнете върху него, ще видите списък с всички възможни полета, които този плъгин поддържа.
Изберете желания елемент и конфигурирайте неговите параметри. Плъгинът е на руски език, така че всички настройки са интуитивни.
Първото квадратче за отметка показва задължително или незадължително поле (добавя звездичка).
След като настроите полето, ще имате 2 къси кода:
- „Копирайте този код и го поставете в шаблона на формуляра вляво“ – този код се вмъква в кода на формуляра по същия начин като всички останали;
- „И поставете следния код в шаблона за букви по-долу“ – този код ще ни трябва, за да проектираме буквата в следващия блок.
По този начин към формуляра можете да добавите произволен брой полета, квадратчета за отметка, падащи списъци, елементи за прикачване на файлове и т.н.
Блок "Писмо"
Сега нашата задача е да персонализираме писмото, което ще получим. Писмото по никакъв начин не влияе върху работата на формата за обратна връзка, а служи само за предаване на информацията, която е въведена във формуляра.
Нашата задача е да включим цялата информация в писмото.
Като първи елемент посочваме имейл адреса, на който ще бъде изпратено съобщението (може да бъде всичко).
Вторият елемент посочва имейла, от който ще Ви бъде изпратено писмото. Тук не бих променил нищо, по подразбиране е посочена пощенската кутия на вашия блог и към нея се добавя етикет с името на лицето, изпращащо съобщението.
След това посочваме темата на писмото. Обикновено темата се взема от полето, което се попълва във формуляра. Но можете да премахнете този елемент от формуляра и да въведете конкретна тема в полето, която се задава автоматично във всяка буква. Направих това за формуляри за обратна връзка от страници за услуги и реклама. Съобщенията от там винаги идват с една и съща тема "Поръчване на услуги" или "Поръчка на реклама" - просто и ясно.
Полето с допълнителни заглавки съдържа маркера „Reply-To:“, така че когато отговаряте на писмо, получено от вашия блог, да изпращате съобщение до блога и на адреса, посочен от подателя на писмото в полето на формуляра. Не си струва да променяте това поле.
Полето „Шаблон на писмо“ отговаря за вътрешното съдържание на съобщението, което сте получили. По подразбиране съдържа информация за подателя, темата и текста на съобщението, въведен в полето.
В края е посочен сайтът, от който е изпратено писмото.
Ако сте въвели допълнителни полета във формуляра, които не са зададени по подразбиране, не забравяйте да добавите съответния етикет в шаблона на писмото. Той ви беше даден в блока „Шаблон на формуляр“, където генерирахте съответния таг (полето „И поставете следния код в шаблона на буквата по-долу“).
Всяка текстова информация в този блок (с изключение на таговете) може да бъде променена по ваш вкус. Можете също да добавяте всякакви описания и да променяте тагове на места, като ги поставяте в реда, който ви подхожда.
Блок "Буква 2"
Ако искате някой друг да получи изпратеното до вас съобщение, тогава можете да поставите отметка в този блок.
Този блок е конфигуриран подобно на предишния. По подразбиране всички полета в него се попълват, така че писмото да отиде до лицето, което е попълнило формуляра (очевидно, за да не забрави).
Можете да настроите изпращане на копие, например, до вашия мениджър или счетоводител.
Блокирайте „Известия при подаване на формуляр“
В този блок можете да персонализирате съобщенията, които потребителят вижда, след като щракне върху бутона за изпращане на съобщение. Ако искате да промените нещо - моля, оставих всичко както е.
Активиране на формуляра
След като попълните всички полета, върнете се в началото в блока „Име на формуляр“ и щракнете върху бутона „запазване“, разположен вдясно.
Плъгинът ще постави създадения от вас формуляр в списъка с валидни и ще му присвои специален код като този:
[contact - form - 7 id = "5464" title = "(! LANG: Проверете" ] !} |
Като поставите този код навсякъде в сайта си, вие ще получите готова форма за комуникация с вашите потенциални клиенти.
Анти-спам - Akismet и Captcha
Спамърите причиняват много проблеми на собствениците на сайтове и всяка нова форма, която ви позволява да напишете нещо, само увеличава броя на спам ботовете.
Ако оставите приставката за контактна форма в основния й вид, след известно време ще бъдете атакувани от много празни и безсмислени съобщения.
Има два начина да се отървете от спамърите:
- Поставете задължителна captcha (това може да стане с допълнителен плъгин - Really Simple CAPTCHA).
- Използвайте wordpress антиспам плъгин - Akismet.
Първата опция е неудобна, тъй като принуждава посетителите ръчно да въвеждат допълнителни знаци. Не е толкова трудно, но някои хора не го харесват.
Използването на плъгина Akismet е по-удобно с това, че самостоятелно анализира въведените данни (имена, имейл адреси, връзки) и въз основа на разработената база данни прави заключения за спам или неспам съобщение.
Освен това, akismet се намира в повечето сайтове на WordPress, за да предотврати спам коментари на статии. Това означава, че когато го използвате, няма да е необходимо да инсталирате допълнителни плъгини и да създавате ненужно натоварване на сайта.
Защита от спам с Akismet
1. Инсталирайте плъгина Akismet на вашия сайт и го активирайте -.
2. Добавете допълнителни данни към етикетите на формата за контакт:
- в полето с името на автора добавете akismet: автор
- в полето с имейла на подателя на писмото akismet: author_email
- в полето за адрес на сайта akismet: author_url
Трябва да изглежда така:
След като бъде запазен, формулярът за контакт трябва да блокира всички съобщения, изпратени от разпространители на спам. Можете да проверите работата на филтъра, като използвате специалното име на теста „viagra-test-123? - когато го въведете, трябва да се появи съобщение за грешка.
За да направите проверката по-малко строга, можете да проверите само част от полетата, например име и имейл, и да оставите адреса на сайта без отметка. В този случай вероятността от предаване на спам съобщения се увеличава, но е по-малко вероятно да загубите съобщенията, които искате.
Защита от спам с наистина проста CAPTCHA
Ако установите, че Akismet не ви подхожда (пропуска много спам или блокира необходимите съобщения), тогава можете да свържете captcha. За да направите това, инсталирайте приставката Really Simple CAPTCHA.
Отворете необходимия формуляр за контакт за редактиране
В списъка с тагове изберете Captcha. В настройките на етикета можете да изберете размера на картината със символите, в противен случай нищо не трябва да се променя. В долната част на прозореца за настройки ще се появят 2 етикета, единият е отговорен за показването на картина, вторият показва поле за въвеждане на данни от тази снимка.
За да започне да работи captcha, трябва да копирате и поставите двата маркера в левия прозорец на шаблона на формуляра и след това да запазите промените.
Поставяне на формуляр за обратна връзка в изскачащ прозорец
Формулярът за контакт не винаги трябва да се намира в определен раздел на сайта; понякога клиентът трябва да има достъп до него от всяка страница на ресурса.
В такива случаи не винаги е удобно да публикувате пълен формуляр. Много по-лесно е да поставите бутон, който привлича вниманието, на видно място. Натискането на този бутон вече трябва да доведе до отваряне на формуляра.
Така човек ще може да изпраща съобщения от сайта, без да напуска страницата, от която се нуждае.
Това става с помощта на друг плъгин - Easy FancyBox.
1. Инсталиране на плъгина
На първо място, ние инсталираме самия плъгин, той е в общата база данни за плъгини, следователно е достатъчно да въведете името му в търсенето на плъгини в административния панел на вашия блог. След като инсталирате приставката, в секцията "настройки" ще се появи разделът "медийни файлове".
В този раздел трябва да намерите списък с типове съдържание, които трябва да се показват в изскачащия прозорец. По подразбиране има само изображения, трябва да добавите вградено съдържание.
Това завършва настройката на приставката, продължете към настройката на бутона за обратна връзка.
2. Вмъкнете кода в сайта
По принцип можете да използвате обикновена текстова връзка, но бутонът с изображението ще изглежда по-добре.
Във вашия сайт, където искате да покажете бутона за формата за контакт (в горния, долния колонтитул или страничната лента), поставете следния код:
< 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 > < / div > |
В кода трябва да посочите адреса на изображението, което използвате като бутон за обратна връзка, и да редактирате краткия код на самия формуляр - напишете своя идентификатор и заглавие.
3. Премахнете ограничението за къси кодове в страничната лента
Този елемент е задължителен, ако искате да инсталирате бутон в страничната лента. Не винаги страничната лента в 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
Здравейте мой любим читател! В тази част ще ви разкажа как внедрих изскачащ формуляр за обратно повикване в сайт на WordPress.
Факт е, че формата за обратно повикване много често се използва от повечето уеб администратори именно за удобство на потребителите, така че да предприемат целевото действие възможно най-скоро - тоест да оставят заявка на сайта.
Често можете да ги видите на много търговски сайтове, които предоставят услуги или предлагат закупуване на какъвто и да е продукт. Всъщност онлайн магазините не са пълен цикъл, тоест когато няма кошница, а има нещо като предварителна поръчка през тази форма. Ето как могат да изглеждат:
Или под формата на бутон също в заглавката на сайта:
Някой може да ги използва в долния колонтитул на сайта, това също е разрешено. Изглежда така:
Така че приятели. Всичко това бяха примери, сега внедряваме на практика същата форма за обратно извикване за WordPress сайт. Ще го направя на сайта, който се занимава с подобряване на територията на Калининград.
На първо място, трябва да влезем и да отидем в секцията за плъгини, където ще добавим нов плъгин, наречен Contact Form 7. Това е най-популярното решение за създаване на прости и сложни блогове.
Не huhra muhra - 24 милиона изтегляния вече говорят много. Кликнете върху бутона за инсталиране и той ще се появи от лявата страна на административния панел.
Руският вече е избран по подразбиране, така че не се притеснявайте. Продължаваме нашия процес.
Сега трябва да добавим полетата, които ще участват. Те вече са инсталирани по подразбиране, по принцип можете да ги оставите, не ги изтривайте. Единственото, което бих добавил е задължително поле с телефонен номер.
За да направите това, трябва да щракнете върху бутона "генериране на етикет" от дясната страна на екрана и да изберете подходящия елемент. По този начин:
Щракнете върху елемента "Телефонен номер", поставете отметка в необходимото поле в квадратчето за отметка и след това копирайте получения етикет във формата вляво заедно с други имена и в шаблона за писмото.
От лявата страна ще имате запис като този:
Поставете полето за телефонен номер по-долу.
От лявата страна на шаблона за входящи писма ще имаме следния запис:
Не забравяйте да поставите отметка в квадратчето „Използване на HTML формат на имейла“.
В долната част ще ви трябва ред като този "Моля, попълнете задължителното поле", за да преведете на руски, нещо като това: "Моля, попълнете задължителното поле"
В полето за адресат добавете имейл, на който ще се изпращат приложения от сайта.
Глоба! Формата за обратно обаждане за сайта е почти готова. Сега трябва да го накараме да изскача, когато се щракне.
Създайте изскачащ формуляр
Нашата задача е да имаме изскачащ формуляр за обратно повикване, когато щракнем върху бутона за връзка. За да го създадем, се нуждаем от специален плъгин, базиран на езика Jquery, той се нарича Easy FancyBox. Предлага се и за инсталиране директно от админ зоната. Нека го добавим сега.
Просто кликнете върху "Инсталиране" и той ще започне да работи за вас. Има настройки за медийни файлове. Можем да ги разгледаме накратко.
Размери на изображенията - задайте свои собствени стойности за миниатюри, средни и големи изображения.
FancyBox ефект за следните медийни категории:
- Снимки
- Pdf документи
- Вградено съдържание
- SWF диаграми
- Youtube
- Vimeo
- Dailymotion
- IFframes
Посочете какво искате да използвате в бъдеще. Оставям го само за снимки.
Можете също да зададете непрозрачност и цвят. Нищо не питах, оставих всичко както е по подразбиране.
Прозорец
- Показване на иконата за затваряне на прозореца
- Цвят на горната част и цвят на границата
- Размери (по подразбиране 560x340x10)
- Поведение (закъснение в секунди, когато формата за обратно повикване се появи на сайта и скоростта на затваряне).
Съвместим с други браузъри и устройства
- Включете правила за IE 6 и 7 версии на браузъра (имат се предвид стилове)
- Активиране на правилото за стил за браузър IE 8
Не съм посочил нищо в тях, въпреки че можете да експериментирате със съвместимостта на формата за различни браузъри.
Изображения
- Автоматично откриване за разширения на изображения - jpeg, png, jpg. Можете да добавите вашите разширения
- Приложете към всички връзки към изображения
- Освен това просто не промених настройките, оставих всичко както е. Направи същото.
Страхотен! Сега ще спестим цялото това богатство от опции.
Сега слушаме много внимателно, гледаме и повтаряме след мен. Най-добре е да поставите формата за обратно обаждане на най-видимото място, тоест в самия горен край на заглавката на сайта, под телефоните и контактите. Ще направим така. Отидете на шаблона заглавка. phpи поставете този код:
Обратно обаждане
