Vuoi personalizzare la pagina di accesso sul tuo sito WordPress? Con WPForms, hai molti modi per stilizzare i tuoi moduli di accesso, senza bisogno di alcuna codifica!

In questo post, ti mostreremo 7 diversi esempi di pagine di accesso di siti popolari e come ricrearli. Ti guideremo attraverso il processo di creazione di ciascun modulo con pochi clic del mouse, nello stesso stile degli esempi che presentiamo qui.

Iniziamo!

Crea ora la tua pagina di accesso

Cosa scrivere su una pagina di accesso?

La tua pagina di accesso probabilmente contiene alcuni campi in cui gli utenti digitano il loro nome utente, indirizzo email, password e altro.

La pagina di accesso del tuo sito è un luogo in cui gli utenti del sito web inseriscono le proprie credenziali per accedere al tuo sito. Questi visitatori potrebbero avere un account sul tuo sito o un altro motivo per dover accedere al tuo sito web.

Probabilmente vorrai includere anche una qualche forma di testo sulla tua pagina di accesso, al fine di informare o guidare gli utenti del tuo sito web su come accedere al sito. Potresti anche aggiungere immagini come loghi e illustrazioni al tuo accesso, e potresti optare per funzionalità di sicurezza aggiuntive per evitare che spam indesiderati intasino la tua pagina di accesso.

7 Esempi di pagine di accesso

1. Modulo di accesso semplice

Questa pagina di accesso sul sito web di HubSpot è abbastanza basilare e senza molti dettagli inclusi nel modulo. Il modulo consiste semplicemente in un campo per l'email, una password, una casella di controllo e un pulsante di accesso.

La cosa di un modulo come questo è che è un po' come le fondamenta di tutti gli altri esempi di moduli di accesso. Ha gli elementi più basilari necessari per una pagina di accesso.

E, se preferisci, anche la tua pagina di accesso può essere semplificata così. WPForms è il miglior plugin per la creazione di moduli per WordPress, e rende super facile aggiungere una pagina di accesso personalizzata al tuo sito web.

Innanzitutto, dovrai installare WPForms e iscriverti al Piano Pro per accedere all'addon User Registration.

Dopo aver inserito la tua chiave di licenza nelle impostazioni di WPForms, vai su WPForms » Addons nella tua dashboard. Scorri gli addon disponibili per trovare l'addon User Registration, che installerai anche tu. Assicurati di attivare l'addon una volta installato.

Ora sei pronto per creare il tuo modulo di accesso. Vai su WPForms » New e trova il modello User Login Form tra i modelli Addon disponibili. Fai clic sul pulsante Use Template per selezionare questo modello e aprire il generatore di moduli.

Il generatore di moduli WPForms rende facile modificare questo modello predefinito per adattarlo alle tue esigenze. Troverai un'ampia selezione di campi modulo che coprono praticamente qualsiasi elemento desideri nel tuo modulo online. Tutto ciò che devi fare è semplicemente trascinare e rilasciare ogni campo nella posizione desiderata.

Vedrai che il modulo User Login Form ha già caricato i campi necessari.

Ma, come tutti i modelli di WPForms, questo modulo è altamente personalizzabile, quindi puoi aggiungere e modificare campi nel tuo modulo in diversi modi.

Per questo modulo, modifichiamo il pulsante Invia in fondo al modulo in modo che legga 'Accedi' come l'esempio della pagina di accesso di HubSpot.

Fai semplicemente clic sul pulsante per espandere le sue impostazioni.

Quindi, per cambiare il testo del pulsante, apri la scheda Generale e scorri fino alla casella Testo del pulsante di invio.

Ora, digita ciò che desideri che il pulsante legga, ad esempio 'Accedi'.

Guardando di nuovo il modulo, il pulsante in fondo al modulo si allinea meglio alla natura di accesso di questa pagina.

Ed è tutto ciò che devi fare per creare un modulo di accesso di base come quello utilizzato nella pagina di accesso di HubSpot.

