Abbiamo il nostro sito pubblicato.

Quello che ci resta da fare é collegare la nostra forma di contatti l'abbiamo creata strutturalmente completa, però ancora non invia dati.

Dicevamo nelle precedenti elezioni che servirà una parte server.

In questo caso la parte serve del salvataggio dei dati ce la fornisce Netflix.

E adesso che abbiamo completato il deploy sui loro sistemi su questo servizio, possiamo quindi agg la nostra forma alla funzionalità di salvataggio forme di Nedley.

Prima di passare a vedere la documentazione di Netflix su come generare la nostra forma, inviare dati, io andrei un attimo a fare qualche altro piccolo fine tuning sulla forma.

Innanzitutto c' è qualcosa che ancora non mi convince.

Ovvero l'utente potrà in inviare i suoi dati, ma fondamentalmente potrà scrivere un po', quello che vuole in questi campi in questi campi di input, quindi è buona norma cercare di validare quello che è l'input dell'utente e cercare di forzare un formato di di vincolare quella che può essere l'inserimento dati dell'utente per guidarlo meglio e anche noi ricevere dei dati più puliti.

Quindi cosa posso utilizzare HTML cinque a da diverso tempo introdotto degli attributi da associare ai campi di input per poter vincolare per stabilire delle regole di validazione riguardo agli input che l'utente può inserire nei campi.

Esiste una documentazione molto chiara, completa per esempio tra le pagine della documentazione di mozilla, dove illustra i differenti attributi con le varie proprietà.

É quello che è possibile quindi andare a validare.

Io utilizzero' soltanto alcuni.

Torno sul codice, comincerei proprio dal primo campo, quindi abbiamo il nome che sicuramente un campo obbligatorio.

In questo caso inserirò un attributo required per indicare che è qualcosa che va necessariamente inserito.

Stessa cosa farei per il campo i may è un campo obbligatorio e, perché no, anche il subject.

Per quanto riguarda la tec star invece la lascio libera per chi, come abbiamo visto, è opzionale.

Salvo ricarica la pagina e vediamo cosa accade se prova a cliccare sand baths, ecco che compare un piccolo pop-up questo papà mi avvisa e lo stesso browser a mostrarlo mi avvisa che il mi avvisa che il campo full-time obbligatorio per cui io dovrò necessariamente inserirlo.

Provo a fare un altro summit, vediamo cosa accade.

Ok anche il campo, ma era appunto obbligatorio.

Inserisco però in questo caso una stringa caso.

Ecco che già mentre digito compare un pop-up, in questo caso l'aver utilizzato a codice.

Il typ email per questo campo, sebbene visivamente, lo rende simile a un campo testuale.

In realtà il browser riesce a riconoscere quello che un indirizzo e-mail valido, per cui adesso proverò a inserire filippo chiocciola buljanoff punto carriers e vediamo che l'errore è sparito.

Problemi al rinvio ok c' è ancora da settare.

Logge inseriro' non lo so richiesta info perfetto ora prima di fare un summit si è vero il messaggio obbligatorio però potrei anche decidere di limitare la quantità di testo che l'utente possa inviare al server, quindi potrei decidere di vincolare il numero di caratteri che l'utente può scrivere all'interno del campo massaggi come di qualunque altro campo.

Però in particolare qui dentro vorrei lì limitare un po' questa capacità facciamo una piccola prova.

Torno quindi sul codice e utilizzero' un attributo che è chiamato max length con il quale potrò specificare un limite massimo di caratteri inseribili in un campo di test.

In questo caso facciamo una prova con dieci giusto per fare una prova salviamo, ricarichiamo e scrivendo adesso un messaggio a caso vediamo che oltre dieci caratteri non potrò più inserire.

Per cui io adesso magari estende Ray un po'.

Questo limite la metterei Non lo so, magari facciamo cinquecento e perché no? Magari nella Labour specifichiamo anche max cinquecento lanz, giusto per dare un'indicazione all'utente, così capisce come mai non riesce a inserire piu' altro testo.

Ok, quindi in questo momento io potrò inserire fino a cinquecento caratteri.

Bene, abbiamo introdotto la validazione html cinque.

A questo punto potro' inviare i miei dati al server.

Guardiamo adesso la documentazione di Netflix fa in merito alle forme.

Ci suggerisce come sia facile creare delle forme funzionanti istantaneamente e ci suggerisce come sia come basti soltanto aggiungere al nostro markup è attributo Thrifty, un attributo custom a livello di tag form e assegnando poi un nome sia la forma che hai ai singoli campi.

Ora attributo name è molto importante perché determina la chiave con cui l'informazione che arriva con la form viene identificata dal server.

Questo lo faremo con Netflix, ma vale anche nel caso in cui vi invia assim oh, dati a un server esterno e un server nostro.

Quindi torno mi sposto sulla form nel nostro html aggiungero' Netflix al tag form é un suo nome che potrei chiamare del contact.

Adesso aggiungo il nome ai singoli campi.

Ho inserito in ogni campo per cui farei adesso un deploy online e dopo facciamo un test.

Torno sulla mia cyber.

Aggiungo il file che ho modificato in stage.

Inserisco un commento potrebbe essere nei tuoi form, salvo il mio commit e faccio un pusher.

Bene, abbiamo pisciato le modifiche su GitHub.

Andiamo a vedere se il nostro codice è stato deplorato correttamente.

Torno in dashboard su Netflix.

Ritorno sul mio sito dal per che mi ha mi ha dato e scrollo dritto alla parte dei contatti.

A questo punto faccio un test di invio.

Metto tutti i campi obbligatori.

Filippo Mail metto una fittizia facciamo filippo chiocciola testa punto com Richiesta di info come sagge e ciao richiedo invio messaggio di te anch'io da parte di Netflix che ci conferma l'invio dei nostri dati e clicco su Back to oversight.

Ok, sono ritornato sul sito verifichiamo il dashboard su Netflix se i dati sono arrivati correttamente, quindi torno sulla dashboard, seleziono la voce forms dal menu di navigazione e vediamo come già c' è un come già ci indica che tra le forme attive, cioè la nostra forma di contatto, clicco e al suo interno.

Vediamo le le vedremo l'elenco di tutti i messaggi ricevuti dal dal contact form online sulla nostra pagina e qui c' è la mia richiesta di contatto.

Clicchiamo vedo comparire tutti i dati come come avevo detto prima, l'importanza di assegnare un nome a ogni campo ci consente di poter definire le chiavi con cui identificheremo poi i rispettivi valori, quindi full name, emails e massaggi.

In questo modo ho creato in pochissimo tempo un sistema di contatto con cui poi posso andare a recuperare tutti i messaggi ricevuti dalla dashboard di Netflix.