Jak zbudować formularz Ajax w WordPress (w 4 prostych krokach)

Czy kiedykolwiek straciłeś potencjalnych klientów, ponieważ Twój formularz kontaktowy był powolny lub wymagał przeładowania całej strony? To historia, którą słyszymy zbyt często.

Widzieliśmy również na własne oczy, jak frustrujące mogą być tradycyjne formularze WordPress – zarówno dla właścicieli witryn, jak i ich odwiedzających. Formularze AJAX rozwiązują ten problem i mogą zrobić to samo dla Twojej witryny.

Te nowoczesne formularze natychmiast przesyłają dane bez odświeżania strony. Tworzą płynniejsze doświadczenie, które pomaga utrzymać zaangażowanie odwiedzających.

Wdrożyliśmy te formularze wiele razy na stronach klientów i partnerów, a wyniki mówią same za siebie.

W tym przewodniku podzielimy się prostym, 4-etapowym procesem tworzenia formularza AJAX w WordPress. Użyjemy przyjaznej dla początkujących wtyczki, która upraszcza pracę techniczną, dzięki czemu możesz łatwo podążać za wskazówkami. 🙌

Czym jest AJAX i dlaczego warto go używać do formularzy?

AJAX, skrót od Asynchronous JavaScript and XML, to technika programowania, która pozwala stronom internetowym wysyłać i odbierać dane bez przeładowania.

Jest powszechnie stosowany w formularzach internetowych, umożliwiając użytkownikom wysyłanie danych z formularza bez przeładowania strony. To sprawia, że wysyłanie formularzy jest łatwe i szybkie, co poprawia ogólne wrażenia użytkownika.

Aplikacje internetowe, takie jak Gmail i Facebook, również intensywnie wykorzystują tę technikę, aby utrzymać zaangażowanie użytkowników podczas płynnego działania zadań w tle.

Możesz używać AJAX do formularzy na swojej stronie WordPress, aby unikać niepotrzebnego przeładowywania stron i utrzymywać zaangażowanie użytkowników na stronie, którą aktualnie przeglądają.

Jest to szczególnie pomocne, jeśli prowadzisz sklep internetowy i chcesz zbierać opinie użytkowników bez przerywania procesu zakupów.

Możesz również użyć tej samej funkcjonalności AJAX dla innych niestandardowych formularzy na swojej stronie internetowej. Na przykład, niestandardowy formularz logowania użytkownika może pozwolić użytkownikom na logowanie się bez dodatkowego ładowania strony.

Mając to na uwadze, pokażemy Ci, jak stworzyć formularz kontaktowy WordPress AJAX w 4 prostych krokach.

Zacznijmy.

Krok 1: Zainstaluj wtyczkę WPForms

Pierwszym krokiem jest zainstalowanie i aktywowanie wtyczki do tworzenia formularzy.

W tym poradniku użyjemy wtyczki WPForms. Jest to najlepszy kreator formularzy kontaktowych WordPress na rynku i pozwala łatwo tworzyć formularze oparte na AJAX.

W WPBeginner używamy WPForms do wyświetlania naszego formularza kontaktowego, przeprowadzania corocznych ankiet czytelników i zarządzania prośbami o migrację usług, między innymi.

To było wspaniałe doświadczenie i możesz przeczytać naszą pełną recenzję WPForms, aby uzyskać więcej informacji.

Na początek możesz chcieć utworzyć konto WPForms. Na stronie internetowej WPForms kliknij przycisk „Get WPForms Now”, wybierz plan i dokończ proces zakupu.

Po wykonaniu tej czynności powinieneś mieć własny pulpit konta WPForms, gdzie możesz pobrać plik zip WPForms Pro i skopiować swój klucz licencyjny.

Następnie zainstalujmy i aktywujmy wtyczkę WPForms.

W obszarze administracyjnym WordPress możesz przejść do Wtyczki » Dodaj nową wtyczkę.

Następnie możesz użyć paska wyszukiwania, aby szybko znaleźć wtyczkę.

Gdy ją zobaczysz, kliknij „Zainstaluj teraz”, a następnie ponownie „Aktywuj”.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony WPForms » Ustawienia, aby wprowadzić swój klucz licencyjny.

