Jak korzystać z webhooków z formularzami WordPress

Czy chcesz zintegrować swoje formularze WordPress z różnymi aplikacjami i usługami internetowymi?

Jeśli potrzebujesz prostego sposobu przesyłania danych w aplikacji internetowej bezpośrednio z formularza WordPress, webhooki są idealnym rozwiązaniem. Dzięki formularzowi webhook nie musisz korzystać z zewnętrznego łącznika, takiego jak Zapier.

W tym poście pokażemy, jak korzystać z webhooków w formularzach WordPress, aby łatwo wysyłać dane w czasie rzeczywistym do ulubionych aplikacji i usług.

Ale najpierw, jeśli jesteś początkujący, omówimy, czym są webhooki i dlaczego są ważne. Pamiętaj, że metoda, której użyjemy dzisiaj, nie wymaga żadnych umiejętności kodowania.

Czym są webhooki?

Webhooki pozwalają dwóm aplikacjom internetowym komunikować się ze sobą. Na przykład, jeśli ktoś prześle formularz zamówienia zakupu w Twojej witrynie, możesz wysłać te dane do swojego kanału Slack, aby zaktualizować zespół produktu, że zamówienie zostało złożone. Możesz to zrobić również wtedy, gdy zdobędziesz nowego potencjalnego klienta lub subskrybenta.

Pod względem technicznym elementy webhook to wywołania zwrotne HTTP zdefiniowane przez użytkownika, które są wyzwalane przez zdarzenie w systemie źródłowym i wysyłane do systemu docelowego.

Oznacza to, że gdy w Twojej witrynie ma miejsce zdarzenie lub wyzwalacz, automatyczne wiadomości są wysyłane do połączonej usługi. Wyzwalaczem może być cokolwiek, np. komentarze na blogu, rejestracje użytkowników zakupu produktów i przesyłanie formularzy.

Jeśli zastanawiasz się, dlaczego warto korzystać z webhooków, oto kilka korzyści:

• Automatycznie przesyłaj informacje między dwiema usługami/aplikacjami
• Zautomatyzuj zadania i skróć czas administratora
• Obniż koszty korzystania z usług łączników, takich jak Zapier i Hubspot, do przetwarzania danych w aplikacjach.

Webhooki są niezwykle przydatne dla programistów i doświadczonych technicznie użytkowników WordPressa.

Od tego zacznijmy nasz przewodnik krok po kroku, jak utworzyć formularz webhooka w WordPress.

Tworzenie formularza webhooka w WordPress [Łatwa metoda]

Istnieje wiele sposobów wykorzystania webhooków do wysyłania zgłoszeń formularzy WordPress do innych aplikacji internetowych.

W tym samouczku użyjemy WPForms, ponieważ oferuje dodatek Webhooks, który jest łatwy w użyciu dla każdego, w tym dla początkujących. Nie ma absolutnie żadnego kodowania.

WPForms to najlepsza wtyczka do tworzenia formularzy dla witryn WordPress. Musisz wiedzieć, że oferuje mnóstwo gotowych szablonów i gotowych do użycia pól formularzy, które pozwalają tworzyć wszystkie rodzaje formularzy WordPress. Obejmuje to zamawianie produktów, rejestrację, rezerwację spotkań, proste formularze kontaktowe i nie tylko.

WPForms jest wyposażony w narzędzie do tworzenia formularzy typu „przeciągnij i upuść”, dzięki któremu dostosowywanie formularzy to bułka z masłem. Ma mnóstwo dodatków i integracji, których możesz używać do łączenia się z aplikacjami do obsługi poczty e-mail, płatności i marketingu.

Dzięki dodatkowi Webhooks możesz łatwo połączyć swój WordPress z dowolną usługą lub aplikacją. Wystarczy kilka kliknięć, aby włączyć tę funkcję.

Ponadto WPForms umożliwia używanie reguł warunkowych do wyzwalania akcji elementu webhook na podstawie odpowiedzi użytkownika na formularz. Zatem tylko wtedy, gdy wartość pola zostanie spełniona, webhook zostanie uruchomiony. Daje to większą kontrolę nad tym, jakie dane chcesz wysłać i do której aplikacji.

Możesz łączyć się z mnóstwem aplikacji i usług. W tym samouczku pokażemy, jak połączyć się ze Slackiem. Pamiętaj jednak, że możesz wykonać te same czynności, aby połączyć się również z innymi aplikacjami i punktami końcowymi.

Krok 1: Utwórz nową aplikację Slack

Łącząc formularz webhooka ze Slackiem, możesz automatycznie wysyłać wiadomości i informacje ze swojej witryny do swoich kanałów Slack. Możesz zaktualizować członków zespołu lub działy, gdy dana osoba prześle formularz, porzuci formularz i nie tylko.

