Как да създадете WordPress AJAX формуляр (в 4 лесни стъпки)

Искате ли да създадете AJAX формуляр за контакт в WordPress?

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

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

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

В тази статия ще ви покажем как лесно да изградите WordPress AJAX формуляр за контакт с инструкции стъпка по стъпка.

Какво е Ajax и защо да го използвате за вашите формуляри?

Ajax, съкратено от Asynchronous Javascript и XML, е техника за програмиране на JavaScript, която позволява на разработчиците да прехвърлят данни без презареждане на страница.

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

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

Можете също да използвате Ajax за вашите WordPress формуляри. Това ще спести потребителите от ненужно презареждане на страницата и ще ги поддържа ангажирани със страницата, която преглеждат в момента.

Като се има предвид това, нека да разгледаме как лесно да създадете формуляр за контакт в WordPress Ajax в 4 прости стъпки.

1. Инсталирайте WPForms Plugin

Първото нещо, което трябва да направите, е да инсталирате и активирате приставката WPForms. За повече подробности вижте нашето ръководство стъпка по стъпка как да инсталирате плъгин за WordPress.

WPForms е най-добрият плъгин за създаване на формуляри на WordPress на пазара. Той ви позволява лесно да създавате и захранвани от Ajax формуляри.

При активиране трябва да посетите WPForms » Настройки страница, за да въведете лицензния си ключ.

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

Вече сте готови да правите красиви ajax форми в WordPress.

2. Създайте своя първи формуляр

Нека да продължим и да създадем първата ви форма.

Просто посетете WPForms » Добавяне на ново страница в административната област на WordPress. Ще бъдете помолени да предоставите заглавие на формуляра си и да изберете шаблон като отправна точка.

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

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

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

Можете лесно да плъзнете и пуснете полетата на формуляра, за да ги преместите нагоре и надолу във формуляра.

След като приключите с редактирането на формуляра, можете да преминете към следващата стъпка.

3. Включете функцията за подаване на Ajax формуляр

WPForms не позволява изпращането на Ajax формуляр по подразбиране. Ще трябва ръчно да го активирате за вашия формуляр.

Просто превключете към раздела Настройки в конструктора на формуляри и поставете отметка в квадратчето до опцията „Активиране на изпращане на AJAX формуляр“.

Поставянето на отметка в квадратчето ще включи функционалността на Ajax за този формуляр.

Сега нека настроим какво ще се случи след подаване на формуляра.

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

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

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

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

След това можете да настроите как искате да бъдете уведомени за подаване на формуляр.

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

След като сте готови, можете да запазите формуляра си и да излезете от конструктора на формуляри.

4. Добавете вашия формуляр с активиран Ajax в WordPress

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

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

След това трябва да изберете току-що създадения формуляр от настройките на блока. WPForms незабавно ще зареди визуализация на формата на живо в редактора на съдържанието.

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

Можете също да добавите своя формуляр към джаджа на страничната лента в WordPress. За да направите това, отидете на Външен вид » Widgets страница и добавете приспособлението WPForms към странична лента.

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

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

Ако ви е харесала тази статия, моля, абонирайте се за нашия YouTube канал за видео уроци за WordPress. Можете също да ни намерите на Twitter и Facebook.