Jak utworzyć własny formularz rejestracji użytkownika w WordPress?

Czy chcesz utworzyć własny formularz rejestracji użytkownika front-end w WordPress?

Domyślny formularz rejestracji użytkownika WordPress pokazuje branding WordPress i nie pasuje do motywu twojej witryny.

W tym artykule pokażemy, jak łatwo stworzyć własny formularz rejestracji użytkownika w WordPress.

Dlaczego warto dodać własny formularz rejestracji użytkownika w WordPress?

Domyślna strona rejestracji użytkownika WordPress pokazuje branding i logo WordPress, które nie pasują do reszty projektu Twojej witryny internetowej WordPress.

Utworzenie nowego formularza rejestracji użytkownika umożliwia utworzenie formularza rejestracji na dowolnej stronie witryny i pomaga zapewnić bardziej spójne wrażenia użytkownika podczas procesu rejestracji.

Dzięki formularzowi rejestracyjnemu możesz zbierać od użytkowników określone informacje, które mogą być unikatowe dla twojego bloga WordPress lub firmy.

Może to obejmować dodatkowe dane kontaktowe, preferencje lub inne informacje istotne dla funkcjonalności Twojej witryny.

Na przykład, jeśli organizujesz wydarzenie, formularz rejestracyjny pomoże Ci zebrać niezbędne informacje od uczestników, takie jak ograniczenia dietetyczne, preferencje sesji lub specjalne wymagania.

Własny formularz rejestracji użytkownika umożliwia również przekierowanie klientów po rejestracji. Możesz nawet wyświetlić dodatkowe pola profilu użytkownika, połączyć je z własnym front-endowym formularzem logowania i połączyć go z twoją usługą e-mail marketingu.

Powiedziawszy to, przyjrzyjmy się, jak krok po kroku stworzyć własny formularz rejestracji użytkownika w WordPress.

Jak utworzyć własny formularz rejestracji użytkownika w WordPress?

Najprostszym sposobem na stworzenie własnego formularza rejestracji użytkownika jest użycie WPForms. Jest to najlepsza na rynku wtyczka do formularzy kontaktowych WordPress, która umożliwia tworzenie wszelkiego rodzaju nowych formularzy w WordPress.

WPForms jest bardzo łatwy w użyciu i oferuje kreator formularzy typu „przeciągnij i upuść”, dzięki czemu możesz dowolnie konfigurować swój formularz rejestracyjny. Wtyczka integruje się również z popularnymi usługami e-mail marketingu i usługami płatniczymi, takimi jak PayPal.

Najpierw należy zainstalować i włączyć wtyczkę WPForms. Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, udaj się na stronę WPForms ” Ustawienia z panelu bocznego administratora WordPress, aby wpisz swój klucz licencyjny.

Możesz uzyskać ten klucz ze swojego konta na witrynie internetowej WPForms.

Po zweryfikowaniu klucza należy przejść na stronę WPForms ” Addons z kokpitu WordPress.

W tym miejscu znajdź dodatek „User Registration Addon”, a następnie kliknij znajdujący się pod nim przycisk „Install Addon”.

WPForms zainstaluje i włączy teraz dodatek do rejestracji użytkowników na twojej witrynie WordPress. Po zainstalowaniu dodatku status zmieni się na „Aktywny”.

Jesteś teraz gotowy do stworzenia własnego formularza rejestracji użytkownika.

Aby to zrobić, przejdź na stronę WPForms ” Dodaj nowy z panelu bocznego administratora.

Spowoduje to przejście do strony „Wybierz szablon”, na której można rozpocząć od wpisania rodzaju nazwy formularza, który zamierzasz utworzyć.

Gdy to zrobisz, po prostu znajdź szablon „Formularz rejestracji użytkownika” i kliknij przycisk „Użyj szablonu” pod nim.

Spowoduje to uruchomienie kreatora formularzy WPForms na twoim ekranie. Powiadomienie wyświetli opcje pól w prawej kolumnie i podgląd formularza w lewym rogu ekranu.

Teraz domyślny formularz rejestracyjny będzie miał już dodane pola nazwy, nazwy użytkownika, hasła, e-maila i krótkiego biogramu.

Możesz jednak łatwo dodać więcej pól do formularza z lewego panelu, a także przeciągnąć pola, aby zmienić ich kolejność.

Wtyczka umożliwia również edycję każdego pola formularza. Aby to zrobić, wystarczy kliknąć dowolne pole formularza, a w lewej kolumnie pojawią się „Opcje pola”.

Z tego miejsca można zmienić etykietę pola, edytować jego format, dodać opis, skonfigurować formatowanie warunkowe, zmienić pole na wymagane i nie tylko.

