Come creare moduli di registrazione e accesso personalizzati per WordPress

Pubblicato: 2022-04-16

I moduli sono una parte essenziale di qualsiasi sito Web WordPress. WordPress offre moduli di registrazione e accesso molto semplici e semplici. Molti di voi desiderano creare moduli personalizzati in modo che si allineino al design e al colore del marchio. Alcuni di voi vogliono aggiungere più campi ai moduli. Qualunque siano le tue ragioni, hai bisogno di un plugin per creare un modulo personalizzato.

Ci sono diversi plugin gratuiti per WordPress disponibili là fuori, ma questi plugin generalmente offrono funzionalità limitate. Avrai bisogno di un plug-in dedicato come ProfilePress o WPForms per creare moduli WordPress personalizzati.

In questo articolo, ti mostreremo come creare moduli di registrazione e accesso personalizzati per il tuo sito Web WordPress. Ti mostreremo come aggiungere campi personalizzati, rendere i nuovi moduli come moduli predefiniti del tuo sito Web WordPress e creare moduli personalizzati per il pagamento e le pagine dei miei account.

Iniziamo.

Come creare moduli WordPress personalizzati

Esistono diversi plugin che ti aiuteranno a creare un modulo di registrazione per il tuo sito Web WordPress. Ma sulla base della facilità d'uso e delle funzionalità, abbiamo riscontrato che ProfilePress è il miglior plug-in di moduli in circolazione.

ProfilePress offre bellissimi moduli predefiniti che puoi personalizzare in base alle tue esigenze utilizzando le funzionalità di trascinamento della selezione. Detto questo, il plugin è molto più di un generatore di moduli. Utilizzando ProfilePress puoi creare:

  • Bellissimi profili utente
  • Directory dei membri ricercabili e filtrabili
  • Limita l'accesso a post, pagine e pagine figlio
  • Limita l'accesso a categorie, tag, tipi di post personalizzati e tassonomie

Inoltre, puoi espandere la funzionalità del plug-in utilizzando componenti aggiuntivi come Google reCAPTCHA, Polylang, autenticazione a due fattori, ecc. Puoi saperne di più sulle funzionalità del plug-in nella loro pagina di elenco delle funzionalità.

ProfilePress è un plug-in premium e per utilizzarlo dovrai acquistare una licenza che costa $ 79 all'anno per un singolo sito. Se desideri utilizzarlo per più di un sito Web, iscriviti a piani superiori.

Usiamo il plugin per creare moduli WordPress personalizzati.

Creazione di una registrazione personalizzata

Installa e attiva ProfilePress sul tuo sito Web WordPress.

Passaggio 1: per assicurarti di poter utilizzare i campi personalizzati nel modulo, devi abilitare i campi personalizzati andando su ProfilePress > Componenti aggiuntivi > Campi personalizzati e attivando il pulsante .

Passaggio 2: ora vai su ProfilePress > Moduli e profili > Aggiungi nuovo > Registrazione .

Passaggio 3: Successivamente, hai la possibilità di modificare un modello predefinito o creare il modulo da zero.

La creazione di un modulo da zero richiede la conoscenza del codice e molti di voi che leggono questo articolo molto probabilmente non sanno come programmare. In tal caso, scegli il Drag & Drop Builder .

Passaggio 4: nella pagina successiva, dovrai assegnare un nome al modulo e scegliere un modello . Quindi procederai alla progettazione del modulo utilizzando il generatore di trascinamento della selezione.

ProfiloPress

Passaggio 5: crea il modulo utilizzando i seguenti campi personalizzati:

  • Nome utente
  • Indirizzo e-mail
  • Conferma email
  • Parola d'ordine
  • Conferma password
  • Forza della password
  • Sito web
  • Soprannome
  • Nome da visualizzare
  • Nome di battesimo
  • Cognome
  • Carica l'immagine del profilo
  • Carica foto di copertina
  • Biografia
  • Seleziona Ruolo
  • HTML personalizzato
  • reCAPTCHA

Passaggio 6: fare clic sul pulsante Anteprima dal vivo per visualizzare in anteprima il modulo prima di salvare le modifiche.

Nuovo modulo di registrazione

Passaggio 7: quindi, scorri verso il basso fino a Impostazioni modulo . Qui puoi modificare le etichette dei pulsanti, il colore, il titolo e le impostazioni di registrazione.