Po weryfikacji będziesz mógł otrzymywać automatyczne aktualizacje i instalować dodatki. Teraz jesteś gotowy do tworzenia formularzy AJAX w WordPress.

Krok 2: Utwórz swój pierwszy formularz

Teraz przejdźmy do tworzenia swojego pierwszego formularza WordPress.

Po prostu odwiedź stronę WPForms » Dodaj nowy w obszarze administracyjnym WordPress.

Na następnym ekranie możesz najpierw nazwać swój nowy formularz, na przykład „Formularz kontaktowy”.

Następnie wybierzesz, w jaki sposób będziesz tworzyć swoje formularze.

Dzięki WPForms możesz tworzyć formularze od podstaw, używać kreatora formularzy AI lub wybierać spośród ponad 2000 gotowych szablonów.

Na przykład, jeśli chcesz użyć WPForms AI, wystarczy wprowadzić proste polecenie, a ono wygeneruje formularz dla Ciebie w obszarze podglądu.

W tym samouczku utworzymy formularz kontaktowy przy użyciu gotowego szablonu.

Najedźmy kursorem na pole „Prosty formularz kontaktowy” i kliknijmy „Użyj szablonu”. Pamiętaj, że możesz utworzyć dowolny inny potrzebny formularz; proces jest taki sam.

WPForms załaduje teraz Twój formularz z już dodanymi podstawowymi polami.

Stąd możesz po prostu kliknąć dowolne pole formularza, aby je edytować.

Możesz również dodawać nowe pola formularza z lewej kolumny, klikając je.

Nowe pole pojawi się na dole formularza, tuż nad przyciskiem Wyślij.

Następnie możesz przeciągać i upuszczać pola formularza, aby zmienić ich kolejność.

Po zakończeniu dostosowywania formularza możesz przejść do następnego kroku.

Krok 3: Włącz funkcję wysyłania formularzy AJAX

W zależności od ustawień, WPForms może domyślnie nie mieć włączonego przesyłania formularzy przez AJAX, więc sprawdźmy to teraz.

Aby to zrobić, po prostu przełącz się na zakładkę „Ustawienia” w kreatorze formularzy.

W zakładce ustawień „General” kliknij przełącznik obok opcji „Enable AJAX form submission”.

Teraz skonfigurujmy, co się stanie po przesłaniu formularza przez kogoś.

Najpierw możesz przejść do zakładki „Potwierdzenie” w ustawieniach. Tutaj informujesz użytkowników, że otrzymaliśmy ich zgłoszenie formularza.

WPForms pozwala na to na różne sposoby. Na przykład, możesz przekierować użytkowników na adres URL, wyświetlić im konkretną stronę lub po prostu wyświetlić komunikat na ekranie.

Chociaż możesz przekierować użytkowników na nową stronę, wymaga to ładowania strony. Aby uzyskać największe korzyści z AJAX, zalecamy po prostu wyświetlenie „Wiadomości”, aby użytkownik pozostał na tej samej stronie.

Musisz wybrać opcję wiadomości i edytować wiadomość potwierdzającą. Możesz użyć paska narzędzi formatowania lub dodać linki, aby poprowadzić użytkowników, co robić dalej.

Następnie skonfiguruj, jak chcesz być powiadamiany o nowych zgłoszeniach formularzy.

Przejdź do zakładki „Powiadomienia” w ustawieniach formularza i skonfiguruj ustawienia powiadomień e-mail.

Po zakończeniu możesz zapisać swój formularz i wyjść z kreatora formularzy.

Krok 4: Dodaj swój formularz z obsługą AJAX w WordPress

WPForms ułatwia dodawanie formularzy do Twojej witryny WordPress, czy to na poście, stronie, czy w widżecie paska bocznego.

Po prostu edytuj post lub stronę, na której chcesz dodać formularz, i wstaw blok WPForms do obszaru treści.

Następnie musisz wybrać utworzony formularz z menu rozwijanego w bloku WPForms.

WPForms natychmiast załaduje podgląd formularza na żywo w edytorze treści.

