Share
In questo tutorial vedremo un modo semplice per aggiungere forme dinamiche e flessibili ai tuoi siti web statici.
Immagina di aver appena creato un sito Web usando le pagine statiche, sia con l'aiuto di Jekyll o semplicemente usando alcuni file HTML, ma ora vuoi aggiungere un modulo di contatto. Puoi collegarti a un servizio online, installare qualcosa di precostruito sul tuo server o creare qualcosa da zero usando PHP. Ciò significa che sei completamente limitato nella progettazione o stai dedicando più sforzi a un unico modulo rispetto a quello che hai fatto per l'intero sito.
E se potessi utilizzare un servizio che ti dà il pieno controllo del modulo, ma non richiede di installare nulla sul tuo server? Inserisci Formspree, un servizio online che ti dà la possibilità di creare moduli HTML funzionali senza l'utilizzo di PHP o JavaScript.
Consentitemi di darvi un breve riassunto dei passaggi necessari per ottenere il proprio modulo attivo e funzionante.
La prima cosa di cui avrai bisogno è un modulo, che costruiremo da zero in HTML. La mia forma sarà un modo molto semplice per le persone di mettersi in contatto con me: avrò un campo per il loro nome, e-mail e il loro messaggio. Ecco il markup per il mio modulo:
Vedrai che ho aggiunto un Sottoscrivi inserire e avvolgere tutti i campi con a elemento.
Possiamo dare forma a questo modulo come vogliamo. Non c'è iframe o qualsiasi altra cosa per limitare ciò che sembra.
Affinché Formspree possa gestire il modulo, devi aggiungere il seguente attributo di azione al tuo elemento:
Nota che i campi Nome e Messaggio sono nominati in modo appropriato, ma ho usato lo speciale "_rispondi a"Valore per il campo email. Formspree riconoscerà questo valore di attributo e pertanto mi consentirà di rispondere direttamente all'e-mail che viene inserita nel modulo al momento dell'invio.
Posso anche aggiungere _Il prossimo ad un altro input nascosto per specificare quale URL desidero inviare agli utenti a uno che hanno inviato il modulo.
Per farmi sapere da dove proviene la presentazione, aggiungo una riga dell'oggetto. Posso farlo aggiungendo il seguente input nascosto:
Questo campo non verrà visualizzato quando un utente visualizza il modulo, ma il valore verrà utilizzato per la riga dell'oggetto quando ricevo una richiesta.
Built in Formspree è un metodo "honeypot" per la prevenzione dello spam. La tecnica honeypot è abbastanza semplice; nascondi un campo all'interno del tuo modulo che gli utenti non vedono, ma lo fanno gli spambots. Lo spambot riempirà il campo, mentre gli utenti non lo faranno. Qualsiasi invio con questo campo compilato sarà considerato spam.
Puoi usare questa tecnica aggiungendo quanto segue al tuo modulo:
È importante utilizzare un attributo di stile per nascondere il campo. Il browser degli utenti nasconderà il campo usando i CSS, ma lo spambot (probabilmente) ignorerà del tutto il CSS e continuerà a riempire il campo. Chiamando il campo "_gotcha", Formspree lo riconoscerà e ignorerà qualsiasi invio fatto con questo inserito.
Per maggiore sicurezza puoi avvolgere la tua email in JavaScript. Ciò ridurrà la probabilità che gli spambots guardino attraverso e scelga la tua email dall'HTML. Dai un'occhiata a ciò che ho fatto qui sotto:
Qui ho rimosso il azione attributo dal elemento, e quindi ha usato un piccolo frammento di JavaScript per impostarlo. Ho anche suddiviso la stringa email in segmenti per renderlo ancora più oscuro agli spambots. Sentiti libero di copiare questo e sostituire i segmenti dell'email con il tuo.
Il passaggio finale è assicurarsi che il tuo modulo funzioni. Visita la pagina che contiene il modulo nel browser Web, compila il modulo e invialo come farebbe un utente normale. Dovresti ricevere un'email da Formspree che ti chiede di confermare la tua email.
Fai clic sul link di conferma e sarai pronto!
Nota: dovrai seguire questa procedura di conferma ogni volta che aggiungi il modulo a una nuova pagina.
L'API Formspree offre un modo semplice e molto flessibile per aggiungere moduli a una pagina Web. Perfetto per siti statici!
Accentsconagua