Impostazioni modulo

Passaggio 8: quando sei pronto, premi il pulsante Salva modifiche . Questo è tutto. Il tuo nuovo modulo di registrazione è ora pronto.

IMPORTANTE: vuoi aggiungere Google reCAPTCHA, accessi social o autenticazione a due fattori al tuo modulo? Il plugin ti consente di estendere e personalizzare le funzionalità del tuo sito web. Per saperne di più

Successivamente, ci sono due cose che devi fare:

  1. Dovrai pubblicare il modulo su una nuova pagina o post
  2. Quindi imposta il nuovo modulo come modulo di registrazione WordPress predefinito

Stiamo coprendo entrambi i tutorial in due diverse sezioni di seguito. Ma prima, diamo una rapida occhiata a come creare un modulo di accesso WordPress personalizzato.

Creazione di un modulo di accesso personalizzato

I passaggi che devi compiere sono identici a quelli per il modulo di registrazione ad eccezione di due cose:

Vai a ProfilePress > Moduli e profili > Aggiungi nuovo > Drag & Drop Builder. E invece di scegliere Registrazione, scegli Login .

Modulo di accesso

Quindi dopo aver nominato il modulo e scelto un modello , noterai che i campi personalizzati sono limitati rispetto al modulo di registrazione. Comunque non hai davvero bisogno di così tanti campi personalizzati per un modulo di accesso.

Ecco un elenco dei campi personalizzati che puoi utilizzare nel modulo di accesso:

  • Accesso utente (Nome utente o Email)
  • Parola d'ordine
  • Ricorda Accesso
  • HTML personalizzato
  • reCAPTCHA

Tutto il resto è esattamente lo stesso del modulo di registrazione.

Quando il tuo nuovo modulo di accesso è pronto, passa alla sezione successiva in cui imparerai come pubblicare i nuovi moduli (registrazione e accesso) e come impostarli come moduli WordPress predefiniti.

Come pubblicare i nuovi moduli sul tuo sito

Questo è facile.

Vai a ProfilePress > Moduli e profili e seleziona Login o Registrazione . Sul lato destro dei moduli, dovresti essere in grado di vedere uno shortcode. Copia lo shortcode del modulo appena creato.

Nuovo modulo di accesso a WordPress

Quindi, crea una nuova pagina andando su Pagine> Aggiungi nuovo e incolla lo shortcode. Assegna un nome alla pagina e premi Pubblica .

Il tuo modulo è ora attivo sul tuo sito web.

Ecco come appare il modulo di registrazione sul nostro sito demo:

Iscriviti

Ed ecco come appare il modulo di accesso:

Login utente

Il passaggio successivo consiste nel rendere il nuovo modulo il modulo di accesso o di registrazione predefinito.

Come impostare i nuovi moduli come modulo WordPress predefinito

Vai a ProfilePress > Impostazioni > Globale .

Nell'opzione Pagina di accesso , c'è un menu a discesa. Dal menù a tendina, seleziona la nuova pagina dove hai pubblicato il form di login.

E nell'opzione Pagina di registrazione , seleziona la nuova pagina in cui hai pubblicato il modulo di registrazione.

Impostazioni di ProfilePress

Questo è tutto. Ogni volta che qualcuno tenta di registrarsi o accedere al tuo sito, incontrerà nuovi moduli.

Come creare moduli personalizzati per WooCommerce

Molti di voi leggendo questo articolo si stanno chiedendo se è possibile sostituire i moduli del proprio sito WooCommerce? Certo che puoi. Ecco come:

Attiva e installa ProfilePress sul tuo sito WooCommerce. Come abbiamo detto prima, nella nostra esperienza personale ProfilePress è il miglior plugin che puoi usare per creare moduli perché è facile da usare e offre un sacco di funzionalità.

Successivamente, devi abilitare l'integrazione di WooCommerce andando su ProfilePress > Addon > WooCommerce e attivando il pulsante su .

WooCommerce attivato

Creazione di moduli di registrazione e accesso personalizzati per WooCommerce

Abbiamo già illustrato i passaggi necessari per creare un modulo di registrazione e accesso in precedenza nell'articolo. Dovrai seguire i passaggi esatti per creare moduli sul tuo sito WooCommerce.