Możesz teraz zapisać lub opublikować swoją treść, a następnie odwiedzić swoją stronę internetową WordPress, aby przetestować funkcjonalność AJAX formularza.

Oto szybki przykład formularza AJAX w WordPress z naszej strony demonstracyjnej:

Możesz również dodać swój formularz do widżetu paska bocznego w WordPressie.

Aby to zrobić, przejdź do strony Wygląd » Widżety i dodaj blok widżetu WPForms do paska bocznego.

Wybierz wcześniej utworzony formularz i kliknij przycisk „Zaktualizuj”, aby zapisać ustawienia widżetu. Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć swój formularz zasilany przez AJAX w akcji.

Dodatkowa wskazówka: Eksportuj wpisy formularza do CSV lub Excel 📄

Gdy formularz AJAX będzie już działać, możesz chcieć prowadzić rejestr wszystkich zgłoszeń. Zwłaszcza jeśli zbierasz leady, zapytania klientów lub informacje o rejestracji.

Najprostszym sposobem jest wyeksportowanie wpisów jako plik CSV lub Excel.

Ułatwia to organizowanie i analizowanie odpowiedzi w narzędziach arkuszy kalkulacyjnych, takich jak Google Sheets lub Microsoft Excel. Jest to również przydatne do udostępniania raportów zespołowi lub tworzenia kopii zapasowych danych formularza poza WordPress.

Jeśli używasz WPForms, eksportowanie wpisów formularza jest proste: przejdź do WPForms » Wpisy, wybierz swój formularz, wybierz opcje eksportu i pobierz dane jako plik CSV lub Excel.

Chcesz to skonfigurować? Postępuj zgodnie z naszym pełnym przewodnikiem jak eksportować wpisy formularzy WordPress do CSV i Excel.

FAQ: Formularze AJAX w WordPress

Zanim zakończymy, oto kilka częstych pytań, które pojawiają się, gdy ludzie zaczynają używać formularzy AJAX w WordPress.

Jak używać AJAX do przesyłania formularzy?

Najprostszym sposobem jest użycie wtyczki do formularzy, która już obsługuje AJAX, takiej jak WPForms. Wystarczy włączyć opcję AJAX w ustawieniach formularza, a wtyczka zajmie się resztą.

Jeśli tworzysz niestandardowy formularz, musiałbyś użyć JavaScript i haków AJAX WordPress. Ale dla większości stron wtyczka jest znacznie prostsza i bardziej niezawodna.

Gdzie znaleźć ustawienie AJAX w WPForms?

W WPForms opcja AJAX znajduje się w ustawieniach formularza. Po otwarciu formularza w kreatorze przejdź do Ustawienia » Ogólne, a następnie poszukaj pola wyboru Włącz przesyłanie formularza AJAX. Po jego zaznaczeniu formularz zostanie przesłany bez przeładowywania strony.

Jakie są wady AJAX?

AJAX opiera się na JavaScript, więc może kolidować z agresywnymi wtyczkami do buforowania, które minimalizują lub odraczają skrypty. Jeśli Twój formularz się „kręci”, ale nie wysyła, spróbuj wyczyścić pamięć podręczną lub sprawdzić ustawienia wtyczki optymalizacyjnej.

Może również powodować problemy z kreatorami stron lub starszymi motywami, jeśli nie jest poprawnie skonfigurowany. Dlatego ważne jest, aby przetestować formularze po włączeniu AJAX.

Dodatkowe zasoby: Więcej przewodników po formularzach WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć formularz kontaktowy AJAX w WordPress dla Twojej witryny. Następnie możesz również zapoznać się z naszymi artykułami na temat:

• Jak utworzyć wyskakujący formularz kontaktowy w WordPress
• Jak używać formularzy kontaktowych do rozbudowy listy e-mailowej
• Jak tworzyć formularze kontaktowe z wieloma odbiorcami
• Jak utworzyć bezpieczny formularz kontaktowy w WordPress
• Jak blokować spam w formularzach kontaktowych w WordPress
• Jak śledzić i zmniejszać porzucenia formularzy
• Kompleksowy przewodnik po korzystaniu z formularzy WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.