Gdy skończysz, nie zapomnij kliknąć przycisku „Zapisz” u góry, aby zapisać ustawienia twojego formularza rejestracji użytkownika.

Uwaga: Jeśli chcesz wysyłać powiadomienia e-mail do zarejestrowanych użytkowników, możesz zapoznać się z naszym poradnikiem na temat wysyłania wiadomości e-mail z potwierdzeniem po przesłaniu formularza WordPress.

Dodawanie pól własnych w twoim dostosowanym formularzu rejestracji użytkownika

WPForms pozwala również na podłączenie własnych pól profilu użytkownika do twojego formularza rejestracji użytkownika.

Aby to zrobić, będziesz musiał dodać dodatkowe pola profilu użytkownika do twojej witryny WordPress, a najłatwiejszym sposobem na to jest użycie wtyczki WordPress.

W tym poradniku używamy wtyczki Advanced Custom Fields. Jednak funkcja mapowania pól w WPForms będzie działać z każdą wtyczką, która używa standardowych pól własnych WordPress do dodawania i przechowywania metadanych użytkownika.

Najpierw należy zainstalować i włączyć wtyczkę Advanced Custom Fields. Aby uzyskać więcej informacji, możesz zapoznać się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu wtyczki, przejdź do strony ACF ” Field Groups z panelu bocznego administratora WordPress i kliknij przycisk „+ Add Field Group”.

Spowoduje to przejście do strony „Utwórz nową grupę pól”, na której można rozpocząć od wpisania tytułu grupy pól.

W tym poradniku będziemy tworzyć własne pole dla szczegółów konta w mediach społecznościowych.

Następnie przewiń w dół do menu rozwijanego „Field Type” i wybierz rodzaj pola własnego. Możesz wybrać tekst, liczby, obrazki, pliki, pola wyboru, adresy URL, hasła i wiele innych.

Gdy to zrobisz, wpisz etykietę pola, która pojawi się na stronie profilu.

Na przykład, jeśli chcesz dodać własne pole do zbierania profili na Facebooku, możesz nazwać etykietę pola „Facebook”.

Powiadomienie Nazwa pola zostanie wygenerowana automatycznie, gdy wpiszesz etykietę pola, ale możesz ją edytować.

Następnie przejdź do karty „Walidacja” w sekcji „Etykieta”. Tutaj możesz włączyć przełącznik „Wymagane”, aby klienci musieli wypełnić to własne pole przed wysłaniem formularza.

W tym miejscu można nawet ustawić limit znaków dla pola.

Gdy już to zrobisz, po prostu przełącz się na kartę „Prezentacja” od góry.

Można teraz dodawać instrukcje dla autorów, tekst zastępczy dla pola, atrybuty kontenera i nie tylko.

Następnie można również dodać logikę warunkową do tworzonego pola własnego, przełączając się na kartę „Logika warunkowa” od góry.

Po wprowadzeniu twoich zmian, przewiń w dół do sekcji „Reguły lokalizacji”. W tym miejscu należy utworzyć zestaw reguł określających, które ekrany będą korzystać z tych pól własnych.

Ponieważ chcemy, aby to pole pojawiło się dla wszystkich profili użytkowników, będziemy musieli wybrać opcję „Rola użytkownika” z menu rozwijanego po lewej stronie.

Następnie pozostaw menu rozwijane na środku bez zmian, a następnie wybierz opcję „Wszystkie” z menu rozwijanego po prawej stronie.

Teraz tworzona przez nas grupa pól własnych będzie wyświetlana dla wszystkich profili klientów.

Następnie przejdź do karty „Ustawienia grupy” u góry.

Gdy już się tam znajdziesz, upewnij się, że grupa pól jest włączona, przesuwając przełącznik z Nie na Tak.

Gdy to zrobisz, możesz również dodać inne konfiguratory do grupy pól, klikając przycisk „Dodaj pole” u góry strony.

Na przykład, jeśli chcesz utworzyć wiele pól mediów społecznościowych, możesz kliknąć przycisk „Dodaj pole” i rozpocząć konfigurowanie pola dla innych platform mediów społecznościowych.

Należy pamiętać, że wszystkie utworzone pola będą częścią tej samej grupy pól.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz zmiany” u góry, aby zapisać twoje ustawienia.

Twoja grupa terenowa została pomyślnie opublikowana.

Teraz, aby zobaczyć utworzone pole własne, przejdź do strony Użytkownik ” Profil z obszaru administracyjnego.

Tutaj zobaczysz swoje własne pola dodane na dole strony profilu.

Teraz, gdy utworzyłeś niestandardowe pole profilu użytkownika, musisz dodać je do niestandardowego formularza rejestracji użytkownika w WPForms.