Quando i moduli sono pronti, pubblicali su due pagine separate. Ne abbiamo parlato anche nella sezione "Come pubblicare i nuovi moduli sul tuo sito".

Ti abbiamo anche mostrato come impostare i nuovi moduli come modulo di registrazione e accesso predefinito sul tuo sito web. Dovrai seguire gli stessi passaggi sul tuo sito WooCommerce.

Aggiunta di campi personalizzati ai moduli di pagamento WooCommerce

Esistono due tipi di moduli di pagamento: registrazione e login. In questa sezione imparerai come creare moduli di registrazione o login personalizzati.

Modulo di accesso alla cassa personalizzata

Vuoi sostituire il modulo di accesso al checkout predefinito con un modulo di accesso al checkout personalizzato?

Per prima cosa, creiamo un modulo di accesso al checkout personalizzato. Ti abbiamo già mostrato come farlo in una sezione precedente. Segui i passaggi nella sezione "Creazione di un modulo di accesso personalizzato".

Fatto? Ora vai su ProfilePress > Impostazioni > Generali > WooCommerce .

Dovresti vedere un'opzione chiamata Modulo di accesso alla cassa . Viene fornito con un menu a discesa. Seleziona il nuovo modulo dal menu a tendina e salva le impostazioni.

I tuoi clienti dovrebbero essere in grado di utilizzare il nuovo modulo per accedere durante il checkout.

Accedi alla pagina del tuo account

Modulo di registrazione alla cassa

Per quanto riguarda il modulo di registrazione, ProfilePress consente di aggiungere campi personalizzati al modulo di registrazione alla cassa di WooCommerce. Non è necessario creare un modulo di registrazione da zero. Il tuo sito web utilizzerà il tuo modulo di registrazione predefinito come modulo di registrazione per il checkout, ma puoi aggiungere campi personalizzati al modulo.

Per aggiungere campi personalizzati al modulo di registrazione alla cassa devi prima creare i campi personalizzati.

Vai su WooCommerce > Impostazioni > Account e privacy e abilita l'opzione " Consenti ai clienti di creare un account durante il checkout ".

Creazione account

Quindi vai su ProfilePress > Impostazioni > Campi personalizzati > Aggiungi nuovo . Nella pagina successiva, inserisci l'etichetta, la chiave, la descrizione e il tipo di campo. Salva la tua impostazione.

Campi personalizzati

Quando hai finito di creare tutti i campi personalizzati, aggiungili al modulo di registrazione alla cassa.

Vai su ProfilePress > Impostazioni > Generali > WooCommerce > Campi di registrazione alla cassa e i campi appena creati dovrebbero apparire come un menu a discesa. Selezionali .

Nella sezione successiva (es. Campi di registrazione obbligatori), puoi inserire i campi personalizzati che vuoi rendere obbligatori.

Campi di registrazione alla cassa

Moduli di registrazione e accesso personalizzati per il mio account

Con ProfilePress hai la possibilità di impostare un modulo di registrazione e login personalizzato. Dovrai prima creare i moduli sul tuo sito Web WordPress. Segui semplicemente i passaggi che abbiamo trattato in "Come creare moduli WordPress personalizzati".

Quindi vai su ProfilePress > Impostazioni > Generali > WooCommerce > Modulo di accesso al mio account e seleziona il nuovo modulo di accesso appena creato.

Quindi vai su Modulo di registrazione del mio account e seleziona il nuovo modulo di registrazione appena creato.

Modulo di accesso al mio account

Di seguito è riportata un'anteprima di come potrebbe apparire nella pagina Il mio account di WooCommerce.

Il mio account

Questo è tutto, gente. Con ciò, siamo giunti alla fine di questo tutorial.

Pensieri finali

Creare una registrazione WordPress personalizzata e il modulo di accesso è un'ottima idea. Puoi aggiungere campi personalizzati, raccogliere più dati degli utenti e progettare il modulo in modo che sembri adatto al tuo marchio.

Sebbene ci siano molti plug-in là fuori che ti aiuteranno a creare moduli sul tuo sito Web WordPress, abbiamo riscontrato che ProfilePress è il miglior plug-in di registrazione utente e modulo di accesso. È molto facile da usare e si integra con i negozi WooCommerce.

  • È stato utile ?
  • Si No