Le forme di iscrizione sono troppo comuni quando si creano nuove applicazioni Web o social network. La trazione da registrazioni degli utenti può davvero aumentare la tua autostima su un progetto quando si tratta di lanciare un nuovo sito web. Ma cosa puoi fare per migliorare l'esperienza di registrazione e, auspicabilmente, acquisire più utenti interessati?
In questo tutorial voglio dimostrare come possiamo creare un modulo di registrazione guidato, offrendo suggerimenti agli utenti mentre compilano ciascun campo. Ho incluso alcuni dei miei jQuery personalizzati insieme a un plugin chiamato Progression.js. Questo è uno strumento potente che offre un suggerimento passo passo con suggerimenti per indirizzare gli utenti lungo la strada. Sentiti libero di scaricare una copia del mio codice sorgente e di dare un'occhiata alla demo del campione qui sotto.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Per prima cosa dobbiamo scaricare una copia del plugin Progression.js e includerla nell'intestazione del sito web. La progressione utilizza un singolo file JS con una dipendenza dalla libreria jQuery, insieme ai propri stili CSS personalizzati. Prendi una copia dal repository ufficiale di Github che include anche la sua mini configurazione demo.
All'interno del corpo della pagina ho creato un nuovo modulo con l'ID #registerform. Questo è l'elemento di pagina a cui ci colleghiamo utilizzando la funzione Progression, insieme a un numero di parametri interni. È interessante notare che le descrizioni dei comandi appariranno lungo l'intera larghezza del modulo stesso, non necessariamente la lunghezza dei campi di input. Quindi vuoi assicurarti che tutto sia allineato correttamente con i CSS da qualunque parte si vedano i suggerimenti (a sinistra oa destra).
A ciascuno dei campi di input è associato un attributo di dati HTML5 in più che include una stringa di testo per il suggerimento. Questo è etichettato con Dati-helper e viene prelevato automaticamente dal plugin. Ho incluso un tabindex attributo su ogni campo che aiuta anche gli utenti mobili a passare rapidamente da un campo all'altro.
Sebbene questo modulo sia in qualche modo basilare, illustra chiaramente i pattern che è possibile utilizzare per incorporare il plug-in. Ho anche incluso alcuni dei miei più piccoli controlli logici jQuery che determinano se il nome utente è abbastanza lungo, se l'indirizzo e-mail è valido e se entrambi i campi password corrispondono. Questi codici non sono correlati al plug-in, ma possono comunque essere utili per gli sviluppatori che creano tipi di moduli Web simili.
Page Design con CSS
Un altro pezzo importante del mio codice può essere trovato nel styles.css foglio di stile. Ho impostato il reset delle pagine di default insieme al core wrapper, ma ricordo come anche il modulo deve avere una larghezza esatta uguale alla lunghezza dei campi di input.
Il #registerform l'elemento è bloccato a una larghezza intera di 512 pixel, mentre i campi etichetta / input interni hanno una larghezza di 160px + 340px (totale di 500). I campi label e input lasciano un po 'di spazio in più per il padding in modo che il tooltip non sia adatto a nulla. Anche il .basetxt la classe viene applicata a ciascun input che utilizza le transizioni CSS3 per colorare il bordo e l'effetto ombra della casella.
Un altro pezzo importante riguarda il messaggio di errore p.errmsg. Puoi trovare questi sotto tre dei quattro campi che riguardano tutti i controlli di validazione di jQuery. I messaggi sono nascosti per impostazione predefinita utilizzando display: nessuno e quindi visualizzato usando il metodo .slideDown () di jQuery.
Questi ultimi blocchi di codice definiscono gli stili pulsante di invio, insieme ad alcuni progetti personalizzati per la descrizione comando. Potresti semplicemente modificare il file CSS del plugin principale, ma questo rende più difficile l'aggiornamento in futuro. Inoltre può essere difficile sapere esattamente cosa hai modificato e ripristinare i cambiamenti sarebbe quasi impossibile. Se vuoi sovrascrivere alcuni degli stili di plugin, scegli il progression.min.css e scopri quali classi avrai bisogno di indirizzare.
jQuery Progression & Validation
Nella parte inferiore della pagina indice prima della chiusura tag Ho aperto una nuova sezione JavaScript. Ciò include l'inizializzazione di Progression.js oltre ad alcuni dei miei controlli di convalida. È un po 'contorto, ma lo spezzerò in pezzi più piccoli.
Stiamo prendendo di mira il modulo di registrazione che chiamiamo .progressione() con un numero di parametri interni. Penso che la maggior parte (se non tutti) di questi parametri possano parlare da soli e la documentazione del plugin possa anche spiegare molto. showProgressBar è uno che ho disattivato in questo esempio perché ritengo che non funzioni bene usando solo 4 ingressi. Ma fornisce un senso di soddisfazione dell'utente quando si richiede un numero elevato di campi, poiché gli utenti possono effettivamente vedere se stessi andando verso il completamento.
Anche tooltipPosition e tooltipWidth potrebbe essere utile personalizzare e vedere come si adattano meglio alle tue forme. Le altre impostazioni come colori e dimensioni dei caratteri sono davvero facili da manipolare e adattarsi a qualsiasi progetto. Notare anche che ho incatenato un gestore di eventi .submit () a questo modulo. Pertanto, ogni volta che viene inviato il modulo, chiamiamo .preventDefault () sull'evento di invio per impedire che accada. Questo perché il mio modulo non ha un vero attributo di azione, ma per un modulo di lavoro dal vivo è necessario rimuovere completamente questo gestore di eventi concatenato.
Ciascuno dei 3 blocchi di convalida finali controllerà ogni volta che l'utente spegne un campo di input. Questo primo pezzo di codice viene eseguito dopo che l'utente si concentra e quindi sfoca il campo del nome utente. Se la lunghezza del nome utente è inferiore a 6 caratteri, viene visualizzato il messaggio di errore sottostante. Altrimenti se il nome utente è di 6 caratteri o più, possiamo nascondere il messaggio di errore, supponendo che sia già visualizzato.
Questi ultimi due controlli di convalida si basano sullo stesso tipo di logica. Il primo è il campo di input e-mail che utilizza una stringa regex per verificare la presenza di un indirizzo e-mail valido. Ho trovato questa soluzione su una domanda relativa allo Stack Overflow che fornisce una sintassi di posta elettronica semplice ma efficace. Questo esempio dovrebbe essere più che sufficiente per gestire qualsiasi indirizzo di posta elettronica comune.
Osservando la convalida della password si noterà che ciò non si verifica fino a quando l'utente non sfuma il campo della password secondaria. Questo è quando l'utente deve ridigitare la propria password e controllerà contro entrambi i valori per assicurarsi che siano uguali e non completamente vuoto / vuoto. Lo faccio controllare per assicurarmi che la password sia lunga almeno 1 carattere, ma potresti rendere le restrizioni più difficili se necessario.
Ci sono alcuni plugin jQuery là fuori che effettivamente aiutano a eseguire questi tipi di controlli di convalida. Ma se sei a tuo agio con lo scripting, non fa male scrivere semplicemente le tue regole da zero.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Gli sviluppatori di jQuery hanno creato un certo numero di plugin per facilitare il progresso del modulo.I moduli di registrazione sono spesso una sfida difficile, perché richiedono una grande quantità di informazioni. L'applicazione di questi suggerimenti sulla progressione può davvero incoraggiare gli utenti a completare e completare rapidamente il processo di registrazione senza molte esitazioni. Come sempre il mio codice tutorial è gratuito da scaricare e implementare all'interno dei tuoi progetti web. Inoltre, se avete domande o suggerimenti sentitevi liberi di condividere con noi nell'area di discussione qui sotto.