Następnie należy również zmapować pole formularza do pola własnego, aby dane były prawidłowo przechowywane.

Aby to zrobić, przejdź na stronę WPForms ” Wszystkie formularze z kokpitu WordPress i kliknij odnośnik „Edytuj” pod formularzem rejestracji użytkownika, który właśnie utworzyłeś i zapisałeś wcześniej.

Spowoduje to otwarcie twojego formularza w kreatorze formularzy WPForms. Gdy już się tam znajdziesz, po prostu przeciągnij pole z lewego panelu, aby dodać je do twojego formularza.

W tym przykładzie dodajemy pole „Witryna internetowa/adres URL” do naszego formularza.

Po dodaniu pola Witryna internetowa/adres URL kliknij je, aby otworzyć właściwości pola w lewej kolumnie.

Teraz zmień etykietę pola z Website/URL na nazwę utworzonej grupy pól.

Jeśli chcesz, możesz również dodać opis pola.

Następnie nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu ekranu, aby zapisać twój formularz.

Następnie należy kliknąć przycisk „Ustawienia” w prawym rogu, aby uzyskać dostęp do zaawansowanych ustawień formularza i mapowania pól. Na stronie ustawień kliknij kartę „Rejestracja użytkownika”.

WPForms pokaże teraz twoje pola formularza i rozwijane menu pod nimi, aby wybrać pole rejestracji WordPress, z którym chcesz je zmapować.

Zauważysz, że WPForms automatycznie zmapuje twoje domyślne pola, takie jak imię i nazwisko, e-mail, hasło i inne.

W tym miejscu wybierz opcję nazwy twojej grupy pól z menu rozwijanego pod opcją „Witryna internetowa”.

Następnie przewiń w dół do sekcji „Custom User Meta”.

Możesz wpisz nazwę utworzonej wcześniej grupy pól w opcji własnego meta klucza, a następnie wybierz z rozwijanego menu własne pole formularza, z którym chcesz je zmapować.

Uwaga: Jeśli chcesz wysyłać powiadomienia e-mail do zarejestrowanych użytkowników, możesz zapoznać się z naszym poradnikiem na temat wysyłania wiadomości e-mail z potwierdzeniem po przesłaniu formularza WordPress.

Na koniec kliknij przycisk „Zapisz” w prawym górnym rogu ekranu, aby zapisać twoje ustawienia.

Dodanie własnego formularza rejestracji użytkownika w WordPressie

WPForms sprawia, że dodawanie formularzy do twoich wpisów WordPress, stron i paneli bocznych widżetów jest bardzo proste.

Najpierw musisz otworzyć istniejący lub nowy wpis/stronę, na której chcesz dodać własny konfigurator formularza rejestracji.

Gdy już tam będziesz, kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków.

Z tego miejsca zlokalizuj i dodaj blok WPForms do strony/wpisu.

Następnie możesz wybrać swój własny formularz rejestracyjny z rozwijanego menu w samym bloku.

Zobaczysz teraz podgląd twojego formularza rejestracyjnego w edytorze WordPress. Śmiało opublikuj swój wpis lub stronę, aby zobaczyć własny formularz rejestracyjny w działaniu.

Dodanie własnego formularza rejestracji użytkownika do panelu bocznego

WPForms umożliwia również dodanie własnego formularza rejestracji użytkownika na panelu bocznym. Wystarczy przejść na stronę Wygląd ” Widżety z obszaru administracyjnego i kliknąć przycisk „Dodaj blok” (+) w lewym górnym rogu.

Spowoduje to otwarcie menu bloków, z którego można dodać blok WPForms do karty panelu bocznego na stronie „Widżety”.

Następnie wystarczy wybrać formularz rejestracji użytkownika z menu rozwijanego w bloku WPForms.

Po zakończeniu nie zapomnij kliknąć przycisku „Aktualizuj”, aby zapisać twoje ustawienia.

Teraz możesz przejść na swoją witrynę internetową, aby zobaczyć formularz rejestracji użytkownika w panelu bocznym witryny.

Dodaj własny formularz rejestracji użytkownika w pełnym edytorze witryny.

Jeśli korzystasz z blokowego motywu WordPress, nie będziesz mieć strony z widżetami. Aby dodać formularz rejestracyjny na panelu bocznym za pomocą Full Site Editor (FSE), przejdź do strony Wygląd ” Edytor z paska bocznego administratora.

Następnie kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków.

Z tego miejsca musisz znaleźć i dodać blok WPForms do preferowanego miejsca na twojej witrynie internetowej.

Następnie wybierz formularz rejestracyjny z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Zapisz”, aby zapisać twoje ustawienia.