Da qui, procedi e Salva questo modulo.

Una volta salvato, questo modulo sarà disponibile per l'uso nella pagina Tutti i moduli di WPForms nella tua bacheca di WordPress.

Ora hai un semplice modulo di accesso che puoi pubblicare rapidamente sul tuo sito, o che potresti usare come base per creare pagine di accesso più dettagliate. Questi sono i passaggi di base richiesti per tutti gli esempi di pagine di accesso trattati qui.

2. Modulo di accesso con testo istruttivo

Dai un'occhiata alla pagina di accesso di WordPress.org. Come il primo esempio che abbiamo trattato, anche questo è abbastanza basilare.

Ma ha un frammento di testo istruttivo in alto, e anche il tuo modulo può averlo.

Come abbiamo menzionato, ogni modulo creato qui richiede prima il modello Modulo di accesso utente, compreso questo. Procedi e seleziona di nuovo il modello.

Quindi, nell'editor di moduli, trascina il campo Contenuto in cima al modulo e rilascialo lì.

Come abbiamo detto prima, puoi trascinare e rilasciare questo campo sul tuo modulo ovunque desideri.

Ma per assomigliare al testo istruttivo nella pagina di accesso sopra, mettiamo il campo in cima.

Fai clic sul campo per aprire le sue opzioni personalizzabili, che si trovano sul lato sinistro dello schermo. Quindi, usa l'editor di testo per digitare il testo istruttivo che desideri visualizzare in questo campo.

Come l'esempio sopra, potresti istruire gli utenti su come inserire le loro informazioni per accedere al tuo sito web.

Molte opzioni sono a portata di mano grazie all'editor di testo, con stili di font personalizzabili, colori e altro ancora disponibili all'interno di questo campo.

Ad esempio, guarda di nuovo la pagina di accesso di HubSpot dall'esempio 1. Nota che c'è un brevissimo frammento di testo istruttivo. Il testo istruttivo dice: 'Non hai un account? Iscriviti' e fornisce un link a una pagina in cui gli utenti possono creare un account.

Anche questo è possibile con l'editor di testo del campo Contenuto sul tuo modulo.

Per prima cosa, digita il tuo testo istruttivo e evidenzia la porzione che desideri collegare. Quindi, fai clic sull'icona del link nella barra degli strumenti dell'editor di testo.

Ora, inserirai l'URL della pagina su cui desideri che gli utenti atterrino. Fai clic su OK al termine.

Ed ecco fatto! Ora hai testo istruttivo e un link sul tuo modulo.

Come sempre, salva il tuo modulo per dopo o incorporalo in una pagina. Condivideremo i dettagli su come pubblicare quando sarai pronto per la messa online della pagina di accesso sul tuo sito alla fine di questo post.

3. Modulo di accesso con immagine di intestazione

Un altro modo per personalizzare il Modulo di Accesso Utente per la tua pagina di accesso è aggiungere un'immagine di intestazione a tua scelta. L'utilizzo di un'immagine in cima al tuo modulo è un buon modo per personalizzare il tuo modulo o completare lo stile del tuo sito web.

Per aggiungere un'immagine di intestazione, utilizzerai ancora una volta il campo Contenuto e il modello Modulo di Accesso Utente. Trascina e rilascia questo campo in cima al tuo modulo come prima.

Ma questa volta, fai clic sul pulsante Aggiungi Media sopra l'editor di testo.

Ora, caricherai un'immagine a tua scelta, che apparirà sopra il testo nell'editor di testo.

Puoi anche eliminare il testo questa volta, se lo desideri, e lavorare solo con l'immagine.

Fai clic sull'immagine per accedere alle sue Impostazioni di Visualizzazione e posiziona l'immagine come preferisci.

Per far sì che l'immagine nel nostro esempio agisca come una vera immagine di intestazione, centreremo l'allineamento e selezioneremo la versione a dimensione intera. Potresti regolare queste impostazioni alcune volte per capire cosa preferisci.