Teraz, aby wysyłać dane z WordPressa do innej usługi za pomocą webhooków, musisz utworzyć pomost między tymi dwiema aplikacjami. Aby połączyć się ze Slackiem, musisz utworzyć aplikację Slack (most).

Jeśli jesteś w tym nowy, nie martw się, jest to dość łatwe, a my przeprowadzimy Cię przez to krok po kroku. Najpierw musisz otworzyć stronę API Slack i kliknąć przycisk Utwórz aplikację .

W następnym wyskakującym okienku możesz wybrać, w jaki sposób chcesz utworzyć aplikację za pomocą Slacka. Istnieją dwie opcje:

• Od zera
• Z manifestu aplikacji.

Tutaj stworzymy od podstaw aplikację Slack. Brzmi jak dużo pracy, ale tak naprawdę zajmuje tylko kilka kliknięć.

Następnie zobaczysz wyskakujące okienko, w którym możesz dodać nazwę aplikacji i wybrać swoje miejsce pracy w Slack. Gdy skończysz, kliknij Utwórz aplikację .

Spowoduje to otwarcie strony Informacje podstawowe. Tutaj musisz kliknąć opcję Incoming Webhooks .

Na następnym ekranie włącz ustawienia Aktywuj przychodzące webhooki . Pozwala to na publikowanie wiadomości na Slacku z usług zewnętrznych.

Po włączeniu zobaczysz na stronie adresy URL webhooków dla sekcji Twój obszar roboczy .

Teraz musisz utworzyć nowy webhook, aby uzyskać informacje z formularza WordPress. Kliknij więc przycisk Dodaj nowy webhook do obszaru roboczego .

Następnie możesz zobaczyć wyskakujące okienko, w którym możesz wybrać kanał Slack, aby opublikować swoje zgłoszenia.

Po wybraniu kanału na Slack kliknij Zezwól .

Teraz będziesz mógł zobaczyć nowy adres URL webhooka dla swojej aplikacji Slack.

Wszystko, co musisz teraz zrobić, to skopiować adres URL webhooka. Będziesz go potrzebować kilka kroków później.

Krok 2: Zainstaluj i aktywuj WPForms

Po uzyskaniu adresu URL webhooka możesz dodać go do formularza WordPress.

Aby rozpocząć, załóż konto w witrynie WPForms.

Dostępna jest bezpłatna wersja wtyczki, ale będziesz potrzebować wersji premium, aby uzyskać dostęp do zaawansowanych funkcji formularzy, takich jak webhooki. WPForms jest objęty gwarancją zwrotu pieniędzy bez ryzyka w 100%, dzięki czemu możesz wypróbować usługę przed podjęciem zobowiązania.

Po zarejestrowaniu się znajdziesz plik do pobrania wtyczki i klucz licencyjny w zakładce Pobieranie .

Teraz przejdź do pulpitu WordPress i zainstaluj wtyczkę. Jeśli chcesz uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po zainstalowaniu i aktywacji WPForms w swojej witrynie musisz wprowadzić klucz licencyjny, aby korzystać ze wszystkich funkcji i dodatków premium.

Zanim zaczniesz tworzyć swój formularz, musisz zainstalować dodatek Webhooks.

W tym celu przejdź do zakładki WPForms »Dodatki , a znajdziesz mnóstwo dodatków, które pomogą Ci rozszerzyć funkcjonalność formularzy WordPress. Tutaj kliknij przycisk Zainstaluj dodatek dla dodatku Webhooks.

Teraz jesteś gotowy, aby utworzyć formularz webhooka w WordPress.

Krok 3: Utwórz formularz webhooka

Aby utworzyć nowy formularz, przejdź do strony WPForms »Dodaj nowy , gdzie zobaczysz listę gotowych szablonów. Te szablony są wstępnie wypełnione polami, które będą potrzebne w zależności od celu formularza. Biblioteka szablonów zawiera:

• Prosty formularz kontaktowy
• Poproś o wycenę
• Formularz darowizny
• Formularz fakturowania/zamówienia
• Formularz ankiety
• Formularz sugestii

…i więcej! W tym samouczku wybierzemy szablon formularza sugestii , ponieważ w poprzednim kroku stworzyliśmy aplikację Slack do zbierania opinii użytkowników. Możesz wybrać taki, który najlepiej odpowiada Twoim potrzebom.

Wszystko, co musisz zrobić, to nadać formularzowi nazwę u góry strony. Następnie wybierz dowolny szablon w zależności od potrzeb lub możesz wybrać pusty szablon, aby zacząć od zera.

Po wybraniu szablonu w następnym oknie zobaczysz narzędzie do tworzenia formularzy typu „przeciągnij i upuść”.

