Jak vytvořit Kontaktní formulář HTML5 / CSS3 založený na Ajaxu

 
 
  
Váš e-mail byl odeslán. Huzzah!
  

  
Při odesílání formuláře došlo k chybě
  
 
 název   
  
 
 E-mailem   
  
 
 Zpráva <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Pošlete nám mail!  
 
  

Možná jste si všimli, že existuje další podmíněný blok přímo po startovním formuláři. Kontroluje proměnnou pojmenovanou $ hasError a po potvrzení zobrazí chybové hlášení. Tato nouzová metoda je pouze pokud je JavaScript zakázán v prohlížeči, a proto nemohou generovat dynamické chyby.

Můžeme najít celou cestu dolů jednotlivých proměnných PHP kontrolovány. Příkazy regulují, zda byl formulář již podán s vyplněnými jen částečnými částkami dat. Jedná se o další záložní systém, který zobrazuje obsah již vyplněných polí - pěkný trik pro správné uživatelské prostředí!

Bezprostředně po dokončení našeho formuláře je jich málo Funkce jQuery jsme napsali. Budeme o nich hovořit jako první, protože se jedná o výchozí implementaci na stránce. Pokud však prohlížeč JavaScript neakceptuje, můžeme se standardně spoléhat na náš kód PHP.

Otevření jQuery

Nejjednodušší způsob, jak začít mluvit na toto téma, by bylo ponořit se přímo dovnitř. Rozdělím jednotlivé bloky po řádcích tak, aby bylo vidět, co skript skutečně kontroluje..

Nicméně, pokud se ztratíte jen zkontrolovat soubory kódu projektu. Všechny plné bloky jsou předem napsané a dobře zdokumentované na webových stránkách jQuery. Chcete-li začít, otevřeme náš kód podobný všem ostatním:

Pokud jste obeznámeni zpětná volání můžete si všimnout pošta() funkce má zabudovanou sadu parametrů. Zpětné volání jsou menší funkce, které jsou volány na odezvu dat z jiné funkce.

Tak například, když naše jQuery.post () funkce úspěšně střílí e-mail, který zavolá vlastní interní funkci pro zobrazení posuvné animace. Všechny tyto kódy mohou být napsány ve vlastním bloku a přesunuty jinam. V zájmu tohoto tutoriálu je však mnohem snazší napsat zpětné volání jako inline funkci.

Prolomit naše PHP

Poslední překážkou, o které je třeba zmínit, je logika za procesorem PHP. To je backend systém, který bude ve skutečnosti volání funkce pošty a poslat zprávu. Veškerý kód použitý v příkladech níže naleznete přímo v horní části naší hlavní .php před výstupem HTML.

Tam je také několik vnitřních stylů, které osvěžují stránku. Není zde nic nového, takže nebudeme chodit do žádného z detailů. Nicméně styles.css Dokument je součástí kódu projektu a obsahuje základní metody CSS3.

 
Začneme tím, že otevřeme naši doložku PHP a zkontrolujeme pokud byl formulář dokonce předložen.  POŠTA proměnná “předloženy” bylo vlastně skryté vstupní pole přidané na samém konci našeho formuláře. Je to užitečná cesta zkontrolujte, zda uživatel odeslal cokoliv a tak nevyužíváme zdroje serverů.
 
Po tomto máme 3 oddělené pokud / jinak prohlášení, které chcete vidět Pokud bylo vyplněno každé vstupní pole. Nebudu zde uvádět každý kousek logiky, protože jsou v přírodě velmi opakující se. Abychom vám však uvedli stručný příklad, zahrnuli jsme níže uvedenou klauzuli o ověření e-mailu:
 
// potřebujete platný e-mail, pokud (trim ($ _ POST ['email']) === ") $ emailError = 'Zapomněli jste zadat svou e-mailovou adresu.'; $ hasError = true; else if (! preg_match ("/^ [s .:::::::]] [–z0-9_.-]*@[a-z0-9.-]+\t _POST ['email']))) $ emailError = 'Zadali jste neplatnou e-mailovou adresu.'; $ HasError = true; else $ email = trim ($ _ POST ['email']); 
 
PHP zkrátí všechny mezery z hodnoty a zkontroluje, zda je něco zbylé. Pokud ano, máme podrobný Regulární výraz (Regex) zjistit, zda vstupní řetězec uživatele odpovídá vzoru e-mailu.
 
Určitě nemusíte pochopit, jak preg_match () pracuje na vytvoření tohoto skriptu. Je to užitečná funkce určovat pravidla a požadavky pro úspěšný typ dat, ale příkazy pokročilé znalosti programování opravdu pochopit. V tomto scénáři zajišťujeme, aby uživatel zadával pouze několik málo znaků, včetně @ symbol následovaný 2-4 znaky představující a Doména nejvyšší úrovně.
 
Poté, co všechny naše logiky projdou a nevrátíme žádné chyby, je čas poslat naši zprávu! Tento bit kódu nastaví jednotlivé proměnné pro přizpůsobení naší e-mailové zprávy a nastavení některých záhlaví pošty procesu.
 
// po chybě při chybě nechte e-mail nyní! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Odeslat zprávu z'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Jméno: $ name n nEmail: $ email n n Příspěvky: $ comments"; $ headers = 'Od:'. ' <'.$emailTo.'>". "n". 'Odpovědět: ' . $ email; mail ($ emailTo, $ subject, $ body, $ hlavičky); // nastavte hodnotu boolean na hodnotu TRUE $ emailSent = true;  
 
Pokud jste přemýšleli, jak kód bude na vaší e-mailové adrese, je to část, kterou vyplníte. První proměnná v naší sadě má název $ emailTo a měly by obsahovat jakékoli e-mailovou adresu, na kterou bude zpráva přijata.
 
Uvnitř našeho $ tělo variabilní využíváme n oddělovač pro přidání nových řádků do zprávy. Tím se přidají malá umístění pro jméno odesílatele, emailová adresa, následuje přestávka pro jejich obsahu zprávy. Samozřejmě můžete strávit čas pěkným dohledem, ale tato struktura funguje dobře.
 
Závěr
 
Tím se zavře náš výukový program pro pokročilý kontaktní formulář. Pokud byste chtěli styl své prvky ve vztahu k mé, můžete se podívat na můj příklad styles.css v rámci kódu projektu. Stránka je však dostatečně strukturovaná, abyste si mohli snadno vytvořit svůj vlastní vzhled.
 
Stáhněte si zdrojový kód a podívejte se, co jsem udělal o něco blíž. Je dobré sledovat návod, ale mít přímý přístup ke zdroji projektu může být neocenitelný. Já jsem také zahrnoval stručný styl, aby se přizpůsobení vánek, díky za váš názor!