Jak utworzyć niestandardowy formularz rejestracyjny użytkownika w WordPress

Czy chcesz utworzyć niestandardowy formularz rejestracyjny użytkownika front-end w WordPress?

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

W tym artykule pokażemy, jak utworzyć niestandardowy formularz rejestracyjny użytkownika w WordPress.

Dlaczego warto dodać niestandardowy formularz rejestracyjny użytkownika w WordPress

Domyślna strona rejestracji użytkownika WordPress pokazuje markę i logo WordPress. Nie pasuje do reszty witryny WordPress.

Tworzenie niestandardowego formularza rejestracyjnego użytkownika pozwala dodać formularz rejestracyjny na dowolnej stronie witryny WordPress. Pomaga to zapewnić bardziej spójne doświadczenie użytkownika podczas procesu rejestracji.

Niestandardowy formularz rejestracyjny użytkownika umożliwia również przekierowanie użytkowników po rejestracji. Możesz także wyświetlić dodatkowe pola profilu użytkownika, połączyć je z niestandardowym formularzem logowania front-end i połączyć z usługą e-mail marketingu.

Powiedziawszy to, rzućmy okiem na to, jak utworzyć niestandardowy formularz rejestracyjny użytkownika w WordPress.

Tworzenie niestandardowego formularza rejestracji użytkownika w WordPress

Najprostszym sposobem utworzenia niestandardowego formularza rejestracyjnego użytkownika jest użycie WPForms. Jest to najlepsza wtyczka do formularzy kontaktowych WordPress, która pozwala tworzyć wszelkiego rodzaju formularze w WordPress.

WPForms jest bardzo łatwy w użyciu i oferuje Kreator formularzy typu „przeciągnij i upuść”, dzięki czemu możesz go użyć do dostosowania formularza rejestracyjnego w dowolny sposób. Wtyczka integruje się również z popularnymi usługami e-mail marketingu i usługami płatniczymi, takimi jak PayPal.

W tym samouczku będziemy używać planu WPForms Pro, ponieważ zawiera dodatek do rejestracji użytkownika.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WPForms forms na swojej stronie internetowej. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić WPForms ” Ustawienia strona, aby wprowadzić klucz licencyjny WPForms. Możesz uzyskać ten klucz ze swojego konta na stronie WPForm.

Po zweryfikowaniu klucza należy odwiedzić WPForms ” Dodatki strona, a następnie kliknij przycisk „Install Addon” obok „User Registration Addon”.

WPForms zainstaluje i aktywuje dodatek do rejestracji użytkownika. Po zainstalowaniu dodatku zobaczysz zmianę statusu na „aktywny”.

Jesteś teraz gotowy do utworzenia niestandardowego formularza rejestracyjnego użytkownika.

Aby rozpocząć, po prostu odwiedź WPForms ” Dodaj Nowy aby uruchomić kreator WPForms.

Najpierw musisz wprowadzić nazwę formularza u góry, a następnie najechać myszką na szablon formularza rejestracyjnego użytkownika. Następnie kliknij przycisk „Utwórz formularz rejestracyjny użytkownika”.

WPForms utworzy dla Ciebie prosty formularz rejestracyjny. Ten przykładowy formularz będzie miał domyślnie dodane następujące pola rejestracji użytkownika WordPress.

• Imię-imię i nazwisko
• Nazwa użytkownika
• E-mail
• Hasło
• Krótkie bio

Możesz dodać więcej pól z lewego panelu, a także przeciągnąć je, aby zmienić ich kolejność.

Wtyczka umożliwia również edycję każdego pola formularza. Po prostu kliknij dowolne pole formularza, a zobaczysz „opcje pola” po lewej stronie.

Na przykład możesz zmienić etykietę pola, edytować jej format, dodać opis, skonfigurować formatowanie warunkowe i wiele więcej.

Po zakończeniu edycji formularza nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu.

Dodawanie niestandardowych pól w niestandardowym formularzu rejestracyjnym użytkownika

WPForms umożliwia również łączenie niestandardowych pól profilu użytkownika z formularzem rejestracyjnym użytkownika.

Aby to zrobić, musisz dodać dodatkowe pola profilu użytkownika do swojej witryny WordPress. Najprostszym sposobem na to jest użycie wtyczki WordPress.

W tym samouczku używamy wtyczki Advanced Custom Fields. Jednak funkcja mapowania pól wpforms działa z dowolną wtyczką, która używa standardowych niestandardowych pól WordPress do dodawania i przechowywania metadanych użytkownika.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Advanced Custom Fields. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Pola Niestandardowe ” Grupy Pól i kliknij przycisk „Dodaj nowy”.

