Come creare un modulo di contatto HTML5 / CSS3 basato su Ajax
Il modulo di contatto è assolutamente essenziale per qualsiasi sito Web, poiché agisce come un messaggero che trasmette l'opinione o le richieste dei visitatori al webmaster. Ci sono stati innumerevoli moduli di contatto sul web ma sfortunatamente molti di loro non ti spiegano le parti di lavoro interne, quindi ecco un tutorial dettagliato per insegnarti a costruire un modulo di contatto avanzato da zero basato sulla tecnologia pop, HTML5 e CSS3.
Considerando la natura di un modulo di contatto via e-mail basato sul web, ci viene anche richiesto di immergerci in due campi di applicazione separati, che è il codice di backend PHP per l'invio di e-mail e funzioni jQuery per l'interfaccia utente ricca. Alla fine ci ritroveremo con un modulo di contatto completamente dinamico e funzionale, scritto pensando in seguito alla personalizzazione.
Inizia ora per creare il tuo modulo di contatto avanzato!
Collegamento a:
- Demo: ottieni un'anteprima di ciò che stai creando
- Download - Scarica tutti i file (php + css)
Strutturare l'applicazione
Per iniziare hai bisogno di un tipo di server web su cui lavorare. Se stai usando una macchina Windows, WAMP è probabilmente la tua migliore opzione. Gli utenti Mac hanno un programma simile chiamato MAMP, che è altrettanto facile da installare.
Questi pacchetti configureranno un server locale sulla tua macchina con pieno accesso a PHP. In alternativa, se si possiede spazio sul server o si ha accesso completo al server in una posizione remota, è possibile utilizzarlo. Non avremo bisogno di alcun database MySQL, che dovrebbe semplificare un po 'le cose.
Una volta configurato il tuo server crea una nuova cartella per ospitare l'applicazione. Puoi nominarlo come preferisci, in quanto non dannoso o addirittura correlato al prodotto finale. La struttura della cartella verrà utilizzata quando si accede ai file in un browser Web. Un semplice esempio potrebbe essere http: //localhost/ajaxcontact/contact.php
Costruiamo i nostri file!
Lavoreremo solo all'interno di 2 file core. Prima avremo bisogno di un nucleo .php file per ospitare non solo la nostra logica applicativa, ma anche il markup HTML di frontend. Di seguito è riportato un codice di esempio tratto dal nostro file di partenza.
Modulo di contatto Ajax HTML5 / CSS con jQuery
Per iniziare, abbiamo scritto una semplice rubrica sul nostro documento. Questo include un generale Dichiarazione di tipo di documento per HTML5 e alcuni elementi del documento HTML / XML. Questi non sono esattamente richiesti, ma faciliteranno il processo di rendering nei browser più vecchi (e più recenti). Inoltre non fa mai male offrire maggiori informazioni.
Un po 'più in basso possiamo vedere 2 linee proprio prima del nostro tag di intestazione di chiusura. Il primo include il nostro script jQuery dal repository di codici Google online. Questo è necessario perché i nostri errori di pagina dinamici funzionino. Direttamente sotto di questo abbiamo l'inclusione di una base Documento CSS contenente tutti i nostri stili di pagina.
All'interno del nostro corpo del documento ne abbiamo alcuni contenenti divisioni trattenere un modulo di contatto principale. Questo contiene 3 elementi di input per il nome dell'utente, indirizzo email, e messaggio personale. Il codice HTML è abbastanza standard e non dovrebbe turbare la mente di uno sviluppatore intermedio.
La tua email è stata inviata. Huzzah!
Qui abbiamo una base Codice condizionale PHP nidificati in alcuni contenitori di pagine. Questo controlla il valore impostato di una variabile chiamata
$ emailSente se è uguale a true, verrà visualizzato un messaggio di successo.All'interno del nostro HTML di modulo
Il altro la dichiarazione è ciò che verrà eseguito sul caricamento della prima pagina poiché non ci sarà alcun contenuto da inviare inizialmente. Dentro qui includeremo a breve raccolta di elementi di forma e a pulsante di invio.
Errore nell'invio del modulo
Potresti aver notato che ce n'è un altro blocco condizionale direttamente dopo la forma di partenza. Questo controlla una variabile chiamata $ hasError e visualizzerà un messaggio di errore alla conferma. Questo è il metodo di fallback usato solo se JavaScript è disabilitato nel browser e quindi non può generare errori dinamici.
Fino in fondo possiamo trovare variabili PHP individuali essere controllato. Le dichiarazioni sono regolanti se il modulo è già stato inviato con solo una quantità parziale di dati compilati. Questo è un altro sistema di fallback che mostra il contenuto dei campi già compilati - un bel trucco per una corretta esperienza utente!
Subito dopo il completamento del nostro modulo sono i pochi Funzioni jQuery abbiamo scritto Parleremo prima di questi perché sono l'implementazione predefinita su pageload. Tuttavia se il browser non accetta JavaScript, per impostazione predefinita possiamo contare sul nostro codice PHP.
Apertura a jQuery
Il modo più semplice per iniziare a parlare di questo argomento sarebbe quello di tuffarsi subito. Analizzerò i singoli blocchi riga per riga in modo da poter vedere cosa sta effettivamente controllando lo script.
Tuttavia se ti perdi solo rivedere i file di codice del progetto. Tutti i blocchi completi sono pre-scritti e ben documentati nel sito Web di jQuery. Per iniziare apriamo il nostro codice in modo simile a qualsiasi altro:
Se hai familiarità con callback potresti notare il inviare() la funzione ha un set predefinito di parametri. Le callback sono funzioni più piccole che vengono chiamate sulla risposta di dati da un'altra funzione.
Quindi per esempio, quando il nostro jQuery.post () funzione invia correttamente una e-mail chiamerà la propria funzione interna per visualizzare l'animazione scorrevole. Tutto questo codice potrebbe essere scritto nel proprio blocco e spostato altrove. Tuttavia, per questo tutorial è molto più semplice scrivere il callback come funzione inline.
Superando il nostro PHP
L'ultimo ostacolo da menzionare è il logica dietro il nostro processore PHP. Questo è il sistema di back-end che sarà in realtà chiama una funzione di posta e invia il messaggio. Tutto il codice utilizzato negli esempi qui sotto può essere trovato direttamente nella parte superiore del nostro principale .php file, prima di qualsiasi output HTML.
Ci sono anche alcuni stili interni che rinfrescano la pagina. Non c'è nulla di specificamente nuovo qui, quindi non entreremo in nessuno dei dettagli. Comunque, il styles.css il documento è incluso nel codice del progetto e contiene tecniche CSS3 rudimentali.
Per iniziare apriamo la nostra clausola PHP e controlliamo se il modulo è stato anche presentato. Il INVIARE variabile “presentata” era in realtà un campo di input nascosto aggiunto alla fine del nostro modulo. È un modo utile per controlla se l'utente ha inviato qualcosa eppure non sprechiamo risorse del server.
Dopo questo abbiamo 3 separati se altro dichiarazione di controllo per vedere se ogni campo di input è stato compilato. Non includerò qui ogni bit di logica poiché sono tutti di natura molto ripetitiva. Tuttavia, per darvi un breve esempio ho incluso la clausola di verifica dell'e-mail qui sotto:
// ha bisogno di e-mail valida se (trim ($ _ POST ['email']) === ") $ emailError = 'Dimenticato di inserire il tuo indirizzo e-mail.'; $ hasError = true; else if (! preg_match ("/ ^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Hai inserito un indirizzo email non valido.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP tratterà tutti gli spazi bianchi dal valore e controllerà per vedere se qualcosa è rimasto. Se è così, abbiamo un dettaglio Espressione regolare (Regex) per vedere se la stringa di input del nostro utente corrisponde a un modello di posta elettronica.
Sicuramente non hai bisogno di capire come
preg_match ()lavora per costruire questo script. È una funzione utile per determinare regole e requisiti per un tipo di dati di successo, ma comanda una conoscenza di programmazione avanzata da afferrare davvero. In questo scenario, stiamo garantendo che l'utente inserisca solo pochi caratteri selezionabili, includendo un @ simbolo seguito da 2-4 caratteri che rappresenta a Dominio di primo livello.Dopo che tutta la nostra logica è passata e non restituiamo errori, è tempo di inviare il nostro messaggio! Questo bit di codice imposterà le singole variabili per personalizzare il nostro messaggio e-mail e impostarne alcune intestazioni di posta per il processo.
// su nessun errore di errore, scriveteci ora! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Messaggio inviato da'. $ nome; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Nome: $ nome \ n \ nEmail: $ email \ n \ nCommenti: $ commenti"; $ intestazioni = 'Da:'. ' <'.$emailTo.'>'. "\ r \ n". 'Rispondi a: ' . $ E-mail; posta ($ email, $ soggetto, $ corpo, $ intestazioni); // imposta il valore di completamento booleano su TRUE $ emailSent = true;Se ti stavi chiedendo come il codice stava per capire il tuo indirizzo e-mail, questa è la parte da compilare. La prima variabile del nostro set è intitolata
$ emailToe dovrebbe contenere qualsiasi cosa indirizzo e-mail, che riceverà il messaggio.Dentro il nostro
$ corpovariabile sfruttiamo il\ ndelimitatore per aggiungere nuove righe nel messaggio. Questo aggiunge piccoli posizionamenti per il nome del mittente, indirizzo email, seguito da una pausa per loro contenuto del messaggio. Ovviamente potresti passare il tempo a preparare il display, ma questa struttura funziona perfettamente.Conclusione
Questo chiude il nostro tutorial per un modulo di contatto avanzato. Se vuoi modellare i tuoi elementi in relazione al mio, puoi dare un'occhiata al mio esempio styles.css all'interno del codice del progetto. Tuttavia, la pagina è strutturata abbastanza bene da poter progettare il tuo look & feel molto facilmente.
Sentiti libero di scaricare il codice sorgente ed esamina quello che ho fatto un po 'più vicino. È bene seguire un tutorial ma avere accesso diretto alla fonte del progetto può essere prezioso. Ho anche incluso un breve foglio di stile per rendere le personalizzazioni un gioco da ragazzi, grazie per la tua visione!
