Cum se creează un formular de contact HTML5 / CSS3 bazat pe Ajax
Formularul de contact este esențial pentru orice site web, deoarece acesta acționează ca un mesager care transmite avizul sau întrebările vizitatorilor către webmaster. Au existat numeroase forme de contact pe web, dar, din păcate, majoritatea nu vă explică părțile interioare de lucru, așa că vine un tutorial detaliat care vă va învăța să construiți un formular de contact avansat de la zero bazat pe tehnologia pop, HTML5 și CSS3.
Având în vedere natura unui formular de contact prin e-mail pe web, trebuie de asemenea să ne aruncăm în două câmpuri separate de aplicație, care reprezintă codul backend PHP pentru trimiterea funcțiilor e-mail și jQuery pentru o interfață de utilizator bogată. Până la sfârșit vom rămâne cu o formă de contact complet dinamică și funcțională, scrisă cu o personalizare ulterioară în minte.
Începeți acum să vă creați propriul formular de contact avansat!
Comandă rapidă la:
- Demo - Obțineți o previzualizare a ceea ce construiți
- Descărcați - descărcați toate fișierele (php + css)
Structurarea aplicației
Pentru a începe, veți avea nevoie de un anumit tip de server web pentru a lucra peste. Dacă rulați o mașină Windows WAMP este probabil cea mai bună opțiune. Utilizatorii Mac au un program similar numit MAMP care este la fel de ușor de instalat.
Aceste pachete vor configura un server local pe mașina dvs. cu acces complet la PHP. Alternativ, dacă dețineți spațiu de server sau aveți acces complet la server într-o locație îndepărtată, puteți să o utilizați în schimb. Nu vom avea nevoie de baze de date MySQL, care ar trebui să simplifice puțin lucrurile.
Odată ce serverul dvs. este configurat creați un folder nou pentru a găzdui aplicația. Poți să numești ceea ce vrei, deoarece nu este în detrimentul sau chiar legat de produsul final. Structura dosarului va fi utilizată atunci când accesați fișierele într-un browser web. Un exemplu simplu ar fi http: //localhost/ajaxcontact/contact.php
Să construim fișierele noastre!
Vom lucra doar în 2 fișiere de bază. Vom avea mai întâi nevoie de un nucleu .php fișier pentru a găzdui nu numai logica noastră de aplicație, dar și marcarea frontend HTML. Mai jos este un exemplu de cod preluat din fișierul de pornire.
Formular de contact Ajax HTML5 / CSS cu jQuery
Pentru a începe, am scris o scurtă secțiune pentru documentul nostru. Acesta include un general Declarație Doctype pentru HTML5 și unele elemente de document HTML / XML. Acestea nu sunt exact necesare, dar vor ușura procesul de redare în browserele mai vechi (și mai noi). De asemenea, nu doare niciodată să ofere mai multe informații.
Puțin mai jos putem vedea 2 linii chiar înainte de eticheta noastră de închidere. Primul include pe noi jQuery script de la Google Online Repository. Acest lucru este necesar pentru ca erorile dinamice ale paginii noastre să funcționeze. În mod direct sub aceasta, avem o includere de bază Document CSS conținând toate stilurile paginilor noastre.
În interiorul corpului nostru de documente avem câteva care conțin diviziuni reținerea unei forme principale de contact. Acesta conține 3 elemente de intrare pentru numele utilizatorului, adresa de email, și mesaj personal. Marcajul HTML este destul de standard și nu ar trebui să încurce mintea vreunui dezvoltator intermediar.
E-mailul dvs. a fost trimis. Huzzah!
Aici avem o bază Cod PHP condițional imbricate în containere cu câteva pagini. Aceasta verifică valoarea setată a unei variabile numite
$ Emailsentși dacă este egal cu adevărat, va afișa un mesaj de succes.În interiorul formularului HTML
altfel instrucțiunea este ceea ce se va executa la încărcarea primei pagini, deoarece nu va mai fi niciun conținut de trimis inițial. Înăuntru vom include un a colectarea scurtă a elementelor de formă și a buton de trimitere.
Eroare la trimiterea formularului
S-ar putea să fi observat că există un altul bloc condițional imediat după formularul de pornire. Aceasta verifică o variabilă numită $ hasError și va afișa un mesaj de eroare după confirmare. Această metodă de rezervă este se utilizează numai dacă JavaScript este dezactivat în browser și, prin urmare, nu poate genera erori dinamice.
Putem găsi tot drumul jos variabile individuale PHP fiind verificat. Declarațiile se reglementează dacă formularul a fost deja trimis numai cu cantități parțiale de date completate. Acesta este un alt sistem de rezervă care afișează conținutul câmpurilor deja completate - un truc frumos pentru o experiență adecvată a utilizatorului!
Imediat după finalizarea formularului, sunt puțini Funcțiile jQuery am scris. Vom vorbi mai întâi despre acestea, deoarece acestea sunt implementarea implicită pe pageload. Cu toate acestea, dacă browserul nu acceptă JavaScript, atunci, în mod implicit, ne putem baza pe codul nostru PHP.
Deschiderea către jQuery
Cea mai ușoară modalitate de a începe să vorbim despre acest subiect ar fi să vă scufundați chiar înăuntru. Voi descompune blocurile individuale line-by-line astfel încât să puteți vedea ce scrierile verifică de fapt.
Totuși, dacă vă veți pierde doar examinați fișierele cu codul proiectului. Toate blocurile complete sunt pre-scrise și bine documentate pe site-ul jQuery. Pentru a începe, ne deschidem codul similar cu oricare alta:
Dacă sunteți familiarizat cu callback este posibil să observați post() funcția are un set de parametri încorporați. Comenzile de returnare sunt funcții mai mici care sunt numite la răspunsul datelor de la o altă funcție.
Deci, de exemplu, atunci când noi jQuery.post () funcționează cu succes un e-mail se va apela funcția sa internă pentru a afișa animație alunecare. Tot acest cod ar putea fi scris în propriul său bloc și mutat în altă parte. Cu toate acestea, de dragul acestui tutorial este mult mai ușor de scris scrisoarea de apel ca o funcție inline.
Breaking past PHP-ul nostru
Ultimul obstacol care trebuie menționat este logică în spatele procesorului nostru PHP. Acesta este sistemul de backend care va de fapt apelează o funcție de e-mail și trimiteți mesajul. Toate codurile utilizate în exemplele de mai jos pot fi găsite direct în partea de sus a paginii principale .php fișier, înainte de orice ieșire HTML.
Există, de asemenea, câteva stiluri interne care împrospătează pagina. Nu este nimic nou specific aici, astfel încât nu vom intra în niciun detaliu. Însă styles.css documentul este inclus în codul proiectului și conține tehnici rudimentare CSS3.
Pentru a începe, deschideți clauza PHP și verificați dacă formularul a fost depus chiar. POST variabil “a prezentat” era de fapt un câmp de intrare ascuns adăugat la sfârșitul formularului nostru. Este o modalitate folositoare verificați dacă utilizatorul a trimis ceva totuși astfel încât să nu risipești resursele serverului.
După aceasta avem 3 separat dacă / altceva declarație de verificare pentru a vedea dacă fiecare câmp de introducere a fost completat. Nu voi include fiecare logic aici, deoarece ele sunt foarte repetitive în natură. Cu toate acestea, pentru a vă oferi un exemplu scurt, am inclus clauza de verificare a e-mailului de mai jos:
// nevoie de e-mail valid dacă (trim ($ _ POST ['email']) === ") $ emailError = 'Ați uitat să introduceți adresa dvs. de e-mail. ("/^[[:alnum:]][a-z0-9_.-]*@[-z0-9.-]+\.[az]2,4$/i", trim ($) ($ Email = trim ($ _ POST ['e-mail']); $ email =) $ emailError =PHP va tăia tot spațiul alb din valoare și va verifica dacă este rămas ceva. Dacă este așa, avem un detaliu Expresia regulată (Regex) pentru a vedea dacă sirul de intrare al utilizatorului se potrivește cu un model de poștă electronică.
Cu siguranță nu trebuie să înțelegi cum
preg_match ()lucrează pentru a construi acest script. Este o funcție utilă să stabilească reguli și cerințe pentru un tip de succes de date, dar comenzi avansate de cunoștințe de programare pentru a înțelege cu adevărat. În acest scenariu, asigurăm că utilizatorul introduce doar câteva caractere selectate, include un @ simbol urmat de 2-4 caractere reprezentând a Domeniul de nivel superior.După ce toată logica noastră trece și nu ne întoarcem erorile, este timpul să trimitem mesajul nostru! Acest bit de cod va stabili variabile individuale pentru a personaliza mesajul nostru de poștă electronică și pentru a configura unele mail pentru proces.
// nu erori de eșec trimiteți un e-mail acum! dacă (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Mesaj trimis de la'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Nume: $ nume \ n \ nEmail: $ email \ n \ nComentarii: $ comentarii"; $ headers = 'De la:'. ' <'.$emailTo.'>". "\ r \ n". 'Raspunde la: ' . e-mail $; mail ($ emailTo, $ subiect, $ corp, $ anteturi); // setați valoarea de completare booleană la TRUE $ emailSent = true;Dacă v-ați întrebat cum a fost identificat codul dvs. de e-mail, aceasta este partea care trebuie completată. Prima variabilă din setul nostru este intitulată
$ Emailtoși ar trebui să conțină oricare dintre acestea adresa de e-mail, care urmează să primească mesajul.În interiorul nostru
$ corpvariabilă vom profita de\ ndelimiter pentru a adăuga noi linii în mesaj. Aceasta adaugă destinații de plasare mici pentru numele expeditorului, adresa de email, urmată de o pauză pentru ei conținutul mesajului. Bineînțeles că ați putea să petreceți timp în picioare pe afișaj, dar această structură funcționează foarte bine.Concluzie
Aceasta închide tutorialul nostru pentru un formular de contact avansat. Dacă doriți să personalizați elementele voastre în raport cu a mea, puteți verifica exemplul meu styles.css în cadrul codului proiectului. Cu toate acestea, pagina este structurată suficient de bine încât să puteți proiecta aspectul și simțul propriu foarte ușor.
Simțiți-vă liber să descărcați codul sursă și să examinați ce am făcut mai aproape. Este bine să urmați un tutorial, însă accesul direct la sursa proiectului poate fi de neprețuit. Am inclus, de asemenea, o scurtă foaie de stil pentru a face personalizarea o briză, mulțumită pentru viziunea dvs.!