Następnie wprowadź nazwę nowej grupy pól. Na przykład, jeśli chcesz zbierać informacje z mediów społecznościowych podczas rejestracji, możesz je nazwać szczegółami mediów społecznościowych.

Następnie kliknij przycisk „+ Dodaj pole”.

Teraz musisz wprowadzić Etykietę pola, która pojawi się na stronie profilu. Zauważysz, że nazwa pola zostanie wygenerowana automatycznie podczas wprowadzania etykiety pola, ale możesz edytować nazwę pola, jeśli chcesz.

Następnie wybierz typ pola z rozwijanego menu. Możesz wybrać pole zawierające tekst, liczby, obrazy, pliki, pole wyboru, adres URL, hasło i wiele innych.

Istnieje również więcej opcji edycji nowego pola. Możesz włączyć opcję, aby pole było wymagane, dodać wartość domyślną, ustawić limit znaków i skonfigurować logikę warunkową.

Następnie przewiń w dół do sekcji „Lokalizacja”. W tej sekcji musisz utworzyć zestaw reguł, aby określić, które ekrany będą korzystać z tych niestandardowych pól.

Ponieważ chcemy, aby były wyświetlane dla wszystkich profili użytkowników, możesz je zmienić, aby pokazać tę grupę pól, jeśli 'rola użytkownika jest równa wszystkim.’

Teraz przewiń do sekcji „Ustawienia” i upewnij się, że pole jest „aktywne”, przesuwając przełącznik z nie na tak.

Gdy będziesz zadowolony z nowych niestandardowych ustawień pól, kliknij przycisk „Publikuj”.

Aby zobaczyć swoje pole niestandardowe w akcji, po prostu przejdź do Profil Użytkownika” i przewiń w dół strony.

Teraz, gdy utworzyliśmy niestandardowe pole profilu użytkownika, dodajmy je do niestandardowego formularza rejestracyjnego użytkownika w WPForms, a następnie upewnij się, że mapujesz pole formularza do niestandardowego pola, aby dane były prawidłowo przechowywane.

Musisz odwiedzić WPForms ” Wszystkie Formularze strona do edycji niestandardowego formularza rejestracyjnego użytkownika, który stworzyliśmy wcześniej, lub możesz również utworzyć nowy.

Następnie przeciągnij pole z lewego panelu, aby dodać je do formularza. W tym przykładzie dodajemy pole 'Website / URL’ do naszego formularza.

Pole Strona internetowa / URL pojawi się teraz w podglądzie formularza. Musisz kliknąć pole, a WPForms pokaże jego właściwości w lewym panelu.

Śmiało i zmień etykietę ze strony internetowej / adresu URL na szczegóły mediów społecznościowych. Możesz również dodać opis pola.

Nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu ekranu, aby zapisać formularz.

Następnie należy kliknąć przycisk „Ustawienia”, aby uzyskać zaawansowane ustawienia formularza i mapowanie pól. Na stronie ustawień kliknij kartę „Rejestracja użytkownika”.

WPForms wyświetli teraz pola formularzy i rozwijane menu poniżej, aby wybrać pole rejestracji WordPress, aby je zmapować.

Zauważysz, że WPForms automatycznie mapuje domyślne pola, takie jak nazwa, adres e-mail, hasło itp. Możesz także wybrać stronę, na którą chcesz przekierować użytkowników po przesłaniu formularza.

Musisz przewinąć w dół do sekcji „Niestandardowa Meta użytkownika”. Tutaj możesz wprowadzić niestandardowy klucz meta utworzony wcześniej, a następnie wybrać niestandardowe pole formularza, które chcesz zmapować.

Nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu ekranu, aby zapisać ustawienia.

Dodawanie niestandardowego formularza rejestracji użytkownika w WordPress

WPForms sprawia, że dodawanie formularzy do postów, stron i widżetów paska bocznego WordPress jest bardzo proste.

Musisz utworzyć nowy post/stronę lub edytować istniejący. W edytorze WordPress kliknij znak plus (+) u góry, a następnie przewiń w dół do sekcji widżety, aby dodać blok WPForms.

Następnie możesz wybrać niestandardowy formularz rejestracyjny z menu rozwijanego w bloku WPForms.

Zobaczysz teraz podgląd formularza rejestracyjnego w edytorze WordPress. Śmiało i Opublikuj swój post lub stronę, aby zobaczyć niestandardowy formularz rejestracyjny w akcji.