Jeśli chcesz dodać więcej pól, po prostu przeciągnij i upuść nowe pola z lewego menu do podglądu formularza.

WPForms oferuje wiele opcji dostosowywania, dzięki czemu można kliknąć dowolne pole, aby je edytować. Pozwala zmienić nazwy pól, opis i bardziej zaawansowane ustawienia.

Po zakończeniu dodawania pól formularza kliknij przycisk Zapisz .

W następnym kroku dowiemy się, jak skonfigurować webhooki dla tego formularza i podłączyć aplikację Slack.

Krok 4: Skonfiguruj webhooka dla Slacka

Aby webhooki działały na Twoim formularzu, musisz przejść do zakładki Ustawienia » Webhooki i kliknąć opcję Włącz Webhooki .

Zostanie utworzony nowy webhook, który możesz edytować, aby skonfigurować integrację ze Slackiem.

Najpierw możesz zmienić nazwę webhooka. Pomoże Ci to później to rozpoznać.

Czy pamiętasz adres URL webhooka skopiowany z aplikacji Slack w kroku 1? Musisz go wkleić tutaj, w opcji Żądaj adresu URL . Umożliwi to połączenie formularza WordPress z innymi usługami, takimi jak Slack.

Następnie zobaczysz różne ustawienia konfiguracji webhooka. Omówimy tutaj, co każdy z nich robi i co dodać do tych pól.

• Metoda żądania: pozwala wybrać rodzaj połączenia, które chcesz utworzyć z połączoną usługą. Istnieje wiele rodzajów metod HTTP, których możesz użyć w zależności od typu połączenia, które chcesz utworzyć:
  • GET : Spowoduje to pobranie danych z przesłanego formularza i przesłanie szczegółów do połączonej aplikacji.
  • POST : spowoduje to przesłanie danych do usługi dodatkowej. Użyjemy żądania HTTP POST, ponieważ musimy opublikować dane z Twojego formularza na Twoim kanale Slack.
  • PUT : pozwala aktualizować dane po uruchomieniu webhooka.
  • PATCH : pozwala zastąpić dane po uruchomieniu webhooka.
  • USUŃ : umożliwia usuwanie informacji po uruchomieniu tego konkretnego webhooka.
• Żądaj formatu: Ta opcja pokaże serwerowi, jaki rodzaj treści wysyłasz. Jest to trochę techniczne, ale w zasadzie dostępne są dwa różne typy formatów żądań:
  • JSON : Formatuje dane w formacie application/json i ustawia typ zawartości na charset=utf-8 .
  • FORM : Formatuje dane w formacie application/x-www-form-urlencoded i ustawia typ zawartości na charset=utf-8 .
• Sekret: jeśli jesteś programistą i chcesz zintegrować własny interfejs API w celu uwierzytelniania, możesz użyć tajnego klucza. Ale w naszym samouczku nie potrzebujemy tej opcji, więc zostawimy to puste.
• Nagłówki żądań: Wysyła określone wartości, gdy żądanie jest wysyłane do aplikacji. Po uruchomieniu webhooka pola zostaną wygenerowane automatycznie. To pole również zostawimy puste.
• Treść żądania: w przypadku tej opcji musisz ustawić typ wiadomości i wybrać pole do publikowania wiadomości. Ponieważ użytkownicy będą wprowadzać sugestie w formacie tekstowym, ustawimy klucz na tekst . Następnie wybierz pole, w którym użytkownicy będą wpisywać swoją wiadomość.

Gdy skończysz z ustawieniami żądania webhooka, kliknij przycisk Zapisz .

Krok 5: Skonfiguruj powiadomienia formularza

Następnie możesz skonfigurować powiadomienia e-mail dla formularza WordPress. Dzięki temu możesz wysyłać automatyczne wiadomości e-mail do administratora, dowolnego członka zespołu i klienta/użytkownika po przesłaniu formularza.

Aby skonfigurować te przepływy pracy e-mail, przejdź do zakładki Ustawienia » Powiadomienia , zaznacz opcję Włącz powiadomienia , aby zobaczyć ustawienia domyślne.

Tutaj możesz dostosować ustawienia powiadomień i dodać adresy e-mail odbiorców.

WPForms umożliwia również wysyłanie automatycznych powiadomień e-mail do użytkowników formularza. Aby to ustawić, kliknij przycisk Dodaj nowe powiadomienie w prawym górnym rogu strony.

Następnie musisz użyć opcji Pokaż tagi inteligentne i wybrać E-mail . Za pomocą tego tagu WPForms automatycznie wykryje adres e-mail wprowadzony przez użytkownika w formularzu.