Assicurati di fare clic sul pulsante blu Aggiorna per applicare eventuali modifiche.

Puoi anche esplorare le altre schede delle impostazioni per ulteriori opzioni, come la modifica della Dimensione Campo nella scheda Avanzate.

Prova la dimensione del campo Grande per vedere la tua immagine visualizzata ancora più grande in cima al tuo modulo, in vero stile immagine di intestazione.

Ancora una volta, assicurati di salvare il tuo modulo per dopo. E per altri suggerimenti relativi a questo esempio, consulta questo post completo su come aggiungere un'immagine di intestazione ai tuoi moduli.

4. Modulo di accesso con logo aziendale

Diamo un'occhiata alla pagina di accesso di SendLayer. In cima al modulo, sopra il testo istruttivo che abbiamo trattato in precedenza, si trova il logo del sito web.

Puoi aggiungere un logo anche al tuo modulo, utilizzando ancora una volta il campo Contenuto sul tuo Modulo di Accesso Utente.

Ricordi come hai usato il campo Contenuto per caricare un'immagine di intestazione? Perché non usare un processo simile per visualizzare un logo? Grazie al generatore di moduli, hai molteplici opzioni per posizionare i loghi sul tuo modulo.

Trascina semplicemente il campo Contenuto dove lo desideri sul tuo modulo.

Per assomigliare all'esempio sopra, posizioniamo il logo in cima al modulo. E poiché questo è un po' come un'immagine di intestazione, un logo in stile orizzontale potrebbe essere più adatto qui.

Ricorda di fare semplicemente clic sul pulsante Aggiungi Media del campo Contenuto per caricare il tuo logo.

E non dimenticare le impostazioni aggiuntive. Potresti voler centrare il logo, renderlo a dimensione intera o cambiare la dimensione del campo nelle impostazioni Avanzate.

Puoi anche modificare il testo sotto il logo come abbiamo trattato nell'esempio del testo istruttivo, il che farebbe sì che il tuo modulo qui assomigliasse molto all'esempio.

La tua pagina di accesso ora ha il tuo logo chiaramente visualizzato sul tuo modulo. Sentiti libero di aggiungere un altro logo in fondo, o ovunque altro tu voglia trascinare il campo Contenuto!

5. Modulo di accesso con illustrazione

Ora prendiamo nota della pagina di accesso di TrustPulse. Questo modulo di accesso presenta le credenziali inserite su un lato dello schermo con un piccolo logo sopra, e una grande illustrazione visualizzata sull'altro lato.

Anche tu puoi creare un modulo simile utilizzando il campo Layout e il campo Contenuto insieme.

Per prima cosa, trascina il campo Layout sul tuo modulo di accesso utente.

Al momento non ha molta importanza dove trascini e rilasci il campo Layout, perché alla fine trascinerai i campi precaricati del modulo all'interno del campo Layout stesso.

Per ora, trasciniamolo semplicemente in cima al modulo per rimanere organizzati. Selezionerai anche l'orientamento delle colonne all'interno del layout, che determinerà le dimensioni e il posizionamento del contenuto in questo campo.

Ora, trascina il campo Contenuto nella prima colonna del campo Layout sul tuo modulo, in modo da poter visualizzare qui un logo come nell'esempio di TrustPulse.

Usa il pulsante Aggiungi media per caricare ancora una volta il tuo logo, e poi assicurati che le impostazioni dell'immagine lo orientino e lo ridimensionino come desideri.

Successivamente, trascina e rilascia gli altri campi del modulo su quel lato del campo Layout.

Semplicemente afferra ogni campo con il mouse, trascinalo nella colonna Layout e rilascialo. Il campo Email, il campo Password e la casella di controllo saranno ora nella colonna sinistra del tuo modulo.

Ora, aggiungerai contenuto all'altra colonna nel campo Layout.

Seleziona di nuovo il campo Contenuto e trascinalo nella colonna più grande sul lato destro del tuo modulo.