WPForms umożliwia również dodanie niestandardowego formularza rejestracji użytkownika na pasku bocznym. Po prostu odwiedź Wygląd ” Widgety strona i dodaj widżet WPForm do paska bocznego.

Następnie musisz wybrać formularz, który chcesz wyświetlić z menu rozwijanego w Ustawieniach widżetu. Nie zapomnij kliknąć przycisku Zapisz, aby zapisać ustawienia widżetu.

To wszystko, możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć niestandardowy formularz rejestracyjny użytkownika w akcji.

Utwórz niestandardową stronę logowania za pomocą Formularza Rejestracyjnego

Po dodaniu formularza rejestracyjnego do strony w witrynie WordPress będzie domyślnie korzystać z układu, szablonu i stylu motywu.

Możesz jednak stworzyć oszałamiającą stronę rejestracyjną od zera za pomocą narzędzia do tworzenia stron docelowych WordPress.

SeedProd to najlepszy kreator stron docelowych dla WordPress. Jest przyjazny dla użytkownika i oferuje narzędzie do przeciągania i upuszczania, które pomaga tworzyć wszystkie typy stron docelowych. Wtyczka oferuje również wbudowane szablony i wiele funkcji dostosowywania.

W tym samouczku użyjemy wersji Pro SeedProd, ponieważ zawiera szablon strony logowania i zaawansowane funkcje dostosowywania. Istnieje również darmowa wersja SeedProd, ale nie ma opcji utworzenia strony logowania.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd na swojej stronie. Postępuj zgodnie z naszym szczegółowym samouczkiem na temat instalacji wtyczki WordPress.

Gdy wtyczka jest aktywna, zostaniesz przekierowany do SeedProd w panelu administracyjnym WordPress i zostaniesz poproszony o wprowadzenie klucza licencyjnego. Możesz znaleźć klucz na swoim koncie SeedProd.

Po zweryfikowaniu klucza możesz teraz utworzyć stronę logowania za pomocą formularza rejestracyjnego.

Na początek udaj się do SeedProd ” Strony a następnie kliknij przycisk „Skonfiguruj stronę logowania”.

Następnie musisz wybrać szablon strony logowania. SeedProd oferuje różne szablony, które pomogą Ci szybko rozpocząć pracę.

Po wybraniu szablonu pojawi się wyskakujące okno. Musisz wprowadzić nazwę strony docelowej i adres URL. Po zakończeniu kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Następnie możesz edytować stronę logowania za pomocą narzędzia do przeciągania i upuszczania stron docelowych SeedProd.

Po prostu wybierz blok z menu po lewej stronie i przeciągnij go do miejsca, w którym chcesz go dodać na stronie logowania. Na przykład możesz dodać nagłówek, obraz, wideo itp.

Aby dodać formularz rejestracyjny, przejdź do sekcji Zaawansowane bloki po lewej stronie. Następnie wybierz blok „formularz kontaktowy” i umieść go na swojej stronie logowania.

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

Następnie kliknij blok WPForms na stronie logowania. W menu po lewej stronie pojawi się opcja „Wybierz formularz”. Śmiało i wybierz Formularz rejestracyjny z rozwijanego menu.

Powinieneś teraz zobaczyć podgląd formularza rejestracyjnego w kreatorze stron docelowych. Nie zapomnij kliknąć przycisku „Zapisz”, aby zapisać zmiany.

Następnie możesz przejść do zakładki „Połącz” i zintegrować różne usługi e-mail marketingu. SeedProd łatwo integruje się z Drip, Constant Contact, AWeber, ActiveCampaign itp.

Następnie możesz przejść do zakładki „Ustawienia strony” i zmienić Status strony na Publikuj w ustawieniach ogólnych. Możesz nawet edytować tytuł Strony, adres URL i włączyć link SeedProd.

Jeśli chcesz zoptymalizować swoją stronę pod kątem wyszukiwarek, przejdź do ustawień SEO. Możesz wprowadzić tytuł SEO, opis, miniaturę mediów społecznościowych itp. SeedProd pozwala również dodawać fragmenty 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 udaj się do SeedProd ” Strony i kliknij przełącznik pod stroną logowania, aby aktywować swoją stronę.’

Możesz teraz odwiedzić stronę logowania, aby zobaczyć formularz rejestracyjny w akcji.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać niestandardowy formularz rejestracyjny użytkownika w WordPress. Możesz również zobaczyć nasz przewodnik, jak wybrać najlepszy kreator stron internetowych lub nasze porównanie najlepszego oprogramowania do czatu na żywo dla małych firm.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.