Fornire ai tuoi clienti semplici moduli di iscrizione e registrazione sul tuo sito Web è essenziale per catturare i lead, far crescere la tua lista e-mail e aumentare le vendite complessive.
C’è solo un problema: HTML.
HTML5 è il codice standard utilizzato per far funzionare la maggior parte delle pagine web. E ‘ il linguaggio di internet. Ma come ogni linguaggio di programmazione-da Javascript e jquery a PHP e CSS3-c’è una curva di apprendimento ripida, soprattutto se non hai mai toccato alcun codice.
Non temere. Siamo qui per aiutare. Potremmo essere in grado di trasformare in Bill Gates durante la notte, ma con l’aiuto di alcuni esempi utili, entro la fine di questo tutorial, sarete pronti a creare un modulo di registrazione di base utilizzando HTML in pochissimo tempo.
Before Prima di iniziare: Vuoi evitare il fastidio di usare HTML? Con un generatore di moduli come Paperform, puoi risparmiare tempo e creare un modulo di registrazione potente e professionale in pochi minuti.
5 Passi per creare un modulo di registrazione HTML
Sei occupato, lo sappiamo. Ci sono un trilione di articoli da leggere. Film Netflix da guardare. Programmi TV per abbuffarsi. Quindi entriamo direttamente nella guida in cinque passaggi per creare un modulo di registrazione in HTML.
Punto 1. Scegli un editor HTML
Proprio come hai bisogno di un word processor per creare un documento di testo, hai bisogno di un editor di testo per creare codice HTML. Questi strumenti di sviluppo convertono il codice strano e meraviglioso digitato in un modulo di registrazione.
Ci sono decine (se non centinaia) di editor HTML sul mercato, la maggior parte dei quali tendono ad offrire funzionalità simili. Non ti annoieremo con i dettagli, ma ci sono alcune cose chiave che ti renderanno la vita più facile:
Rilevamento degli errori: Evidenzia automaticamente gli errori di sintassi per semplificare le correzioni.
Completamento automatico: suggerisce elementi HTML rilevanti in base alle modifiche precedenti (consente di risparmiare un sacco di tempo con codice lungo).
Punti salienti della sintassi: applica i colori a diversi tag HTML in base a determinate categorie per semplificare la lettura e l’ordinamento del codice.
Cerca e sostituisci: individua e sovrascrivi tutte le istanze di un particolare codice anziché modificarle singolarmente.
Se stai davvero entrando nella codifica, ci sono più funzionalità di cui preoccuparti, ma questo dovrebbe più che coprirti per questo semplice modulo di registrazione.
Quale applicazione si seleziona è una questione di preferenze personali. Vuoi qualcosa che è possibile utilizzare nel browser? Prova Codepen. Barebone? Notes++. Un’interfaccia utente minimalista e un campo di input intuitivo? Testo sublime fino in fondo.
Il nostro co-fondatore e residente codice-geek, Dean, giura di VS Codice.
“Da un punto di vista nerd VS Code si adatta perfettamente allo stack tecnologico di Paperform e ha grandi plugin di sviluppo remoto che amo. È ottimo anche per le cose HTML e super personalizzabile se ti piace che i tuoi strumenti siano belli pur avendo tutte le funzionalità di cui hai bisogno.
Non c’è bisogno di fissarsi troppo su questo. Purtroppo, non c’è nessun editor HTML che genererà un modulo di registrazione per voi, non importa quanto grande possa essere. Quella parte è tutta su di te.
Punto 2. Crea il tuo file HTML
Il passo successivo è quello di dire al vostro editor di testo che si intende creare un file HTML. Fate questo creando un nuovo file e poi salvarlo con il “.estensione html”.
Ad esempio, ” myform.HTML”. Una volta che hai segnalato all’editor che stai creando codice HTML, dovrebbe generare automaticamente il seguente codice per te:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Suggerimento: Alcuni editor non si riempiranno automaticamente. Non fa niente. Basta copiare e incollare questo codice sopra e avrà lo stesso effetto.
Punto 3. Aggiungi campi di testo e crea il tuo modulo
Va bene. È ora di iniziare ad aggiungere il codice pertinente e trasformare l’HTML barebone in un modulo di registrazione.
Ora se sei qui solo per il codice che capiamo. Troverete tutto il necessario un paragrafo o due di seguito. Sentitevi liberi di saltare avanti. 👇
Ma se siete interessati a imparare un po ‘ su ciò che si sta inserendo in realtà significa, ci permettono un interludio tutorial HTML a fuoco rapido.
Un modulo HTML è costituito da “elementi del modulo”. Queste sono cose come caselle di testo, pulsanti di opzione, caselle di controllo e menu a discesa che rendono effettivamente possibile per la gente di interagire con il modulo dal vivo.
Ogni elemento ha il proprio tag specifico. Ad esempio, il tag HTML <form> definisce il codice come un modulo, mentre <textarea> può essere utilizzato per raccogliere gli input dell’utente.
Questi elementi sono come le scarpe: vengono sempre in coppia. Tutti i tag che si desidera includere nel modulo devono essere inseriti tra i tag open <form> e closed </form>.
Va bene questo è il Sparknotes. Ora per il codice devi effettivamente inserire. Qui:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>Questo codice HTML (di base) produrrà qualcosa che assomiglia a questo:
Non è esattamente la cosa più bella del mondo, vero? Ma hey, hai chiesto come creare un modulo di registrazione HTML. Non sparare al messaggero.
Il tag < tr>indica di organizzare le risposte in una riga, mentre < td> (che sta per table data) indica che si desidera acquisire qualsiasi tipo di rispondenti. In questo caso abbiamo aggiunto due campi per semplicità:
- Inserisci l’indirizzo email
- Inserisci le password
Non c’è nulla che ti impedisca di aggiungere campi aggiuntivi. I tipi di input vanno da numeri e date a colori o persino immagini. Basta copiare il codice qui sotto e inserire il tipo di input che si desidera. W3Schools ha una grande lista per guidarti.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Suggerimento: selezionare il tipo di input corretto è fondamentale. Indica al modulo come deve essere visualizzato il testo sullo schermo. Ad esempio, l’ultima cosa che vogliamo è che la password di qualcuno sia visibile quando la digita, quindi usiamo il tipo di input “password” per nasconderlo.
Punto 4. Aggiungi segnaposto
Un segnaposto è testo all’interno dei campi del modulo che richiede ai rispondenti di rispondere in un modo particolare. Viene utilizzato principalmente come spinta nella giusta direzione, ma è anche una strategia utile per rendere le forme più coinvolgenti.
Ad esempio, supponiamo che tu stia aggiungendo un campo nome semplice al tuo modulo. Potresti digitare ” inserisci nome “e farlo con esso, oppure potresti abbellire le cose scrivendo” Bruce Wayne “per un po’ di talento.
Qualunque sia la strategia, è abbastanza semplice aggiungere segnaposto al modulo di registrazione HTML. Dopo il tipo di input, inserire “segnaposto=” con il testo che si desidera visualizzare.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>L’immissione di questo codice produrrà un modulo come questo:
Pretty barebone. Ma funziona. È possibile creare opzioni aggiuntive per i clienti di selezionare i loro dati demografici come età o sesso utilizzando un codice simile a quello di cui sopra.
Per creare un campo di genere, inserisci i seguenti valori nel tuo codice (a destra sopra l’ultimo tag </table>). Aggiungeremo anche un numero di telefono e l’opzione ‘Soggetto’ a discesa.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>Questo trasformerà il campo dati in caselle di controllo—una per maschio e una per femmina. Ora ecco come apparirà l’iterazione finale del tuo modulo di registrazione HTML:
Non è esattamente la grande rivelazione che ti aspettavi, giusto? Potete immaginare qualcuno che cerca il vostro business su Google e di essere incontrato con questa pagina? O condividere questo sui social media?
È sicuro dire che questo tipo di modulo di accesso HTML non incoraggerebbe esattamente nessuno a registrarsi per la tua attività. Ci sarebbe una schiacciante una domanda sulla loro mente, che è probabilmente la stessa che hai. . .
Perché il mio modulo di registrazione HTML è così brutto?
Poiché non riesci a vedere il tuo modulo HTML non è particolarmente attraente. E ‘ un brutto anatroccolo. Il che va bene—non possiamo essere tutti Margot Robbie—ma non invoglia esattamente la gente a compilarlo.
E questo è il problema. I moduli HTML tendono ad essere:
- Noioso
- Noioso
- Difficile da personalizzare
- Goffo da gestire
Questo è dovuto alla natura semplice dell’HTML. È un framework che aiuta a completare le azioni di forma necessarie, tuttavia, certamente non vincerà alcun premio di design.
La soluzione semplice a questo problema sta usando un generatore di moduli online dedicato come Paperform per evitare il sollevamento pesante di HTML o CSS. Puoi creare bellissime registrazioni, moduli di contatto e pagine di destinazione complete—tra centinaia di altre creazioni—in pochi minuti senza una singola riga di codice.
Ma forse sei davvero impostato sull’intera cosa HTML (o forse sei solo un pollone per punizione). In entrambi i casi, se sei davvero impegnato nel tuo modulo di registrazione HTML, puoi migliorarne l’aspetto utilizzando i CSS.
Punto 5: Modifica il tuo modulo di registrazione HTML con CSS
CSS è un linguaggio di programmazione utilizzato per lo stile di un documento HTML. Personalizza il modo in cui gli elementi HTML vengono visualizzati sullo schermo e ti consente di personalizzare tutto, dai colori dei caratteri e l’opacità all’aggiunta di un’immagine di sfondo o al collegamento a un’altra pagina con un tag <href>.
Ora, saresti qui tutta la settimana se elencassimo ogni proprietà CSS. Potremmo farlo e cercare di aumentare il SEO di questa pagina, ma non è divertente per nessuno. Se stai cercando un elenco completo, ti consigliamo l’elenco di riferimento CSS di W3School.
Per il bene del nostro tutorial, daremo il nostro modulo di registrazione HTML un rapido restyling con CSS. Personalizzeremo il colore del testo,lo stile del carattere e modificheremo i margini per un aspetto (leggermente) migliore.
Tip Suggerimento: Il modo più comune per aggiungere CSS a una pagina HTML è con un file di foglio di stile esterno collegato all’elemento. Questo foglio di stile viene creato nello stesso editor di testo e salvato con “.estensione css”.
Ecco il codice che useremo:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }E con quella magia stilistica, il tuo modulo finirà per assomigliare a quello qui sotto. È un po ‘ come schiaffeggiare il rossetto su un maiale, ma è meglio in una piccola misura.
Perché un modulo di registrazione HTML non è la soluzione migliore
Mentre imparare a codificare e creare moduli di registrazione di base è un’abilità divertente da imparare, dovresti seriamente riconsiderare il loro utilizzo per qualsiasi scopo importante. Non cercare di avviarlo, non vale solo il tempo, lo sforzo e la frustrazione.
Se hai bisogno di un modulo di contatto per i tuoi clienti, un modulo di accesso per la tua attività o un modulo di registrazione degli studenti per il nuovo anno scolastico, qualsiasi soluzione incollata insieme a HTML e CSS finirà per sembrare non lucidata e poco professionale, specialmente se non hai alcuna abilità di codifica precedente.
Per fortuna c’è un altro modo per creare moduli di registrazione che è molto più facile, più veloce e più intuitivo: un generatore di moduli online come Paperform. Con la nostra piattaforma facile, si può essere installato e funzionante con una bella, forma di marca in pochi minuti.
Con Paperform non si ottiene solo un modulo HTML di base. Ottieni un’esperienza dinamica che ti consente di raccogliere qualsiasi tipo di dati di cui hai bisogno, da semplici dettagli di contatto a calcoli complessi e persino pagamenti. Nessuna competenza di progettazione necessaria.
Inoltre, la personalizzazione è semplice. Tweak colori e font e regolare l’interfaccia utente del modulo con pochi clic. Quindi, una volta che sei soddisfatto della tua nuova creazione, puoi incorporare il modulo sul tuo sito web, ospitarlo online gratuitamente o incorporarlo sul tuo sito WordPress con il nostro plugin WordPress.
Per mostrare quanto sia facile, abbiamo creato un modulo di registrazione dall’aspetto elegante:
Non hai voglia di costruire la tua creazione? Ecco a cosa serve la nostra libreria di oltre 600 modelli di moduli. Seleziona uno dei nostri modelli di registrazione, aggiungilo al tuo account con un clic e inizia a funzionare più velocemente di quanto tu possa bere il tuo espresso mattutino.
Un modulo di registrazione è solo l’inizio di ciò che puoi fare con Paperform. Provalo tu stesso con la nostra prova gratuita di 14 giorni—nessuna carta di credito richiesta.
Modulo di registrazione in HTML FAQ
Posso creare un modulo di registrazione HTML senza CSS?
Sì, ma non sarebbe bello. In realtà, sarebbe simile a qualcosa dai primi giorni di Microsoft. Per niente carina.
Come faccio a creare un modulo di registrazione HTML con il caricamento delle immagini?
Per aggiungere un campo di caricamento immagine utilizzare il tipo di input “file”.
Posso creare un modulo HTML senza usare una tabella?
Mentre il comando table aiuta con l’allineamento, è facile creare un modulo senza di esso. Basta inserire direttamente i tuoi input senza i comandi ‘ tr ‘ o ‘td’.
È possibile utilizzare un modulo di registrazione HTML per lo shopping online
Sì. Per creare un modulo di acquisto online includere i campi per le informazioni di contatto, indirizzo di spedizione, ID prodotto e punto di consegna. Le cose si complicano quando si raccolgono i pagamenti, motivo per cui raccomandiamo i semplici moduli di pagamento di Paperform.
Come faccio a creare una pagina di login e registrazione?
Abbiamo coperto come creare questi, ma la risposta è con un sacco di codice e tweaking. È molto più facile utilizzare un generatore di moduli online dedicato come Paperform.