Jak tworzyć niestandardowe formularze rejestracji i logowania do WordPressa?

Jak tworzyć niestandardowe formularze WordPress

Istnieje kilka wtyczek, które pomogą Ci stworzyć formularz rejestracyjny dla Twojej witryny WordPress. Ale w oparciu o łatwość użycia i funkcje, uznaliśmy, że ProfilePress jest najlepszą wtyczką do formularzy.

ProfilePress oferuje piękne, gotowe formularze, które możesz dostosować do swoich potrzeb za pomocą funkcji przeciągania i upuszczania. To powiedziawszy, wtyczka to znacznie więcej niż kreator formularzy. Za pomocą ProfilePress możesz tworzyć:

• Piękne profile użytkowników
• Przeszukiwalne i filtrowalne katalogi członków
• Ogranicz dostęp do postów, stron i stron podrzędnych
• Ogranicz dostęp do kategorii, tagów, niestandardowych typów postów i taksonomii

Ponadto możesz rozszerzyć funkcjonalność wtyczki, korzystając z dodatków, takich jak Google reCAPTCHA, Polylang, uwierzytelnianie dwuskładnikowe itp. Możesz dowiedzieć się więcej o funkcjach wtyczki na ich stronie z listą funkcji.

ProfilePress to wtyczka premium i aby z niej korzystać, musisz kupić licencję, która kosztuje 79 USD rocznie dla jednej witryny. Jeśli chcesz używać go na więcej niż jednej stronie, zasubskrybuj wyższe plany.

Wykorzystajmy wtyczkę do tworzenia niestandardowych formularzy WordPress.

Tworzenie rejestracji niestandardowej

Zainstaluj i aktywuj ProfilePress na swojej stronie WordPress.

Krok 1: Aby upewnić się, że możesz używać pól niestandardowych w formularzu, musisz włączyć pola niestandardowe, przechodząc do ProfilePress > Dodatki > Pola niestandardowe i przełączyć przycisk na .

Krok 2: Teraz przejdź do ProfilePress > Formularze i profile > Dodaj nowy > Rejestracja .

Krok 3: Następnie masz możliwość edycji gotowego szablonu lub stworzenia formularza od podstaw.

Budowanie formularza od podstaw wymaga znajomości kodowania, a wielu z was czytających ten artykuł najprawdopodobniej nie wie, jak kodować. W takim przypadku wybierz Konstruktora przeciągnij i upuść .

Krok 4: Na następnej stronie musisz nazwać formularz i wybrać szablon . Następnie przystąpisz do projektowania formularza za pomocą konstruktora przeciągnij i upuść.

Krok 5: Utwórz formularz, korzystając z następujących pól niestandardowych:

• Nazwa użytkownika
• Adres e-mail
• Potwierdź email
• Hasło
• Potwierdź hasło
• Siła hasła
• Stronie internetowej
• Przezwisko
• Wyświetlana nazwa
• Imię
• Nazwisko
• Prześlij zdjęcie profilowe
• Prześlij zdjęcie na okładkę
• Biografia
• Wybierz rolę
• Niestandardowy kod HTML
• reCAPTCHA

Krok 6: Kliknij przycisk Podgląd na żywo , aby wyświetlić podgląd formularza przed zapisaniem zmian.

Krok 7: Następnie przewiń w dół do Ustawień formularza . Tutaj możesz zmienić etykiety przycisków, kolor, nagłówek i ustawienia rejestracji.

Krok 8: Kiedy będziesz gotowy, naciśnij przycisk Zapisz zmiany . Otóż ​​to. Twój nowy formularz rejestracyjny jest gotowy.

WAŻNE: chcesz dodać do formularza Google reCAPTCHA, loginy społecznościowe lub uwierzytelnianie dwuskładnikowe? Wtyczka umożliwia rozszerzenie i dostosowanie funkcjonalności Twojej strony internetowej. Ucz się więcej

Następnie musisz zrobić dwie rzeczy:

1. Będziesz musiał opublikować formularz na nowej stronie lub poście
2. Następnie ustaw nowy formularz jako domyślny formularz rejestracyjny WordPress

