Cum să creați formulare personalizate de înregistrare și autentificare WordPress

Publicat: 2022-04-16

Formularele 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.

ProfilPress

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.

Formular nou de înregistrare

Pasul 7: Apoi, derulați în jos la Setări formular . Aici puteți modifica etichetele butoanelor, culoarea, titlul și setările de înregistrare.

Setări de formulare

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:

  1. Va trebui să publicați formularul pe o pagină sau postare nouă
  2. 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 .

Formular de 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.

Noul formular de conectare WordPress

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:

Inscrie-te

Și iată cum arată formularul de conectare:

Logare utilizator

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.

Setări ProfilPress

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 .

WooCommerce activat

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.

Conectați-vă la pagina contului dvs

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 ”.

Crearea contului

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.

câmpuri customizate

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.

Câmpuri de înregistrare la checkout

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.

Formularul de conectare la contul meu

Mai jos este o previzualizare a modului în care ar putea arăta pe pagina Contul meu WooCommerce.

Contul meu

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