Kuidas luua Ajax-põhine HTML5 / CSS3 kontaktvorm
Kontaktivorm on iga veebisaidi jaoks surmava tähtsusega, kuna see toimib sõnumitoojana, kes edastab veebimeistrile külastajate arvamuse või päringuid. Veebis on olnud lugematuid kontaktivorme, kuid kahjuks enamik neist ei selgita sulle sisemisi tööosi, nii et siin on üksikasjalik õpetus, mis õpetab teid täiustatud kontaktvormi loomiseks nullist, mis põhineb poptehnoloogial, HTML5-l ja CSS3-l.
Arvestades veebipõhise e-posti kontaktivormi olemust, peame me ka sukelduma kahte eraldi rakenduste välja, mis on PHP taustaprogramm e-posti ja jQuery funktsioonide saatmiseks rikkaliku kasutajaliidese jaoks. Lõpuks jäetakse meil täielik dünaamiline ja funktsionaalne kontaktivorm, millele on lisatud hilisem kohandamine.
Alustage nüüd oma arenenud kontaktvormi loomist!
Otsetee:
- Demo - saate ülevaate sellest, mida te ehitate
- Allalaadimine - kõigi failide allalaadimine (php + css)
Rakenduse struktureerimine
Alustamiseks on vaja teatud tüüpi veebiserverit. Kui kasutate Windowsi masinat, on WAMP tõenäoliselt teie parim valik. Maci kasutajatel on sarnane programm nimega MAMP, mis on sama lihtne paigaldada.
Need paketid seavad teie arvutisse kohaliku serveri, millel on täielik juurdepääs PHP-le. Teise võimalusena võite selle asemel kasutada serveri ruumi või serveri täielikku juurdepääsu kaugesse asukohta. Me ei vaja mingeid MySQL andmebaase, mis peaks asju natuke lihtsustama.
Kui teie server on loodud luua uue kausta rakenduse majutamiseks. Seda saab nimetada iganes soovid, sest see ei ole kahjulik ega isegi seotud lõpptootega. Kaustade struktuuri kasutatakse failidele veebibrauseris. Lihtne näide oleks http: //localhost/ajaxcontact/contact.php
Ehitame oma failid!
Töötame ainult kahe põhifaili raames. Me vajame kõigepealt tuuma .php faili mitte ainult meie rakenduse loogika, vaid ka HTML-märgistuse esipaneel. Allpool on meie lähtefailist võetud näidiskood.
HTML5 / CSS Ajax kontaktvorm koos jQueryga
Alustamiseks oleme kirjutanud meie dokumendile lihtsa pealkirjaosa. See hõlmab üldist Dokumendi HTML5 deklaratsioon ja mõned HTML / XML dokumendi elemendid. Need ei ole täpselt vajalikud, kuid lihtsustavad renderdamisprotsessi vanemates (ja uuemates) brauserites. Samuti pole valus pakkuda rohkem teavet.
Veidi allapoole näeme 2 joont paremale enne meie sulgemisliini silti. Esimene hõlmab meie jQuery skript online-koodi Google'i hoidlast. See on vajalik meie dünaamiliste lehekülgede vigade töötamiseks. Otse selle all on meil põhiline CSS-dokument sisaldab kõiki meie lehekülje stiile.
Meie dokumendiorganis on meil vähe sisaldavad jaotisi peamise kontaktivormi kinnipidamine. See sisaldab 3 sisendelementi kasutaja nimi, e-posti aadress, ja isiklik sõnum. HTML-i märgistus on üsna tavaline ja ei tohiks segada iga vahepealse arendaja meelt.
Teie e-kiri saadeti. Huzzah!
Siin on meil põhiline PHP tingimuslik kood sisestatud mõne lehekülje mahutisse. See kontrollib määratud muutuja väärtust
$ emailSentja kui see on võrdne tõega, kuvatakse see edukas sõnum.Meie vormi HTML sees
The muidu avaldus on see, mis toimub esimese lehe laadimisel, sest algselt ei saa sisu saata. Siin on meil a vormielementide lühikokkuvõte ja a nupule.
Viga vormi esitamisel
Võib-olla olete märganud, et on veel üks tingimuslik plokk vahetult pärast stardivormi. See kontrollib muutujat $ hasError ja kuvatakse kinnitusel veateade. See tagastamismeetod on kasutatakse ainult siis, kui JavaScript on keelatud brauseris ja ei saa seega luua dünaamilisi vigu.
Kogu alla saame leida üksikud PHP muutujad kontrollitakse. Aruanded reguleerivad seda, kas vorm on juba esitatud ainult osaliselt täidetud andmetega. See on veel üks varusüsteem, mis kuvab juba täidetud väljade sisu - kena trikk õige kasutaja kogemuse jaoks!
Otseselt pärast meie vormi täitmist on vähe jQuery funktsioonid me oleme kirjutanud. Me räägime neist kõigepealt, sest need on vaikimisi rakendused pageloadis. Kui aga brauser ei aktsepteeri JavaScripti, võime vaikimisi tugineda meie PHP-koodile.
JQueryle avamine
Lihtsaim viis selle teemaga rääkimiseks oleks sukelduda otse. Jaotan üksikud plokid rida-realt, et saaksite näha, mida skript tegelikult kontrollib.
Kuid kui sa lihtsalt kaovad vaadata projekti koodifailid. Kõik täisplokid on eelnevalt kirjutatud ja dokumenteeritud jQuery veebilehel. Alustamiseks avame oma koodi sarnaselt mis tahes muule:
Kui olete tuttav tagasikutsumine võite märgata postitus () funktsioonil on sisseehitatud parameetrite komplekt. Tagasisideteks on väiksemad funktsioonid, mida nimetatakse teisest funktsioonist saadud andmete reageerimisel.
Nii näiteks, kui meie jQuery.post () funktsiooni edukalt võrsed e-posti ta helistab oma sisemine funktsioon kuvada libistades animatsioon. Kogu see kood võib olla kirjutatud oma plokis ja teisaldatud mujale. Samas on selle juhendaja huvides palju lihtsam tagasihelistamise kirjutamine inline-funktsioonina.
Meie PHP möödumine
Viimane tõkke on mainida loogika meie PHP protsessori taga. See on tegelikult taustaprogramm helistage e-posti funktsioonile ja saatke sõnum. Kõik allpool toodud näidetes kasutatud koodid leiate otse meie peamistest tippudest .php enne HTML-väljundit.
Samuti on mõned sisemised stiilid, mis värskendavad lehekülge. Siin pole midagi uut, nii et me ei lähe ühegi detaili juurde. Kuid styles.css dokument on projekti koodis sisalduv ja sisaldab algelisi CSS3 tehnikaid.
Alustamiseks avame oma PHP klausli ja kontrollime kui vorm on isegi esitatud. The POST muutuja “esitatud” oli tegelikult meie vormi lõpus lisatud varjatud sisend väli. See on kasulik viis kontrollige, kas kasutaja on midagi esitanud veel me ei raiska serveriressursse.
Pärast seda on meil 3 eraldi kui / muidu avalduse kontrollimine kui iga sisend väli on täidetud. Ma ei sisalda siinkohal iga loogika natuke, sest need kõik on looduses väga korduvad. Kuid lühikese näite saamiseks olen lisanud allpool e-posti kinnitamise klausli:
// vajab kehtivat e-posti, kui (trim ($ _ POST ['email']) === ") $ emailError = 'Unustasin sisestada oma e-posti aadressile.'; $ hasError = true; other if (! preg_match ("/^ [[:alnum:Õ][a-[zz9_99_**[a-[[[[[[2222 trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim ($ _POST ['email']))) $ emailError = 'Sa sisestasid vale e-posti aadressi.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP lõikab kõik tühimikud väärtusest ja kontrolli, kas midagi ei jäänud üle. Kui jah, siis on meil üksikasjalik Regulaarne väljendus (Regex) et näha, kas meie kasutaja sisestusstring sobib kokku e-posti mustriga.
Sa ei pea kindlasti aru saama
preg_match ()töötab selle skripti loomiseks. See on kasulik funktsioon määrata kindlaks reeglid ja nõuded eduka andmeliigi jaoks, kuid käskleb täiustatud programmeerimisalaseid teadmisi, et tõesti aru saada. Selle stsenaariumi puhul tagame, et kasutaja sisestab ainult mõne paari tähemärgi, sisaldab @ sümbol, millele järgneb 2-4 tähemärki esindavad a Tipptaseme domeen.Pärast kõiki meie loogika möödumist ei tagastata vigu, on aeg meie sõnum saata! See kooditabel seab individuaalsed muutujad meie e-kirja kohandamiseks ja mõnede seadistamiseks kirjade päised protsessi jaoks.
// pärast tõrkeid ei vea! kui (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Esitatud teade'. $ name; $ sendCopy = trimmimine ($ _ POST ['sendCopy']); $ body = "Nimi: $ name nEmail: $ email n nComments: $ kommentaarid"; $ headers = 'Alates:'. ' <'.$emailTo.'>". "r". 'Vastama: ' . $ email; mail ($ emailTo, $ topic, $ body, $ päised); // seadistage meie loogikaväärtuse väärtus väärtuseks TRUE $ emailSent = true;Kui sa mõtlesid, kuidas kood peaks teie e-posti aadressi välja selgitama, on see osa, mida täita. Esimene muutuja meie komplektis on pealkirjaga
$ emailToning see peaks sisaldama kumbagi e-posti aadress, mis sõnumi vastu võtab.Meie sees
$ kehamuutuja, mida me ära kasutameneraldaja, et lisada sõnumisse uusi ridu. See lisab saatja nimi, e-posti aadress, sellele järgneb paus nende jaoks sõnumi sisu. Loomulikult võite ekraani kaunistamiseks aega veeta, kuid see struktuur töötab hästi.Järeldus
See sulgeb meie juhendaja täiustatud kontaktivormi jaoks. Kui soovid oma elemente oma minuga kujundada, saate minu näite läbi vaadata styles.css projekti koodis. Lehekülg on siiski piisavalt hästi struktureeritud, et saaksite oma väljanägemist ja tundeid kergesti kujundada.
Võite vabalt alla laadida lähtekoodi ja uurida, mida olen natuke lähemal teinud. On hea järgida õpetust, kuid otsene juurdepääs projekti allikale võib olla hindamatu. Olen lisanud ka lühikese stiili, et muuta kohandused imelihtsaks, tänu teie arvamusele!