Oba samouczki omówimy w dwóch różnych sekcjach poniżej. Ale najpierw przyjrzyjmy się, jak utworzyć niestandardowy formularz logowania do WordPressa.

Tworzenie niestandardowego formularza logowania

Czynności, które należy wykonać, są identyczne jak w przypadku formularza rejestracyjnego, z wyjątkiem dwóch rzeczy:

Przejdź do ProfilePress > Formularze i profile > Dodaj nowy > Konstruktor przeciągnij i upuść. A zamiast Rejestracji, wybierz Login .

Następnie po nazwaniu formularza i wybraniu szablonu zauważysz, że pola niestandardowe są ograniczone w porównaniu z formularzem rejestracyjnym. Tak naprawdę nie potrzebujesz tak wielu niestandardowych pól do formularza logowania.

Oto lista pól niestandardowych, których możesz użyć w swoim formularzu logowania:

• Login użytkownika (nazwa użytkownika lub e-mail)
• Hasło
• Zapamiętaj logowanie
• Niestandardowy kod HTML
• reCAPTCHA

Cała reszta jest dokładnie taka sama jak formularz rejestracyjny.

Gdy nowy formularz logowania będzie gotowy, przejdź do następnej sekcji, w której dowiesz się, jak opublikować nowe formularze (rejestracja i logowanie) oraz jak ustawić je jako domyślne formularze WordPress.

Jak opublikować nowe formularze w swojej witrynie?

To jest łatwe.

Przejdź do ProfilePress > Formularze i profile i wybierz Logowanie lub Rejestracja . Po prawej stronie formularzy powinieneś zobaczyć krótki kod. Skopiuj skrócony kod formularza, który właśnie utworzyłeś.

Następnie utwórz nową stronę, przechodząc do Strony> Dodaj nowy i wklej krótki kod. Nazwij stronę i kliknij Opublikuj .

Twój formularz jest już dostępny w Twojej witrynie.

Oto jak wygląda formularz rejestracyjny na naszej stronie demonstracyjnej:

A oto jak wygląda formularz logowania:

Następnym krokiem jest ustawienie nowego formularza jako domyślnego formularza logowania lub rejestracji.

Jak ustawić nowe formularze jako domyślny formularz WordPress?

Przejdź do ProfilePress > Ustawienia > Globalne .

W opcji Strona logowania znajduje się menu rozwijane. Z rozwijanego menu wybierz nową stronę , na której opublikowałeś formularz logowania.

A w opcji Strona rejestracji wybierz nową stronę , na której opublikowałeś formularz rejestracyjny.

Otóż ​​to. Za każdym razem, gdy ktoś spróbuje się zarejestrować lub zalogować do Twojej witryny, napotka nowe formularze.

Jak tworzyć niestandardowe formularze dla WooCommerce?

Wielu z was czytających ten artykuł zastanawia się, czy możesz zastąpić formy swojej witryny WooCommerce? Oczywiście że możesz. Oto jak:

Aktywuj i zainstaluj ProfilePress na swojej stronie WooCommerce. Jak powiedzieliśmy wcześniej, z naszego osobistego doświadczenia ProfilePress to najlepsza wtyczka, której możesz użyć do tworzenia formularzy, ponieważ jest łatwa w użyciu i oferuje mnóstwo funkcji.

Następnie musisz włączyć integrację WooCommerce, przechodząc do ProfilePress > Addon > WooCommerce i przełączając przycisk na .

Tworzenie niestandardowych formularzy rejestracji i logowania dla WooCommerce

Omówiliśmy już kroki, które należy wykonać, aby utworzyć formularz rejestracji i logowania we wcześniejszej części artykułu. Będziesz musiał wykonać dokładne kroki, aby zbudować formularze w swojej witrynie WooCommerce.

Gdy formularze są gotowe, opublikuj je na dwóch osobnych stronach. Omówiliśmy to również w sekcji „Jak opublikować nowe formularze w swojej witrynie”.

Pokazaliśmy również, jak ustawić nowe formularze jako domyślny formularz rejestracji i logowania w Twojej witrynie. Musisz wykonać te same kroki na swojej stronie WooCommerce.

