Ako vytvoriť kontaktný formulár HTML5 / CSS3 založený na Ajax

 
 
  
Váš e-mail bol odoslaný. Huzzah!
  

  
Chyba pri odosielaní formulára
  
 
 názov   
  
 
 e-mail   
  
 
 správa <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Pošlite nám e-mail!  
 
  

Možno ste si všimli, že je ďalší podmienený blok priamo po úvodnom formulári. Toto skontroluje premennú s názvom $ hasError a po potvrdení sa zobrazí chybové hlásenie. Táto záložná metóda je Používa sa iba vtedy, ak je vypnutý JavaScript v prehliadači, a preto nemôže generovať dynamické chyby.

Celú cestu môžeme nájsť jednotlivé PHP premenné sú skontrolované. Pokyny upravujú, ak už bol formulár predložený iba s čiastočným množstvom vyplnených údajov. Ide o ďalší záložný systém, ktorý zobrazuje obsah vyplnených polí - pekný trik pre správnu používateľskú skúsenosť!

Priamo po dokončení nášho formulára je málo Funkcie jQuery sme napísali. Budeme o nich hovoriť ako prvý, pretože sú štandardnou implementáciou na pageload. Ak však prehliadač neprijíma JavaScript, potom sa predvolene môžeme spoliehať na náš PHP kód.

Otváranie na jQuery

Najjednoduchší spôsob, ako začať hovoriť o tejto téme, by bolo ponoriť sa dovnútra. Rozdelím jednotlivé bloky line-by-line tak, aby ste videli, čo skript skutočne kontroluje.

Ak sa však stratíte skontrolujte súbory kódu projektu. Všetky plné bloky sú predpísané a dobre zdokumentované na webovej stránke jQuery. Ak chcete začať, otvoríme náš kód podobne ako ktorýkoľvek iný:

Ak ste oboznámení spätné volania môžete si všimnúť pošta () Funkcia má zabudovanú sadu parametrov. Spätné volania sú menšie funkcie, ktoré sa nazývajú na základe odpovede údajov z inej funkcie.

Takže napríklad, keď naša jQuery.post () funkcia úspešne nasníma e-mail, bude volať svoju vlastnú internú funkciu na zobrazenie posuvnej animácie. Celý tento kód môže byť napísaný vo vlastnom bloku a presunutý inde. Avšak v záujme tohto tutoriálu je oveľa jednoduchšie písať spätné volanie ako inline funkciu.

Prekonanie nášho PHP

Poslednou prekážkou, ktorú možno spomenúť, je logika za našim procesorom PHP. Toto je systém backend, ktorý bude skutočne volanie funkcie pošty a odoslať správu. Všetok kód použitý v nižšie uvedených príkladoch sa nachádza priamo v hornej časti nášho hlavného menu .php pred akýmkoľvek výstupom HTML.

Existuje aj niekoľko vnútorných štýlov, ktoré stránky osviežia. Nič tu nie je konkrétne nové, takže nebudeme mať žiadne podrobnosti. Avšak styles.css dokument je súčasťou kódu projektu a obsahuje základné metódy CSS3.

 
Ak chcete začať, otvorte našu klauzuli PHP a skontrolujte ju ak bol formulár dokonca predložený.  POST premenlivý “predložené” bolo vlastne skryté vstupné pole pridané na samom konci nášho formulára. Je to užitočný spôsob skontrolujte, či používateľ niečo odoslal napriek tomu sa nestratíme serverovými zdrojmi.
 
Potom máme 3 oddelené if / else kontrola výkazov ak bolo vyplnené každé zadávacie pole. Nebudem tu zahrnúť každý kúsok logiky, pretože sú všetky veľmi opakujúce sa v prírode. Aby som vám uviedol krátky príklad, vložil som doložku o overení e-mailom nižšie:
 
// potrebujeme platný e-mail, ak (trim ($ _ POST ['email']) === ") $ emailError = 'Zabudli ste zadat' svoju e-mailovú adresu. ("/^[[:alnum:]][a-z0-9_.-]*@[-z0-9.-]+\[[]]2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Zadali ste neplatnú e-mailovú adresu.'; $ HasError = true; else $ email = trim ($ _ POST ['email' 
 
PHP odstráni všetky medzery z hodnoty a skontroluje, či niečo zostalo. Ak áno, máme podrobný Regular Expression (Regex) či sa náš vstupný reťazec používateľa zhoduje s e-mailovým vzorom.
 
Určite nemusíte pochopiť, ako preg_match () pracuje na vytvorení tohto skriptu. Je to užitočná funkcia určiť pravidlá a požiadavky na úspešný typ údajov, ale povoľuje pokročilé znalosti programovania, aby naozaj pochopili. V tomto scenári zabezpečujeme, že používateľ zadáva len niekoľko znakov, obsahuje jeden @ nasleduje symbol 2-4 znaky reprezentujúca Doména najvyššej úrovne.
 
Po tom, ako všetka logika prechádza a my sa nevraciame, je čas poslať našu správu! Tento bit kódu nastaví jednotlivé premenné na prispôsobenie našej e-mailovej správy a nastavenie niektorých mailových hlavičiek pre tento proces.
 
// bez chyby zlyhania pošlite e-mail teraz! ak (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Odoslaná správa od'. $ name; $ sendCopy = orezanie ($ _ POST ['sendCopy']); $ body = "Názov: $ name \ n \ nEmail: $ email \ n \ nPočet: $ komentáre"; $ headers = 'Od:'. ' <'.$emailTo.'>". "\ r \ n". 'Odpovedať: ' . $ E-mailu; mail ($ emailTo, $ predmet, $ body, $ hlavičky); // nastaviť hodnotu booleovského dopĺňania na TRUE $ emailSent = true;  
 
Ak by ste sa zaujímali o to, ako kód určil vašu e-mailovú adresu, je to tá časť, ktorá sa má vyplniť. Prvá premenná v našej sade je titulovaná $ emailto a mali by obsahovať podľa toho čo je e-mailovú adresu, ktorá prijme správu.
 
Vo vnútri nášho $ telo premennú využívame \ n oddeľovač pridať do správy nové riadky. Toto pridáva malé umiestnenia pre meno odosielateľa, emailová adresa, nasleduje prestávka pre ich obsah správy. Samozrejme, že by ste mohli stráviť čas zdobením displeja, ale táto štruktúra funguje dobre.
 
záver
 
Toto uzavrie náš návod pre pokročilý kontaktný formulár. Ak by ste chceli vyformovať svoje prvky vo vzťahu k mojim, môžete si pozrieť môj príklad styles.css v rámci kódu projektu. Stránka je však štruktúrovaná dostatočne dobre, aby ste mohli veľmi ľahko navrhnúť svoj vzhľad a pocit.
 
Môžete si stiahnuť zdrojový kód a preskúmať, čo som urobil trochu bližšie. Je dobré dodržiavať tutoriál, ale priamy prístup k zdroju projektu môže byť neoceniteľný. Taktiež som uviedol krátky štýl, aby ste si prispôsobili svoje prispôsobenie, vďaka za váš názor!