Ora puoi aggiungere un'illustrazione a tua scelta da visualizzare ampiamente su questo lato del tuo modulo.

Fai clic sul pulsante Aggiungi media come hai fatto sull'altro lato per caricare un'illustrazione.

E, ancora una volta, assicurati di regolare le impostazioni del campo per personalizzare le dimensioni e il posizionamento della tua illustrazione.

Per una grande illustrazione come nell'esempio, potresti voler rimuovere qualsiasi testo aggiuntivo dal campo Contenuto.

E ora il tuo modulo presenta il piccolo logo e le voci delle credenziali su un lato, e una grande illustrazione visualizzata sull'altro lato.

Come sempre, dovrai salvare questo modulo per conservarlo in WPForms sulla tua dashboard, e poi incorporarlo in una pagina di WordPress quando sarai pronto per usarlo.

6. Modulo di accesso con CTA

Successivamente, esamineremo la pagina di accesso di ExactMetrics, che è in qualche modo simile all'accesso precedente, ma con un pulsante di invito all'azione su un lato del modulo invece di un'illustrazione.

Un lato ha un piccolo logo, l'inserimento dell'email, l'inserimento della password e il pulsante di accesso, e l'altro lato ha parecchio testo, seguito da una CTA cliccabile.

Per creare un aspetto simile con il tuo modulo, devi semplicemente seguire i passaggi che abbiamo trattato nell'esempio precedente: aggiungendo prima il campo Layout al tuo modulo di accesso utente e trascinando i campi su un lato o colonna del layout.

Ricorda, devi semplicemente trascinare il campo Contenuto nel Layout per caricare il tuo logo, e poi trascinare anche i campi rimanenti sul modulo su quel lato del Layout.

Ma poi, per l'altro lato del campo Layout, nella seconda colonna, non preoccuparti di caricare nulla. Modificherai semplicemente il testo già presente.

Nota come parte del testo precaricato sia più grande e in grassetto rispetto a ciò che si trova sotto, simile allo stile del testo nell'esempio.

Questo rende facile modellare il tuo testo come quello dell'esempio, ma non dimenticare tutti gli altri modi per utilizzare l'editor di testo a tuo vantaggio. Puoi cambiare la dimensione, l'orientamento, il colore del testo e altro ancora, come ritieni opportuno.

E all'interno dell'editor di testo del campo Contenuto, puoi persino inserire uno snippet di codice per creare un pulsante CTA.

Fai clic sulla scheda Testo della casella dell'editor di testo per copiare e incollare il codice che desideri utilizzare per creare un pulsante.

Puoi modificare il tuo snippet di codice per personalizzare l'aspetto del tuo pulsante CTA come preferisci.

Ora hai un pulsante CTA sul tuo modulo!

Ancora una volta, dovrai salvare questo modulo e poi incorporarlo in una pagina WordPress quando sarai pronto per utilizzarlo.

7. Modulo di accesso con reCAPTCHA

Ora che abbiamo esplorato i modi più complessi per personalizzare un modulo di accesso, diamo un'occhiata a uno degli elementi di sicurezza più semplici da aggiungere al tuo modulo, ovunque tu voglia.

La verifica reCAPTCHA aiuta a proteggere il tuo sito WordPress da bot e spam che potrebbero tentare di utilizzare i tuoi moduli per accedere al tuo sito.

Come puoi vedere, lo utilizziamo sulla nostra pagina di accesso qui su WPForms.

Puoi aggiungere facilmente un campo reCAPTCHA anche a uno qualsiasi dei tuoi moduli di accesso. Ma prima, dovrai configurarlo nelle impostazioni di WPForms.

Dal tuo pannello di controllo WordPress, vai su WPForms e poi su Impostazioni. Quindi, assicurati di essere nella schermata CAPTCHA.

Seleziona l'opzione reCAPTCHA dal centro della schermata.

Quindi sceglierai il tipo di verifica reCAPTCHA che desideri utilizzare.