Dodawanie niestandardowych pól do formularzy kasowych WooCommerce

Istnieją dwa rodzaje formularzy kasowych: rejestracja i logowanie. W tej sekcji dowiesz się, jak tworzyć niestandardowe formularze rejestracji lub logowania do kasy.

Niestandardowy formularz logowania do kasy

Chcesz zastąpić domyślny formularz logowania do kasy niestandardowym formularzem logowania do kasy?

Najpierw utwórzmy niestandardowy formularz logowania do kasy. Pokazaliśmy już, jak to zrobić w poprzedniej sekcji. Postępuj zgodnie z instrukcjami w sekcji „Tworzenie niestandardowego formularza logowania”.

Zrobione? Teraz przejdź do ProfilePress > Ustawienia > Ogólne > WooCommerce .

Powinieneś zobaczyć opcję o nazwie Formularz logowania do kasy . Jest wyposażony w rozwijane menu. Wybierz nowy formularz z menu rozwijanego i zapisz ustawienia.

Twoi klienci powinni mieć możliwość korzystania z nowego formularza do logowania się podczas realizacji transakcji.

Formularz rejestracyjny kasy

Jeśli chodzi o formularz rejestracyjny, ProfilePress umożliwia dodanie niestandardowych pól do formularza rejestracji WooCommerce do kasy. Nie musisz tworzyć od podstaw formularza rejestracyjnego. Twoja witryna użyje domyślnego formularza rejestracyjnego jako formularza rejestracyjnego kasy, ale możesz dodać do niego pola niestandardowe.

Aby dodać pola niestandardowe do formularza rejestracji w kasie, musisz najpierw utworzyć pola niestandardowe.

Przejdź do WooCommerce > Ustawienia > Konta i prywatność i włącz opcję „ Zezwalaj klientom na tworzenie konta podczas realizacji transakcji ”.

Następnie przejdź do ProfilePress > Ustawienia > Pola niestandardowe > Dodaj nowy . Na następnej stronie wprowadź etykietę, klucz, opis i typ pola. Zapisz swoje ustawienie.

Po zakończeniu tworzenia wszystkich pól niestandardowych dodaj je do formularza rejestracji w kasie.

Przejdź do ProfilePress > Ustawienia > Ogólne > WooCommerce > Pola rejestracji w kasie, a pola, które właśnie utworzyłeś, powinny pojawić się jako menu rozwijane. Wybierz je .

W następnej sekcji (tj. Wymagane pola rejestracyjne) możesz wstawić niestandardowe pola, które chcesz uczynić obowiązkowymi.

Niestandardowe formularze rejestracji i logowania do mojego konta

Z ProfilePress masz możliwość ustawienia niestandardowego formularza rejestracji i logowania. Najpierw musisz utworzyć formularze w swojej witrynie WordPress. Po prostu wykonaj kroki, które omówiliśmy w „Jak tworzyć niestandardowe formularze WordPress”.

Następnie przejdź do ProfilePress > Ustawienia > Ogólne > WooCommerce > Formularz logowania do mojego konta i wybierz nowy formularz logowania , który właśnie utworzyłeś.

Następnie przejdź do Formularza Rejestracji Mojego Konta i wybierz nowy formularz rejestracyjny , który właśnie utworzyłeś.

Poniżej znajduje się podgląd, jak może wyglądać na stronie Moje konto WooCommerce.

To wszystko, ludzie. Dzięki temu dotarliśmy do końca tego samouczka.

Końcowe przemyślenia

Stworzenie niestandardowej rejestracji WordPress i formularza logowania to świetny pomysł. Możesz dodać niestandardowe pola, zebrać więcej danych użytkowników i zaprojektować formularz tak, aby pasował do Twojej marki.

Chociaż istnieje wiele wtyczek, które pomogą Ci tworzyć formularze w witrynie WordPress, uznaliśmy, że ProfilePress jest najlepszą wtyczką do rejestracji użytkowników i formularzy logowania. Jest bardzo łatwy w użyciu i integruje się ze sklepami WooCommerce.