Kā izveidot Ajax balstītu HTML5 / CSS3 kontaktu formu
Kontaktu veidlapa ir nāvīga būtiska jebkurai tīmekļa vietnei, jo tā darbojas kā kurjers, kas nodod webmaster apmeklētāju viedokli vai jautājumus. Tīmeklī ir bijušas neskaitāmas kontaktformas, bet diemžēl lielākā daļa no tām jums nepaskaidro iekšējās darba daļas, tāpēc šeit ir detalizēta apmācība, lai iemācītu jums veidot progresīvu kontaktu formu no nulles, pamatojoties uz pop tehnoloģiju, HTML5 un CSS3.
Ņemot vērā tīmekļa e-pasta kontaktu veidlapas raksturu, mums ir arī jāiedzīvo divās atsevišķās lietojumprogrammu jomās, kas ir PHP backend kods e-pasta un jQuery funkciju sūtīšanai bagātīgai lietotāja saskarnei. Galu galā mēs atstāsim pilnībā dinamisku un funkcionālu kontaktu formu, kas tiks rakstīta ar vēlāku pielāgošanu.
Sāciet tagad, lai izveidotu savu uzlaboto kontaktu formu!
Īsceļš uz:
- Demo - iegūstiet priekšstatu par to, ko veidojat
- Lejupielādēt - lejupielādēt visus failus (php + css)
Pieteikuma strukturēšana
Lai sāktu darbu, jums būs nepieciešams sava veida web serveris, lai varētu strādāt vairāk. Ja izmantojat Windows mašīnu, WAMP, iespējams, ir labākā izvēle. Mac lietotājiem ir līdzīga programma ar nosaukumu MAMP, kas ir tikpat viegli instalējama.
Šīs paketes jūsu datorā izveidos vietējo serveri ar pilnu piekļuvi PHP. Alternatīvi, ja jums ir servera telpa vai jums ir pilna servera piekļuve attālinātai atrašanās vietai, varat to izmantot. Mums nav vajadzīgas MySQL datubāzes, kas mazliet vienkāršotu lietas.
Kad serveris ir iestatīts izveidojiet jaunu mapi, lai ievietotu programmu. To var nosaukt par visu, ko vēlaties, jo tas nav kaitīgs vai pat saistīts ar gala produktu. Mapes struktūra tiks izmantota, kad piekļūsiet saviem failiem tīmekļa pārlūkprogrammā. Vienkāršs piemērs būtu http: //localhost/ajaxcontact/contact.php
Veidosim mūsu failus!
Mēs strādāsim tikai 2 galvenajos failos. Vispirms mums būs nepieciešams kodols .php failu, lai mājās ne tikai mūsu lietojumprogrammu loģiku, bet arī frontend HTML iezīmēšanu. Zemāk ir parauga kods, kas ņemts no mūsu sākuma faila.
HTML5 / CSS Ajax kontaktforma ar jQuery
Lai sāktu, mēs esam uzrakstījuši mūsu dokumentam vienkāršu sadaļu. Tas ietver vispārēju Dokumenta tipa deklarācija HTML5 un daži HTML / XML dokumentu elementi. Tie nav precīzi nepieciešami, bet atvieglos atveidošanas procesu vecākās (un jaunākās) pārlūkprogrammās. Arī tas nekad sāp piedāvāt vairāk informācijas.
Nedaudz tālāk uz leju mēs varam redzēt 2 rindas tieši pirms mūsu noslēguma virsraksta taga. Pirmais ietver mūsu jQuery skripts no tiešsaistes Google koda krātuves. Tas ir nepieciešams, lai mūsu dinamiskās lapas kļūdas darbotos. Tieši zem šī ir iekļauta pamata CSS dokuments satur visus mūsu lapu stilus.
Mūsu dokumentu struktūrā ir daži kas satur nodaļas galveno kontaktu veidlapu. Tajā ir 3 ievades elementi lietotāja vārds, epasta adrese, un personīga ziņa. HTML marķējums ir diezgan standarts, un tas nedrīkst nejaukt neviena starpnieka izstrādātāja prātu.
Jūsu e-pasts tika nosūtīts. Huzzah!
Šeit mums ir pamata PHP nosacītais kods ievietots dažu lapu konteineros. Tas pārbauda nosaukta mainīgā lieluma iestatīto vērtību
$ emailSentun, ja vienāds ar patiesību, tas parādīs veiksmes ziņojumu.Mūsu veidlapas HTML iekšpusē
The cits paziņojums ir tas, kas darbosies pirmajā lapā, jo sākotnēji nebūs nekāda satura. Šeit mēs iekļausim a īss formu elementu krājums un a iesniegt pogu.
Kļūda, iesniedzot veidlapu
Iespējams, esat ievērojuši, ka ir vēl viens nosacīts bloks tieši pēc sākuma veidlapas. Tas pārbauda mainīgo mainīgo $ hasError un pēc apstiprinājuma parādīsies kļūdas ziņojums. Šī rezerves metode ir izmanto tikai tad, ja JavaScript ir atspējots pārlūkprogrammā un tādējādi nevar radīt dinamiskas kļūdas.
Visu ceļu mēs varam atrast atsevišķi PHP mainīgie pārbauda. Paziņojumi regulē, ja veidlapa jau ir iesniegta tikai ar daļēju datu apjomu. Šī ir vēl viena rezerves sistēma, kas parāda jau aizpildīto lauku saturu - jauks triks pareizai lietotāja pieredzei!
Tieši pēc mūsu veidlapas aizpildīšanas ir daži jQuery funkcijas mēs esam rakstījuši. Mēs vispirms runāsim par tiem, jo tie ir noklusējuma īstenošana pageload. Tomēr, ja pārlūks nepieņem JavaScript, pēc noklusējuma mēs varam paļauties uz mūsu PHP kodu.
Atvēršana jQuery
Vienkāršākais veids, kā sākt runāt par šo tēmu, būtu niršana pa labi. Atsevišķu bloku rindas pa rindai sadalīšu, lai jūs varētu redzēt, ko skripts faktiski pārbauda.
Tomēr, ja jūs vienkārši pazudīsit pārskatiet projekta koda failus. Visi pilnie bloki ir iepriekš rakstīti un labi dokumentēti jQuery tīmekļa vietnē. Lai sāktu darbu, mēs atveram mūsu kodu, kas ir līdzīgs jebkuram citam:
Ja esat pazīstams atzvanīšanas jūs varat pamanīt post () funkcija ir iebūvēts parametru kopums. Atgriešanās ir mazākas funkcijas, ko sauc pēc citas funkcijas atbildes.
Tātad, piemēram, kad mūsu jQuery.post () funkcija veiksmīgi fotografē e-pastu, tā izsauks savu iekšējo funkciju, lai parādītu bīdāmo animāciju. Visu šo kodu varētu rakstīt savā blokā un pārvietot citur. Tomēr šīs apmācības labad ir daudz vieglāk rakstīt atzvanīšanu kā inline funkciju.
Pārtraukt mūsu PHP
Pēdējais šķērslis ir pieminēt loģika aiz mūsu PHP procesora. Šī ir faktiskā atbalsta sistēma zvaniet pasta funkcijai un nosūtīt ziņojumu. Visu zemāk redzamo piemēru kodu var atrast tieši mūsu galvenajā daļā .php failu, pirms HTML izejas.
Ir arī daži iekšējie stili, kas atsvaidzina lapu. Šeit nav nekas īpaši jauns, tāpēc mēs neko nespēsim apskatīt. Tomēr styles.css dokuments ir iekļauts projekta kodā un satur racionālas CSS3 metodes.
Lai sāktu, atveriet mūsu PHP klauzulu un pārbaudiet ja veidlapa pat tika iesniegta. The POST mainīgais “iesniegts” faktiski bija slēptās ievades lauks, kas pievienots mūsu veidlapas beigās. Tas ir noderīgs veids, kā pārbaudiet, vai lietotājs ir iesniedzis kaut ko tomēr mēs neizmantojam serveru resursus.
Pēc tam mums ir 3 atsevišķi ja / cits paziņojuma pārbaude, lai redzētu ja katrs ievades lauks ir aizpildīts. Es neietveršu katru loģikas bitu šeit, jo tie visi ir ļoti atkārtoti dabā. Tomēr, lai sniegtu jums īsu piemēru, es esmu pievienojis tālāk norādīto e-pasta verifikācijas klauzulu:
// nepieciešams derīgs e-pasts, ja (apdare ($ _ POST ['email']) === ") $ emailError = 'Aizmirsi ievadīt savu e-pasta adresi.'; $ hasError = true; cits, ja (! preg_match ("/ ^ [[:alnum:]] [--z0-9_.- ]*@ []] - 0, sagrieziet ($ _POST ['email']))) $ emailError = 'Jūs ievadījāt nederīgu e-pasta adresi.'; $ HasError = true; cits $ email = apdare ($ _ POST ['email']);PHP no visa vērtības sagriezīs visu atstarpi un pārbaudīs, vai kaut kas paliek pāri. Ja tā, tad mums ir detalizēts Regulāra izteiksme (Regex) lai redzētu, vai mūsu lietotāja ievades virkne atbilst e-pasta modelim.
Jums noteikti nav jāsaprot, kā
preg_match ()darbojas, lai izveidotu šo skriptu. Tā ir noderīga funkcija noteikt noteikumus un prasības veiksmīgam datu veidam, bet komandas uzlabotas programmēšanas zināšanas patiešām saprot. Šajā scenārijā mēs nodrošinām, ka lietotājs ievada tikai dažas atsevišķas rakstzīmes, ietver @ simbols, kam seko 2-4 rakstzīmes kas pārstāv a Augsta līmeņa domēns.Pēc tam, kad visas mūsu loģikas iet un mēs neatgriezīsim nekādas kļūdas, ir pienācis laiks nosūtīt mūsu ziņojumu! Šis koda bits noteiks atsevišķus mainīgos, lai pielāgotu mūsu e-pasta ziņojumu un uzstādītu dažus pasta galvenes procesu.
// pēc neveiksmes kļūdām e-pastu tagad! ja (! isset ($ hasError)) $ emailTo = '[email protected]'; $ topic = 'Iesniegts ziņojums no'. $ name; $ sendCopy = apdare ($ _ POST ['sendCopy']); $ body = "Vārds: $ name n e-pasts: $ e-pasts n nComments: $ komentāri"; $ headers = 'No:'. ' <'.$emailTo.'>“. "n". 'Atbildēt uz: ' . $ e-pasts; pasts ($ emailTo, $ topic, $ body, $ galvenes); // iestatiet mūsu boolean pabeigšanas vērtību uz TRUE $ emailSent = true;Ja jūs domājāt, kā kods gatavojas noskaidrot jūsu e-pasta adresi, šī ir daļa, kas jāaizpilda. Pirmais mainīgais mūsu komplektā ir nosaukts
$ emailToun jāietver, kurš no tiem ir e-pasta adrese, kas saņems ziņojumu.Mūsu iekšienē
$ ķermenismainīgais, ko mēs izmantojamnatdalītājs, lai ziņojumā pievienotu jaunas rindas. Tas pievieno nelielus izvietojumus sūtītāja vārds, epasta adrese, seko pārtraukums ziņu saturu. Protams, jūs varat pavadīt laiku skaistā displejā, bet šī struktūra labi darbojas.Secinājums
Tas aizver mūsu apmācību, lai iegūtu pilnveidotu kontaktu formu. Ja vēlaties veidot savus elementus saistībā ar mīnu, varat apskatīt manu piemēru styles.css projekta koda ietvaros. Tomēr lapa ir pietiekami labi strukturēta, lai jūs varētu viegli izveidot savu izskatu.
Jūtieties brīvi, lai lejupielādētu pirmkodu un pārbaudītu, ko esmu darījis mazliet tuvāk. Ir labi sekot apmācībai, bet tieša piekļuve projekta avotam var būt nenovērtējama. Esmu iekļāvis arī īsu stilu, lai padarītu pielāgošanu vieglu, pateicoties jūsu viedoklim!