W sekcji Wiadomość e-mail możesz dodać własną wiadomość i użyć tagu inteligentnego {all_fields}, aby wyświetlić wszystkie dane formularza wprowadzone przez użytkownika.

Nie zapomnij zapisać ustawień na końcu.

Krok 6: Dostosuj wiadomość potwierdzającą

WPForms umożliwia również wyświetlanie komunikatów potwierdzających w interfejsie witryny po pomyślnym przesłaniu formularza przez użytkowników.

W zakładce Ustawienia » Potwierdzenia zobaczysz ustawienia potwierdzeń. Domyślnie typ potwierdzenia jest ustawiony na „Wiadomość”, ale w tym menu dostępne są 3 opcje:

• Wiadomość: Dodaj wiadomość potwierdzającą, która jest wyświetlana na interfejsie użytkownika po złożeniu zamówienia przez klienta.
• Pokaż stronę: przekieruj użytkowników na dowolną stronę w swojej witrynie.
• Przejdź do adresu URL (przekierowanie): kieruj użytkowników do określonego adresu URL.

Aby dowiedzieć się więcej na ten temat, zapoznaj się z naszym przewodnikiem, jak skonfigurować powiadomienia i potwierdzenia formularzy we właściwy sposób.

Gdy skończysz z ustawieniami, kliknij przycisk Zapisz .

Musimy również wspomnieć tutaj, że WPForms umożliwia integrację z preferowaną usługą e-mail, taką jak Constant Contact i Mailchimp.

Wystarczy uzyskać do niego dostęp w zakładce Marketing i postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć swoje konto e-mail. W większości przypadków musisz podać klucz API, który możesz wygenerować za pomocą dostawcy poczty e-mail.

Jeśli chcesz połączyć formularze online z bramką płatności, możesz dowiedzieć się, jak to zrobić tutaj: Jak utworzyć formularz zamówienia online

Wszystko, co musisz teraz zrobić, to opublikować formularz webhooka w witrynie WordPress.

Krok 7: Opublikuj formularz webhooków w swojej witrynie

Aby rozpocząć wysyłanie formularzy do usług zewnętrznych, musisz najpierw opublikować formularz webhooka. Dzięki niestandardowemu blokowi WPForms możesz dodawać formularze do dowolnej strony lub publikować w witrynie WordPress.

W tym samouczku dodamy formularz do nowej strony w naszej witrynie. Przejdź więc do zakładki Strony »Dodaj nowy w panelu administracyjnym WP. Na ekranie edytora bloków dodaj nowy blok i wyszukaj „WPForms”.

Po dodaniu bloku WPForms do swojej strony zobaczysz menu rozwijane, które pozwala wybrać właśnie utworzony formularz webhooka.

Następnie możesz opublikować swoją stronę w swojej witrynie.

Jeśli korzystasz z klasycznego edytora WordPress, możesz dodać formularz za pomocą przycisku Dodaj formularz w edytorze.

Możesz nawet wstawić formularz webhook w obszarze gotowym na widżety, takim jak stopka lub pasek boczny. Aby to zrobić, przejdź do zakładki Wygląd »Widżety i przeciągnij i upuść widżet WPForms do menu paska bocznego lub stopki po prawej stronie.

Następnie możesz wybrać utworzony formularz z menu rozwijanego i zapisać zmiany.

Teraz Twój formularz webhooków został opublikowany w Twojej witrynie. Gdy użytkownicy wypełnią i prześlą formularz, otrzymasz powiadomienia o Slack ze swojej witryny.

W ten sposób możesz używać WPForms do łączenia się z różnymi aplikacjami za pomocą adresów URL webhooka. Masz pełną kontrolę nad danymi, które chcesz pobrać i wysłać do innych aplikacji.

To wszystko! Mamy nadzieję, że ten post pomógł Ci nauczyć się korzystać z webhooków w formularzach WordPress. Dzięki WPForms możesz utworzyć formularz webhooka i z łatwością połączyć się z usługą innej firmy.

Możesz go również użyć do tworzenia innych profesjonalnych formularzy WordPress, takich jak formularze zamówień, formularze rezerwacji, formularze rejestracyjne i inne.

Aby wykonać kolejne kroki, możesz zapoznać się z tymi zasobami:

• Jak dodać opcję „Zapisz i kontynuuj później” do formularzy WordPress?
• Jak zmniejszyć porzucanie formularzy i zwiększyć konwersje
• Najlepsze narzędzia do przechwytywania wiadomości e-mail i kreatory formularzy dla WordPress

Te posty pomogą Ci dodać funkcję zapisywania i wznawiania później w formularzach WordPress i zmniejszać współczynniki porzucania formularzy. Ten ostatni pomoże Ci rozwinąć Twoją listę e-mail marketingową.