Cum să creați formulare personalizate de înregistrare și autentificare WordPress
Publicat: 2022-04-16Formularele sunt o parte esențială a oricărui site web WordPress. WordPress oferă formulare de înregistrare și autentificare foarte simple și simple. Mulți dintre voi doresc să construiască formulare personalizate, astfel încât să se alinieze cu designul și culoarea mărcii dvs. Unii dintre voi doresc să adăugați mai multe câmpuri la formulare. Indiferent de motivele dvs., aveți nevoie de un plugin pentru a crea un formular personalizat.
Există mai multe plugin-uri WordPress gratuite disponibile, dar aceste plugin-uri oferă în general funcții limitate. Veți avea nevoie de un plugin dedicat, cum ar fi ProfilePress sau WPForms, pentru a crea formulare WordPress personalizate.
În acest articol, vă vom arăta cum să creați formulare personalizate de înregistrare și autentificare pentru site-ul dvs. WordPress. Vă vom arăta cum să adăugați câmpuri personalizate, să faceți noile formulare ca forme implicite ale site-ului dvs. WordPress și să creați formulare personalizate pentru finalizarea comenzii și paginile contului meu.
Să începem.
Cum să creați formulare WordPress personalizate
Există mai multe plugin-uri care vă vor ajuta să creați un formular de înregistrare pentru site-ul dvs. WordPress. Dar, pe baza ușurinței de utilizare și a funcționalităților, am descoperit că ProfilePress este cel mai bun plugin de formulare.
ProfilePress oferă formulare prefabricate frumoase pe care le puteți personaliza în funcție de nevoile dvs. folosind funcțiile de glisare și plasare. Acestea fiind spuse, pluginul este mult mai mult decât un generator de formulare. Folosind ProfilePress puteți crea:
- Profiluri frumoase de utilizator
- Directoare de membri care pot fi căutate și filtrabile
- Restricționați accesul la postări, pagini și pagini secundare
- Restricționați accesul la categorii, etichete, tipuri de postări personalizate și taxonomii
Pe lângă toate acestea, puteți extinde funcționalitatea pluginului utilizând suplimente precum Google reCAPTCHA, Polylang, autentificarea cu doi factori etc. Puteți afla mai multe despre funcțiile pluginului pe pagina lor de listare a funcțiilor.
ProfilePress este un plugin premium și pentru a-l folosi va trebui să achiziționați o licență care costă 79 USD anual pentru un singur site. Dacă doriți să îl utilizați pentru mai multe site-uri, atunci abonați-vă la planuri mai mari.
Să folosim pluginul pentru a crea formulare WordPress personalizate.
Crearea unei înregistrări personalizate
Instalați și activați ProfilePress pe site-ul dvs. WordPress.
Pasul 1: Pentru a vă asigura că puteți utiliza câmpuri personalizate în formular, trebuie să activați Câmpurile personalizate accesând ProfilePress > Addons > Câmpuri personalizate și comutați butonul pe .
Pasul 2: Acum accesați ProfilePress > Formulare și profiluri > Adăugați nou > Înregistrare .
Pasul 3: În continuare, aveți opțiunea de a edita un șablon pre-construit sau de a crea formularul de la zero.
Construirea unui formular de la zero necesită cunoștințe de codare și mulți dintre voi care citiți acest articol, cel mai probabil, nu știu cum să codificați. În acest caz, alegeți Generatorul Drag & Drop .
Pasul 4: Pe pagina următoare, va trebui să denumești formularul și să alegi un șablon . Apoi veți continua la proiectarea formularului utilizând generatorul de glisare și plasare.
Pasul 5: Creați formularul utilizând următoarele câmpuri personalizate:
- Nume de utilizator
- Adresa de e-mail
- Confirmați adresa de e-mail
- Parola
- Confirmă parola
- Puterea parolei
- Site-ul web
- Poreclă
- Numele afisat
- Nume
- Nume
- Încărcați poza de profil
- Încărcați o fotografie de copertă
- Biografie
- Selectați Rol
- HTML personalizat
- reCAPTCHA
Pasul 6: Faceți clic pe butonul Live Preview pentru a previzualiza formularul înainte de a salva modificările.
Pasul 7: Apoi, derulați în jos la Setări formular . Aici puteți modifica etichetele butoanelor, culoarea, titlul și setările de înregistrare.
Pasul 8: Când sunteți gata, apăsați butonul Salvare modificări . Asta e. Noul tău formular de înregistrare este acum gata.
IMPORTANT: Doriți să adăugați Google reCAPTCHA, autentificări sociale sau autentificare cu doi factori în formularul dvs.? Pluginul vă permite să extindeți și să personalizați funcționalitatea site-ului dvs. Află mai multe
În continuare, sunt două lucruri pe care trebuie să le faci:
- Va trebui să publicați formularul pe o pagină sau postare nouă
- Apoi faceți din noul formular formularul implicit de înregistrare WordPress
Acoperim ambele tutoriale în două secțiuni diferite mai jos. Dar mai întâi, să aruncăm o privire rapidă asupra modului de a crea un formular personalizat de autentificare WordPress.
Crearea unui formular personalizat de conectare
Pașii pe care trebuie să îi urmați sunt identici cu cei pentru formularul de înregistrare, cu excepția a două lucruri:
Accesați ProfilePress > Formulare și profiluri > Adăugați nou > Generator de tragere și plasare. Și în loc să alegeți Înregistrare, alegeți Autentificare .
Apoi, după ce ați denumit formularul și ați ales un șablon , veți observa că câmpurile personalizate sunt limitate în comparație cu formularul de înregistrare. Oricum, nu aveți nevoie de atâtea câmpuri personalizate pentru un formular de conectare.
Iată o listă a câmpurilor personalizate pe care le puteți utiliza în formularul de conectare:
- Autentificare utilizator (nume de utilizator sau e-mail)
- Parola
- Amintiți-vă autentificare
- HTML personalizat
- reCAPTCHA
Toate celelalte sunt exact la fel cu formularul de înregistrare.
Când noul formular de conectare este gata, treceți la următoarea secțiune, unde veți afla cum să publicați noile formulare (înregistrare și autentificare) și cum să le setați ca formulare WordPress implicite.
Cum să publicați noile formulare pe site-ul dvs
Asta e ușor.
Accesați ProfilePress > Formulare și profiluri și selectați Conectare sau Înregistrare . În partea dreaptă a formularelor, ar trebui să puteți vedea un cod scurt. Copiați codul scurt al formularului pe care tocmai l-ați creat.
Apoi, creați o pagină nouă accesând Pagini > Adăugați nou și inserați codul scurt. Denumiți pagina și apăsați Publicare .
Formularul dvs. este acum live pe site-ul dvs. web.
Iată cum arată formularul de înregistrare pe site-ul nostru demonstrativ:
Și iată cum arată formularul de conectare:
Următorul pas este să faceți din noul formular formularul de autentificare sau de înregistrare implicit.
Cum să setați noile formulare ca formular implicit WordPress
Accesați ProfilePress > Setări > Global .
În opțiunea Pagina de conectare , există un meniu derulant. Din meniul drop-down, selectați noua pagină în care ați publicat formularul de conectare.
Iar în opțiunea Pagina de înregistrare , selectați noua pagină în care ați publicat formularul de înregistrare.
Asta e. Ori de câte ori cineva încearcă să se înregistreze sau să se conecteze la site-ul dvs., va întâlni noi formulare.
Cum se creează formulare personalizate pentru WooCommerce
Mulți dintre voi care citiți acest articol vă întrebați dacă puteți înlocui formularele site-ului dvs. WooCommerce? Bineinteles ca poti. Iată cum:
Activați și instalați ProfilePress pe site-ul dvs. WooCommerce. După cum am spus mai devreme, din experiența noastră personală, ProfilePress este cel mai bun plugin pe care îl puteți folosi pentru a crea formulare, deoarece este ușor de utilizat și oferă o mulțime de funcționalități.
Apoi, trebuie să activați integrarea WooCommerce accesând ProfilePress > Addon > WooCommerce și activând butonul .
Crearea unui formular personalizat de înregistrare și autentificare pentru WooCommerce
Am acoperit deja pașii pe care trebuie să-i faceți pentru a crea un formular de înregistrare și autentificare mai devreme în articol. Va trebui să urmați pașii exacti pentru a crea formulare pe site-ul dvs. WooCommerce.
Când formularele sunt gata, publicați-le pe două pagini separate. Am tratat acest lucru și în secțiunea „Cum să publicați noile formulare pe site-ul dvs.”.
De asemenea, v-am arătat cum să setați noile formulare ca formular implicit de înregistrare și autentificare pe site-ul dvs. web. Va trebui să urmați aceiași pași pe site-ul dvs. WooCommerce.
Adăugarea de câmpuri personalizate la formularele de plată WooCommerce
Există două tipuri de formulare de plată: înregistrare și autentificare. În această secțiune, veți învăța cum să creați formulare personalizate de înregistrare sau de conectare.
Formular personalizat de autentificare
Doriți să înlocuiți formularul dvs. implicit de autentificare la finalizare cu un formular personalizat de autentificare?
Mai întâi, să creăm un formular personalizat de autentificare pentru finalizarea plății. V-am arătat deja cum să faceți acest lucru într-o secțiune anterioară. Vă rugăm să urmați pașii din secțiunea „Crearea unui formular personalizat de conectare”.
Terminat? Acum, accesați ProfilePress > Setări > General > WooCommerce .
Ar trebui să vedeți o opțiune numită Formular de conectare la finalizare . Vine cu un meniu derulant. Selectați noul formular din meniul derulant și salvați setarea.
Clienții dvs. ar trebui să poată utiliza noul formular pentru a se conecta în timpul finalizării plății.
Formular de înregistrare la checkout
În ceea ce privește formularul de înregistrare, ProfilePress vă permite să adăugați câmpuri personalizate la formularul de înregistrare a plății WooCommerce. Nu trebuie să creați un formular de înregistrare de la zero. Site-ul dvs. web va folosi formularul dvs. de înregistrare implicit ca formular de înregistrare a plății, dar puteți adăuga câmpuri personalizate în formular.
Pentru a adăuga câmpuri personalizate la formularul de înregistrare a plății, trebuie să creați mai întâi câmpurile personalizate.
Accesați WooCommerce > Setări > Conturi și confidențialitate și activați opțiunea „ Permiteți clienților să creeze un cont în timpul plății ”.
Apoi accesați ProfilePress > Setări > Câmpuri personalizate > Adăugați nou . Pe pagina următoare, introduceți eticheta, cheia, descrierea și tipul de câmp. Salvează-ți setarea.
După ce ați terminat de creat toate câmpurile personalizate, adăugați-le în formularul de înregistrare a comenzii.
Accesați ProfilePress > Setări > General > WooCommerce > Câmpuri de înregistrare a comenzii, iar câmpurile pe care tocmai le-ați creat ar trebui să apară ca un meniu vertical. Selectați-le .
În secțiunea următoare (adică Câmpuri de înregistrare obligatorii), puteți introduce câmpurile personalizate pe care doriți să le faceți obligatorii.
Personalizate formularele de înregistrare și autentificare în contul meu
Cu ProfilePress aveți opțiunea de a seta un formular personalizat de înregistrare și autentificare. Mai întâi va trebui să creați formularele pe site-ul dvs. WordPress. Pur și simplu urmați pașii pe care i-am acoperit în „Cum să creați formulare WordPress personalizate”.
Apoi accesați ProfilePress > Setări > General > WooCommerce > Formularul de conectare la contul meu și selectați noul formular de conectare pe care tocmai l-ați creat.
Apoi accesați Formularul de înregistrare în contul meu și selectați noul formular de înregistrare pe care tocmai l-ați creat.
Mai jos este o previzualizare a modului în care ar putea arăta pe pagina Contul meu WooCommerce.
Asta e, oameni buni. Cu asta, am ajuns la sfârșitul acestui tutorial.
Gânduri finale
Crearea unei înregistrări WordPress personalizate și a formularului de autentificare este o idee grozavă. Puteți adăuga câmpuri personalizate, puteți colecta mai multe date despre utilizatori și puteți crea formularul într-un mod care să pară potrivit pentru marca dvs.
Deși există multe plugin-uri care vă vor ajuta să creați formulare pe site-ul dvs. WordPress, am descoperit că ProfilePress este cel mai bun plugin pentru înregistrarea utilizatorului și pentru autentificare. Este foarte ușor de utilizat și se integrează cu magazinele WooCommerce.
- A fost aceasta utila ?
- Da nu