Как да покажа изскачащ прозорец за потвърждение при излизане в Wordpress, Coma Web Development
Какво е?
Нека да видим как можете да добавите тази функционалност към формулярите на вашия сайт.
Показване на изскачащ прозорец за неизпратени формуляри в WordPress
В тази статия ще създадем наш собствен плъгин, но можете да изтеглите плъгина в края на материала и да го инсталирате на вашия сайт. Но ако искате да разберете по-добре същността на кода, не забравяйте да опитате да създадете свой собствен плъгин. Това може да стане както на вашия компютър, така и на тестов сайт.
Първо трябва да създадете нова папка на вашия компютър и да я наименувате потвърждение-напускане. В тази папка създайте друга папка и я наименувайте js.
Трябва да запишете този файл като confirm-leaving.js в папката js.
След като запазите и двата файла, структурата на вашите папки трябва да изглежда така:
Сега трябва да се свържете с вашия WordPress сайт чрез FTP клиент. Вижте нашето ръководство за това как да използвате FTP за качване на WordPress файлове.
След като се свържете, трябва да качите папката за потвърждение на напускане в папката /wp-contents/plugins/ на вашия сайт.
След това трябва да влезете в административния панел на WordPress и да отидете на страницата с плъгини. Намерете приставката, наречена „Потвърждаване на напускане“ в списъка с инсталирани приставки и щракнете върху „активиране“ под името.
Добавяне на сигнали към други форми в WordPress
Можете да използвате този код за други форми на вашия WordPress сайт. Сега ще ви покажем пример за използване на скрипта във формуляр за контакт.
В този пример ще използваме приставката WPForms, за да създадем формуляр за контакт.Инструкциите ще бъдат същите, ако използвате различен плъгин за формуляр за контакт на вашия сайт.
Отидете на страницата, където сте добавили формата за контакт. Задръжте курсора на мишката над първото поле във формуляра за контакт, щракнете с десния бутон и изберете Проверка от падащото меню.
Намерете реда, който започва с етикета. В този таг ще намерите атрибута ID.
В този пример нашият ID на формуляр е wpforms-form-170. Трябва да копирате този атрибут.
Сега отворете файла confirm-leaving.js и добавете атрибута ID след #commentform.
Уверете се, че разделяте #commentform и ID на вашия формуляр със запетая. Трябва също да добавите знака # като префикс към ID атрибута на вашия формуляр.
В резултат на това вашият код ще изглежда така:
Запазете всички промени и качете този файл на уебсайта си.
Вече можете да въведете произволен текст във всяко поле на формуляра за контакт и да се опитате да напуснете страницата, без да изпращате данни. Ще се появи изскачащ прозорец, който ви предупреждава, че имате незапазени данни.