Teraz przejdź na twoją witrynę internetową, aby zobaczyć własny formularz rejestracji użytkownika w działaniu.

Bonus: Stwórz własną stronę logowania z twoim formularzem rejestracyjnym

Gdy dodasz formularz rejestracyjny do strony w witrynie internetowej, WordPress domyślnie użyje układu, szablonu i stylu twojego motywu.

Możesz jednak stworzyć oszałamiającą stronę rejestracji od podstaw za pomocą kreatora stron docelowych WordPress.

SeedProd to najlepszy kreator stron dla WordPress. Jest przyjazny dla użytkownika i oferuje kreator typu „przeciągnij i upuść”, który pomaga tworzyć wszelkiego rodzaju strony docelowe. Wtyczka oferuje również gotowe szablony i wiele funkcji dostosowywania.

Po pierwsze, musisz zainstalować i włączać wtyczkę SeedProd na twojej witrynie. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym poradnikiem na temat instalacji wtyczki WordPress.

Po włączaniu przejdź na stronę SeedProd ” Ustawienia, aby wpisz klucz licencyjny wtyczki. Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd.

Po zweryfikowaniu twojego klucza, jesteś teraz gotowy do utworzenia strony logowania z formularzem rejestracyjnym.

Aby rozpocząć, przejdź do ekranu SeedProd ” Landing Pages z panelu bocznego administratora, a następnie kliknij przycisk „Ustaw stronę logowania”.

Spowoduje to przejście do ekranu „Wybierz szablon nowej strony”, na którym możesz wybrać gotowy szablon dla strony logowania, którą zamierzasz utworzyć.

Po wybraniu szablonu pojawi się wyskakujące okienko.

Musisz teraz wpisz nazwę twojej strony docelowej i adres URL. Gdy to zrobisz, kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Następnie możesz edytować twoją stronę logowania za pomocą kreatora stron docelowych SeedProd typu „przeciągnij i upuść”.

Aby to zrobić, wybierz blok z menu po lewej stronie i przeciągnij go w miejsce, w którym chcesz go dodać na twojej stronie logowania.

Możesz na przykład dodać do swojej strony docelowej nagłówek, obrazek, film lub blok udostępniania w mediach społecznościowych.

Gdy już to zrobisz, przejdź do sekcji Advanced Blocks w lewej kolumnie.

Z tego miejsca wybierz blok „Formularz kontaktowy” i umieść go na twojej stronie logowania.

Sugerujemy usunięcie istniejącego bloku nazwy użytkownika i hasła z szablonu, aby użytkownicy nie musieli dwukrotnie wpisywać danych uwierzytelniających.

Następnie kliknij blok WPForms na twojej stronie logowania, aby wyświetlić jego ustawienia w lewej kolumnie.

W menu pojawi się teraz opcja „Wybierz formularz”.

Następnie wybierz twój formularz rejestracyjny z rozwijanego menu.

Powinieneś teraz zobaczyć podgląd twojego formularza rejestracyjnego w kreatorze landing page’y.

Na koniec nie zapomnij kliknąć przycisku „Zapisz”, aby zapisać twoje zmiany.

Następnie możesz przejść do karty „Połącz” i zintegrować różne usługi e-mail marketingu z twoim formularzem rejestracyjnym.

SeedProd łatwo integruje się z popularnymi usługami e-mail marketingu, takimi jak Drip, Constant Contact, AWeber i innymi, które mogą pomóc ulepszyć twoją listę mailingową.

Następnie możesz przejść do karty „Ustawienia strony” i zmienić status strony na ” Opublikuj ” w ustawieniach ogólnych.

Na tej karcie można nawet edytować tytuł i adres URL strony oraz włączyć odnośnik SeedProd.

Jeśli chcesz zoptymalizować twoją stronę pod kątem wyszukiwarek, przejdź do karty SEO.

W tym miejscu można skonfigurować ustawienia, wpisz tytuł SEO, opis, miniaturkę w mediach społecznościowych i nie tylko.

SeedProd umożliwia również dodawanie fragmentów kodu w ustawieniach skryptów. Gdy będziesz zadowolony z ustawień, po prostu kliknij przycisk „Zapisz” u góry i zamknij kreator stron.

Następnie przejdź do ekranu SeedProd ” Landing Pages i przełącz przełącznik pod Login Page, aby Twoja strona była „Aktywna”.

Możesz teraz przejść na twoją stronę logowania, aby zobaczyć formularz rejestracyjny w działaniu.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodać własny formularz rejestracji użytkownika w WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak wybrać najlepszy kreator witryn internetowych lub naszymi najlepszymi wtyczkami do rejestracji użytkowników WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.