Czy kiedykolwiek tracisz potencjalnych klientów, ponieważ Twój formularz kontaktowy był powolny i nieporęczny? To historia, którą słyszymy zbyt często. My również doświadczyliśmy na własnej skórze, jak frustrujące mogą być tradycyjne formularze WordPress – zarówno dla nas, jak i dla naszych czytelników.
Formularze AJAX rozwiązały ten problem i mogą zrobić to samo dla Ciebie.
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.
Stosowaliśmy te formularze wielokrotnie na stronach internetowych naszych klientów i partnerów, a wyniki mówią same za siebie.
W tym przewodniku podzielimy się naszym sprawdzonym 4-etapowym procesem tworzenia formularza AJAX w WordPress. Użyjemy przyjaznego dla początkujących wtyczki, która upraszcza aspekty techniczne, dzięki czemu możesz łatwo podążać. 🙌
Czym jest AJAX i dlaczego warto go używać do formularzy?
AJAX, skrót od Asynchronous JavaScript and XML, to technika programowania w języku JavaScript, która pozwala programistom na przesyłanie danych bez przeładowywania strony.
Jest najczęściej używany w formularzach internetowych, umożliwiając użytkownikom przesyłanie danych z formularza bez przeładowywania strony. To sprawia, że przesyłanie formularzy jest łatwe i szybkie, co poprawia ogólne doświadczenie użytkownika.
Ponadto aplikacje internetowe, takie jak Gmail i Facebook, szeroko wykorzystują tę technikę, aby utrzymać zaangażowanie użytkowników, jednocześnie zapewniając płynne działanie wszystkiego w tle.
Możesz używać AJAX dla formularzy na swojej stronie WordPress. Oszczędzi to użytkownikom niepotrzebnego przeładowywania strony i utrzyma ich zaangażowanych na stronie, którą aktualnie przeglądają.
Jest to przydatne, gdy prowadzisz sklep internetowy i chcesz zbierać opinie użytkowników, nie odwracając ich uwagi.
Tę samą funkcjonalność AJAX można wykorzystać do innych niestandardowych formularzy na Twojej stronie internetowej. Na przykład niestandardowy formularz logowania użytkownika pozwoli użytkownikom logować się bez dodatkowego przeładowania strony.
Niemniej jednak pokażemy Ci, jak łatwo utworzyć formularz kontaktowy AJAX w WordPress w 4 prostych krokach.
- Krok 1: Zainstaluj wtyczkę WPForms
- Krok 2: Utwórz swój pierwszy formularz
- Krok 3: Włącz funkcję wysyłania formularzy AJAX
- Krok 4: Dodaj swój formularz z obsługą AJAX w WordPress
- Dodatkowa wskazówka: Eksportuj wpisy formularza do CSV lub Excel 📄
- Dodatkowe zasoby: Więcej przewodników po formularzach WordPress
Zacznijmy.
Krok 1: Zainstaluj wtyczkę WPForms
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować kreator formularzy.
W tym samouczku użyjemy wtyczki WPForms. Jest to najlepszy kreator formularzy kontaktowych WordPress na rynku i pozwala łatwo tworzyć formularze z obsługą Ajax.
W WPBeginner używamy WPForms do wyświetlania naszego formularza kontaktowego, przeprowadzania corocznych ankiet czytelników i zarządzania prośbami o usługi migracyjne, między innymi.
To było wspaniałe doświadczenie i możesz zobaczyć naszą pełną recenzję WPForms, aby uzyskać więcej informacji o tej wtyczce!
Zainstalujmy i aktywujmy zatem WPForms. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.
📝 Uwaga: Aby utworzyć formularz AJAX, potrzebujesz wersji Pro wtyczki. Ale istnieje darmowa wersja WPForms, którą możesz sprawdzić, jeśli chcesz zapoznać się z jej kreatorem metodą przeciągnij i upuść oraz podstawowymi funkcjami formularzy przed aktualizacją.
Po aktywacji musisz odwiedzić stronę WPForms » Ustawienia, aby wprowadzić swój klucz licencyjny.
Po wprowadzeniu klucza licencyjnego będziesz mógł otrzymywać automatyczne aktualizacje i instalować dodatki.
Jesteś teraz w pełni przygotowany do tworzenia pięknych formularzy AJAX w WordPress.
Krok 2: Utwórz swój pierwszy formularz
Stwórzmy Twój pierwszy formularz 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, tutaj nazwaliśmy nasz formularz „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, powiedzmy, że chcesz użyć WPForms AI. Wtedy wystarczy podać mu proste polecenie, a ono wygeneruje formularz dla Ciebie w obszarze podglądu.
W tym samouczku jednak stworzymy formularz kontaktowy. Najedź kursorem na pole „Simple Contact Form” i kliknij „Use Template”.
Pamiętaj, że możesz utworzyć dowolny inny typ formularza, którego potrzebujesz; proces jest w zasadzie taki sam.
WPForms załaduje teraz Twój formularz z dodanymi już podstawowymi polami.
Stąd możesz po prostu kliknąć na dowolne pole formularza, aby je edytować.
Możesz również dodać nowe pole formularza z lewej kolumny, po prostu klikając na nie.
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
WPForms domyślnie nie umożliwia przesyłania formularzy za pomocą AJAX, więc będziesz musiał ręcznie włączyć tę opcję dla swojego formularza.
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 dzieje się po przesłaniu formularza.
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.
Ponieważ włączyliśmy funkcjonalność AJAX dla formularza, przekierowanie użytkowników na inną stronę pokrzyżowałoby cel tworzenia formularza AJAX.
Musisz wybrać opcję wiadomości i edytować komunikat potwierdzający. Możesz swobodnie używać paska narzędzi formatowania w edytorze lub dodać jeden lub dwa linki, aby poinformować użytkowników, dokąd mają przejść dalej.
Następnie możesz skonfigurować, w jaki sposób chcesz być powiadamiany o przesłaniu formularza.
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 sprawia, że niezwykle łatwo jest dodać formularze do swojej witryny WordPress, czy to na poście, stronie, czy w widżetach 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ć formularz, który właśnie utworzyłeś, z ustawień bloku.
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 formularz, który utworzyłeś wcześniej, i kliknij przycisk „Zaktualizuj”, aby zapisać ustawienia widżetu. Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć swój formularz oparty na 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 na zrobienie tego jest wyeksportowanie go jako pliku 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 z formularza jest łatwe. Po prostu przejdź do WPForms » Entries, wybierz swój formularz, wybierz opcje eksportu i pobierz swoje 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.
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.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.