Selezioniamo il reCAPTCHA con casella di controllo v2.

Successivamente, dovrai inserire una Chiave del sito e una Chiave segreta in questa pagina delle impostazioni, fornite da Google. Per ricevere queste chiavi, devi seguire il processo di configurazione nella console di amministrazione reCAPTCHA di Google.

Per ulteriori informazioni, insieme a un tutorial completamente dettagliato su come farlo, consulta il nostro articolo su  come configurare e utilizzare reCAPTCHA con i tuoi moduli WordPress.

Non dimenticare di fare clic su Salva in fondo a questa schermata per applicare queste impostazioni al tuo campo reCAPTCHA.

Ora sei pronto per aggiungere la verifica reCAPTCHA al tuo modulo.

Tornando alla pagina di creazione del modulo, devi solo fare clic sul campo reCAPTCHA per abilitarlo sul tuo modulo di accesso utente.

E questo è tutto! Il tuo modulo di accesso è ora protetto da bot e spam che altrimenti potrebbero infiltrarsi nel tuo sito.

Inoltre, l'icona reCAPTCHA viene quindi visualizzata sul tuo modulo, il che indica ai tuoi utenti che le loro informazioni sono sicure.

Come aggiungere una pagina di accesso personalizzata a WordPress

La cosa utile del generatore di moduli di WPForms è che tutte le opzioni personalizzabili e le scelte di stile ispirate da questi esempi possono essere create direttamente sul modulo stesso.

Tuttavia, alcuni degli stili ottenuti in questi esempi potrebbero essere il risultato di modifiche aggiuntive sulla pagina di accesso.

Quindi, per ulteriori suggerimenti approfonditi su come ottenere ancora più stile con WPForms sulla tua pagina WordPress, consulta questo articolo completo su come stilizzare i moduli con CSS.

Inoltre, tieni presente che con tutti i moduli creati e gli esempi trattati qui, dovrai salvare il modulo una volta terminata la modifica. Poi, forse più tardi, se necessario, potrai incorporare il modulo in una pagina e pubblicarlo quando sarai pronto.

Oppure, dal generatore di moduli, puoi procedere e incorporare subito il tuo modulo in una pagina.

Facendo clic su Incorpora puoi incorporare il tuo modulo di accesso in una pagina già creata per il tuo sito web, oppure puoi creare subito una nuova pagina per questo modulo di accesso.

Se decidi di creare una nuova pagina, dovrai darle un nome, proprio come le altre pagine del tuo sito web sono nominate, in modo da poterle trovare facilmente nella dashboard di WordPress.

Fai clic su Iniziamo! per continuare. WPForms aggiungerà automaticamente il tuo modulo di accesso alla tua nuova pagina.

Dopo che il tuo modulo è stato incorporato, puoi sempre modificare alcune cose aggiuntive sulla pagina WordPress stessa accedendo alle impostazioni del blocco WPForms e modificando altri elementi di stile della pagina.

Dai un'occhiata a questo articolo per altre idee su come modificare e personalizzare la tua pagina di accesso WordPress.

E ricorda che, come tutte le tue pagine WordPress, dovrai pubblicare la pagina con il modulo incorporato per renderla attiva sul tuo sito web.

Puoi anche visualizzare in anteprima la pagina prima di pubblicarla, o salvare la bozza per dopo.

Per ulteriori letture su questo argomento, consulta questo tutorial che copre come visualizzare moduli di accesso e registrazione.

Crea ora la tua pagina di accesso

Successivamente, Crea un Modulo di Registrazione con PayPal

Ora che hai imparato tutto sulla creazione di moduli di accesso per il tuo sito web WordPress, perché non provi a creare un modulo di registrazione WordPress con PayPal? In questo modo, potrai registrare gli utenti del tuo sito web e iniziare a raccogliere pagamenti.

Se desideri una stampa delle tue voci del modulo, ti consigliamo di consultare la nostra guida su come stampare moduli WordPress in PDF.

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.