Formulář zpětné vazby Ajax v modálním okně. Formulář zpětné vazby v modálním okně
Ahoj všichni. Byli jsme bombardováni otázkami, jak implementovat formulář, který se po kliknutí na tlačítko objeví v modálním okně a po odeslání se zobrazí zpráva o úspěchu či neúspěchu.
Myslím, že podobných věcí je na internetu dost, ale protože se lidé ptají, rozhodl jsem se to udělat. Kromě toho musí být tato funkce přítomna téměř na každé vstupní stránce, aby bylo možné implementovat tlačítko zpětného volání. A skutečně, nyní je stále více výsledků testování AB, které ukazují, že otevřené formuláře fungují hůře než ty skryté v modálním okně a otevírají se po kliknutí na tlačítko.
Někteří tvrdí, že je to způsobeno tím, že si lidé pomalu „rozvíjejí imunitu“ a otevřená forma je agresivní prodej. Údajně je nyní doba, kdy uživatel, když vidí otevřený formulář, věří, že se mu snaží něco „prodat“. S touto teorií úplně nesouhlasím, ale je na tom zrnko pravdy. To může být pravda v některých typech podnikání. No a teď se pustíme do implementace formuláře.
Poznámka! Nebudu podrobně popisovat každou akci, ale nabídnu vám hotovou verzi ve zdrojovém kódu. Pokud máte nějaké dotazy, pište do komentářů. Vymyslíme to :)
Dnes nezačneme s jQuery, ale s rozložením tlačítka a formuláře. Všechny skripty uvedeme na konci stránky.
Tlačítko, které po kliknutí otevře modální okno:
Zanechte žádost
Můžete nastavit libovolnou třídu, ale do href napište #modal - to bude id kontejneru se stínováním a kontaktní formulář.
Nyní dám kód pro formulář a blok, na kterém bude formulář umístěn:
Zanechte své kontaktní údaje a náš konzultant se vám ozve. Chci tento formulář pro svůj web
Po přidání stylů to vypadalo takto:
Pro vytvoření modálního okna byla použita knihovna Remodal. Toto je sada souborů css a js, pouze pro vytváření animovaných modálních oken. Stáhnout si ho můžete z odkazu nebo s mými úpravami na konci článku.
Mezi značky head přidáváme styly:
A před koncovou značku body přidejte skripty:
Script.js je skript pro zpracování formuláře. Stejný Ajax, který nám umožňuje provést celý postup bez opětovného načtení stránky:
$(document).ready(function () ( $("form").submit(function () ( // Získání ID formuláře var formID = $(this).attr("id"); // Přidání hash k názvu ID var formNm = $("#" + ID formuláře) $.ajax(( typ: "POST", url: "mail.php", data: formNm.serialize(), úspěch: funkce (data) (); // Výstupní text výsledku odesílání $(formNm).html(data error: function (jqXHR, text, error) ( // Zobrazení textu chyby odesílání $(formNm).html(error); ) ); );
Neposkytnu zdrojový kód css a js ze souborů odpovědných za modální okno a formulář, protože jsou poměrně velké. Pokud ano, podívejte se na zdroj. Ale PHP handler je do značné míry standardní (pokud to mohu říci):
Nezapomeňte si prosím změnit své e-mailové adresy na vlastní.
Toto je forma ajaxu, kterou jsme dostali. Omlouvám se, že se nesnažím podrobně vysvětlit, jak byly jednotlivé prvky vyrobeny. Chtěl jsem jen dát hotový výsledek, ale nemá smysl popisovat všechny animace a vzhledy. Stáhněte si zdroj a implementujte jej na svůj web. A to je pro dnešek vše. Hodně štěstí všem!
Kluci, žádám vás, abyste formulář otestovali na skutečném nebo virtuálním serveru (hosting). Ujistěte se prosím, že váš server podporuje PHP, máte placený plán a ne zkušební období. Jinak v 90 % případů formulář nebude fungovat.
Neočekávejte dopis ve vaší doručené poště, pokud jste právě otevřeli soubor indexu v prohlížeči a klikli na tlačítko "Odeslat". PHP je jazyk na straně serveru!
Pokud jste líní na to přijít a vytvořit si formu sami, pak doporučuji věnovat pozornost.
Aktualizovaná verze článku se nachází
Zdravím vás přátelé. Dnešní návod pomůže vašemu webu WordPress mít pěkný a funkční formulář zpětné vazby. Uděláme to pomocí pluginu Contact Form 7 Najednou jsem strávil spoustu času hledáním normálního kontaktního formuláře a nikdy jsem nenašel vhodnou alternativu k tomuto pluginu.
Funkce pluginuJeště jednou připomenu, že budeme pracovat s pluginem, takže pokud potřebujete zpětnou vazbu bez pluginu, navštivte raději článek o, nastavení je trochu složitější, ale možnost je univerzálnější (vhodná pro každý web) a méně zatěžuje servery.
Hlavní výhodou kontaktního formuláře na Contact Form 7 je jeho snadné přizpůsobení, téměř neomezená funkčnost a automatické přizpůsobení designu jakékoli šabloně WordPress. S jeho pomocí můžete vytvořit nejen formulář pro odesílání zpráv z webu. Plugin lze použít k vytvoření tlačítka objednávky, zpětného volání nebo složitého dotazníku se zaškrtávacími políčky a rozevíracími seznamy. Je také možné připojit soubory pro přenos.
Jedním slovem, plugin je megafunkční.
Pokud vás stále znepokojuje otázka „vytvořit či nevytvořit kontaktní formulář?“ (můžete se dostat jednoduše umístěním kontaktních informací na potřebné stránky), pak řeknu jednoznačně - stojí za to to udělat.
Za prvé, odeslání zprávy přímo z webu je pohodlnější než otevření e-mailového programu a vyplňování všeho ručně. Úspora času nikomu neublíží.
Za druhé, kontaktní formulář lze přizpůsobit, což vám umožní přijímat dopisy standardního formátu - bude se v nich snadněji orientovat. Můžete například nastavit standardní záhlaví pro zprávu „Objednávka“ a všechny e-maily ze stránky objednávek budou přicházet s tímto záhlavím.
Za třetí, použití kontaktního formuláře vám umožní skrýt vaši e-mailovou adresu, a tím se zbavit možného spamu, který se nevyhnutelně objeví, když se vaše e-mailová schránka stane veřejně dostupnou.
Za čtvrté, je prostě stylový a moderní.
Instalace a konfigurace pluginu Contact form 7Plugin je v obecné databázi WordPress, takže není potřeba jeho soubory někde hledat, stahovat si je pro sebe a následně nahrávat na svůj hosting. Vše je jednodušší – přes administrátora WordPress přejděte do sekce pluginů, do vyhledávacího pole napište „Kontaktní formulář 7“ a nainstalujte jej. Pokud jste pluginy nikdy neinstalovali, zde jsou podrobné pokyny, jak plugin nainstalovat.
Nastavení pluginu se skládá ze dvou fází.
První je nastavení konkrétního formuláře. Může existovat mnoho různých forem, každá z nich může obsahovat vlastní sadu polí. Jedním slovem, pro každý úkol a každou stránku na webu můžete samostatně vytvořit formulář zpětné vazby, Wordpress to umožňuje - jejich seznam bude uložen v databázi pluginů.
Druhou fází je vložení formuláře na stránky webu. Každý formulář, který vytvoříme uvnitř pluginu, bude mít svůj vlastní jedinečný krátký kód. Chcete-li jej vložit na stránku, musíte jej pouze vložit.
Tak jdeme.
Pro začátek v levém menu administračního panelu najdeme záložku Kontaktní formulář 7 Pod ní vyskočí nabídka se dvěma položkami – „Formuláře“ a „Přidat nový“.
Zatím nemáme žádné hotové formuláře, takže přejdeme do sekce „Přidat nový“. Otevře se tam stránka s výzvou k výběru jazyka a bude tam uveden i výchozí jazyk. Stačí kliknout na modré tlačítko „Přidat nový“.
Nastavení formuláře jsou rozdělena do samostatných bloků. Zvážím je v pořadí.
Blokovat „Název formuláře“První blok je zodpovědný za název vašeho formuláře - umístěte kurzor na nápis „Bez názvu“ a zadejte požadovaný název. Toto jméno se vám zobrazí pouze v seznamu kontaktních formulářů pluginu, takže si to ujasněte, abyste se v budoucnu nepletli vší rozmanitostí.
Zpočátku tento blok obsahuje standardní konfiguraci pole. Obsahuje jméno odesílatele dopisu, jeho emailovou adresu, předmět dopisu, obsah dopisu a tlačítko odeslat.
Povinná pole jsou označena hvězdičkami. Pokud toto pole zůstane prázdné, zpráva nebude odeslána.
Umístění polí lze upravit pomocí běžných html značek.
Pokud jde o nastavení samotných polí, můžete odstranit nepotřebná a přidat ta, která potřebujete. Pokud nechcete, aby se předmět dopisu zadával ručně, jednoduše smažte odpovídající blok.
Přidání polí je také velmi snadné. Na pravé straně je tlačítko pro vygenerování tagu, kliknutím na něj se vám zobrazí seznam všech možných polí, která tento plugin podporuje.
Vyberte požadovanou položku a nakonfigurujte její nastavení. Plugin je v ruštině, takže všechna nastavení jsou intuitivní.
První zaškrtávací políčko označuje, zda je pole povinné nebo volitelné (přidává hvězdičku).
Po nastavení pole budete mít 2 krátké kódy:
- „Zkopírujte tento kód a vložte jej do šablony formuláře vlevo“ – tento kód se vloží do kódu formuláře stejně jako všechny ostatní;
- „A vložte následující kód do šablony dopisu níže“ – tento kód budeme potřebovat k formátování písmene v dalším bloku.
Do formuláře tak můžete přidat libovolný počet polí, zaškrtávacích políček, rozevíracích seznamů, prvků pro připojení souborů atd.
Blok "Dopis"Nyní je naším úkolem upravit dopis, který dostaneme. Dopis nijak neovlivňuje funkčnost formuláře zpětné vazby, slouží pouze k předání informací zadaných do formuláře.
Naším úkolem je zahrnout všechny informace do dopisu.
Prvním krokem je zadání e-mailové adresy, na kterou bude zpráva odeslána (může to být cokoliv).
Druhá položka označuje emailovou adresu, ze které vám bude dopis zaslán. Zde bych nic neměnil, výchozí je schránka vašeho blogu a do ní je přidán štítek se jménem odesílatele zprávy.
Dále uvedeme předmět dopisu. Předmět se standardně přebírá z pole, které je vyplněno ve formuláři. Tento prvek však můžete z formuláře odstranit a do pole zadat konkrétní téma, které se automaticky nastavuje v každém písmenu. Udělal jsem to pro formuláře zpětné vazby ze stránek o službách a reklamě. Zprávy odtud vždy přicházejí se stejným předmětem „Objednávání služeb“ nebo „Objednávka reklamy“ - jednoduché a jasné.
Dodatečné pole záhlaví obsahuje značku „Odpovědět:“, takže když odpovíte na dopis přijatý z vašeho blogu, odešlete zprávu blogu a na adresu, kterou odesílatel dopisu uvedl v poli formuláře. Toto pole není třeba měnit.
Pole „Šablona dopisu“ je zodpovědné za vnitřní obsah zprávy, kterou jste obdrželi. Ve výchozím nastavení obsahuje informace o odesílateli, předmětu a textu zprávy zadané do pole.
Na konci je uvedeno místo, ze kterého byl dopis odeslán.
Pokud jste do formuláře přidali další pole, která nebyla ve výchozím nastavení nainstalována, nezapomeňte přidat odpovídající značku do šablony dopisu. Byl vám poskytnut v bloku „Šablona formuláře“, kde jste vygenerovali odpovídající značku (pole „A vložte následující kód do šablony e-mailu níže“).
Libovolné textové informace v tomto bloku (kromě značek) lze změnit podle vašich představ. Můžete také přidat libovolné popisy a vyměnit značky a uspořádat je v pořadí, které vám vyhovuje.
Blok „písmeno 2“Pokud chcete, aby vám zaslanou zprávu obdržel někdo jiný, můžete toto políčko zaškrtnout.
Tento blok je konfigurován podobně jako předchozí. Standardně jsou v něm všechna pole vyplněna tak, aby dopis šel tomu, kdo formulář vyplnil (zřejmě aby nezapomněl).
Můžete nastavit, aby byla kopie odeslána například vašemu manažerovi nebo účetnímu.
Blokovat „Upozornění při odesílání formuláře“V tomto bloku můžete nakonfigurovat zprávy, které uživatel uvidí po kliknutí na tlačítko odeslat zprávu. Pokud chcete něco změnit, prosím, nechal jsem vše tak, jak je.
Aktivace formulářePo vyplnění všech polí se vraťte na začátek bloku „Název formuláře“ a klikněte na tlačítko „Uložit“ umístěné vpravo.
Plugin umístí vámi vytvořený formulář do seznamu aktivních a přiřadí mu speciální kód asi takto:
[ kontakt - formulář - 7 id = "5464" title = "Ověření" ] !} |
Vložením tohoto kódu kamkoli na váš web získáte hotový formulář pro komunikaci s vašimi potenciálními klienty.
Antispam – Akismet a CaptchaSpammeři způsobují majitelům webových stránek spoustu problémů a každý nový formulář, který vám umožní něco napsat, jen zvyšuje počet spamových robotů.
Pokud plugin kontaktního formuláře necháte v základní verzi, tak vás po chvíli zasype spousta prázdných a nic neříkajících zpráv.
Existují dva způsoby, jak se zbavit spammerů:
První možnost je nepohodlná, protože nutí návštěvníky ručně zadávat další znaky. Není to tak těžké, ale některým se to nelíbí.
Použití pluginu Akismet je pohodlnější, protože samostatně analyzuje zadaná data (jména, e-mailové adresy, odkazy) a na základě nashromážděné databáze vyvozuje závěry, zda se jedná o spam či nikoliv.
Kromě toho je akismet nainstalován na většině webů WordPress pro ochranu před spamem v komentářích k článkům. To znamená, že při jeho používání nebudete muset instalovat další pluginy a zbytečně zatěžovat web.
Ochrana proti spamu s Akismet1. Nainstalujte na své stránky plugin Akismet a aktivujte jej - .
2. Přidejte další data ke značkám kontaktního formuláře:
- do pole se jménem autora doplňte akismet:author
- v poli s odesílatelem emailu akismet:author_email
- v poli pro adresu webu akismet:author_url
Mělo by to vypadat takto:
Po uložení by kontaktní formulář měl zablokovat všechny zprávy zaslané spammery. Činnost filtru můžete zkontrolovat pomocí speciálního testovacího názvu „viagra-test-123? – když jej zadáte, měla by se objevit chybová zpráva.
Aby bylo ověření méně přísné, můžete zaškrtnout pouze některá pole, například jméno a e-mail, a adresu webu ponechat nezaškrtnutou. Zvýší se tím pravděpodobnost, že projdou spamové zprávy, ale bude méně pravděpodobné, že ztratíte zprávy, které potřebujete.
Ochrana proti spamu pomocí Really Simple CAPTCHAPokud zjistíte, že vám Akismet nevyhovuje (propouští spoustu spamu nebo blokuje potřebné zprávy), můžete povolit captcha. Chcete-li to provést, nainstalujte plugin Really Simple CAPTCHA.
Otevřete požadovaný kontaktní formulář pro úpravu
Vyberte Captcha ze seznamu značek. V nastavení tagů si můžete vybrat velikost obrázku se symboly, jinak není potřeba nic měnit. Ve spodní části okna nastavení se objeví 2 značky, jedna má na starosti zobrazení obrázku, druhá zobrazuje pole pro zadávání dat z tohoto obrázku.
Aby captcha začala fungovat, musíte zkopírovat a vložit obě tyto značky do levého okna šablony formuláře a poté uložit změny.
Umístění formuláře zpětné vazby do vyskakovacího oknaKontaktní formulář nemusí být vždy umístěn v konkrétní části webu, někdy by k němu měl mít klient přístup z každé stránky zdroje.
V takových případech není odeslání úplného formuláře vždy vhodné. Mnohem jednodušší je umístit tlačítko na nápadné místo, které přitahuje pozornost. Kliknutí na toto tlačítko by již mělo vést k otevření formuláře.
Člověk tak bude moci odesílat zprávy z webu, aniž by opustil stránku, kterou potřebuje.
To se provádí pomocí jiného pluginu – Easy FancyBox.
1. Nainstalujte plugin
Nejprve nainstalujeme samotný plugin, je v obecné databázi pluginů, takže stačí zadat jeho název do admin panelu vašeho blogu do vyhledávání pluginů. Po instalaci pluginu se v sekci „nastavení“ objeví záložka „mediální soubory“.
Na této kartě musíte najít seznam typů obsahu, které by se měly zobrazit ve vyskakovacím okně. Ve výchozím nastavení jsou pouze obrázky, musíte přidat vložený obsah.
Nyní, když je nastavení pluginu dokončeno, přejděme k nastavení tlačítka zpětné vazby.
2. Vložte kód do webuV zásadě můžete použít běžný textový odkaz, ale lépe bude vypadat obrázkové tlačítko.
Na svůj web, kde chcete zobrazit tlačítko pro kontaktní formulář (v záhlaví, zápatí nebo postranním panelu), vložte následující kód:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "kontaktní formulář" alt = "kontaktní formulář" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ kontakt - formulář - 7 id = "id vašeho formuláře" title = "název vašeho formuláře" ] !} < / div > < / div > |
V kódu musíte uvést adresu obrázku, který používáte jako tlačítko zpětné vazby, a upravit krátký kód samotného formuláře - zadejte své ID a název.
3. Odstraňte omezení na krátké kódy v postranním paneluTato položka je povinná, pokud chcete nainstalovat tlačítko do postranního panelu. Postranní panel ve WordPressu ne vždy umožňuje krátké kódy.
Chcete-li tuto funkci povolit, musíte otevřít soubor function.php pro úpravy (přímo z administrační oblasti WordPressu) a před uzavírací závorku „?>“ vložit následující kód:
add_filter("text_widgetu", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
Dá vám možnost spouštět všechny krátké kódy na postranním panelu.
Skončil jsem s tímto pěkným vyskakovacím formulářem:
Někdy je potřeba umístit na web několik formulářů s různými nastaveními a poli.
Například jedno tlačítko vede k formuláři se jménem a telefonním číslem a slouží k objednání zpětného volání z webu a druhé by mělo otevřít další formulář, kde je podrobná žádost o objednávku (s adresou, polem s popisem, možnost připojit soubor atd.). V samotném pluginu Contact Form 7 můžete vytvořit nekonečné množství možností formuláře, ale jak je můžete vměstnat do různých tlačítek na stejné stránce?
Chcete-li to provést, musíte upravit kód tlačítka z předchozího odstavce. První tlačítko používá výše uvedenou možnost. Ve druhém se změní dvě hodnoty.
Zdravím své čtenáře, získal jsem zkušenosti a povím vám o principech fungování formuláře pro zpětnou vazbu PHP. Ukážu vám to na jasných příkladech, abyste pochopili, jak vše funguje a jak probíhá interakce mezi samotným vstupním formulářem (jeho vstupními poli) a souborem handler napsaným v PHP. Zdroje si navíc můžete zdarma stáhnout spolu s .
Samozřejmě bude skvělé, pokud alespoň trochu rozumíte HTML / CSS, protože... Kód budete muset analogicky přetáhnout na svou stránku. Nebudeme se dotýkat jazyka PHP, ukážu vám všechny potřebné změny, které musíte provést sami.
AKTUALIZACE: Na základě ohlasů čtenářů jsem si uvědomil, že potřebuji něco krásnějšího a funkčnějšího, prosím seznamte se, podívejte se a mrkněte. Vyberte si, který se vám líbí nejvíce)
AKTUALIZACE2: Verze 3.0 Adaptive Landing + ajax forma s přenosem UTM tagů, přečtěte si a uvidíte. Bude se ti to líbit
Vzpomněl jsem si na sebe, když jsem se poprvé pokusil vytvořit formulář zpětné vazby v PHP sám, a abych byl upřímný, bylo to pracné, protože... Nechápal jsem, co a jak se děje. Trpělivost a vytrvalost, přátelé, a budete úspěšní.
Formulář zpětné vazby PHP - struktura
Analýzu samotného formuláře zpětné vazby prostudujeme na příkladu vstupní stránky, mimochodem, o tom je samostatný článek. Jak to funguje v akci, můžete vidět pomocí tlačítek níže, přikládám zdroje této jednostránkové stránky a hlavní soubor php handler (tento soubor zpracuje a odešle e-mail)
Po stažení zdrojů a rozbalení archivu uvidíte následující strukturu souborů:
- obrázek – všechny obrázky, které se používají pro samotnou vstupní stránku, tlačítka atd.
- js - javascriptové skripty, které poskytují například vyskakovací modální okno na stránce a další vizuální efekty
- index.html - indexový soubor naší jednostránkové stránky
- index1.php je soubor handleru, do kterého se přenesou hodnoty z formuláře, poté se z přijatých proměnných vygeneruje dopis a odešle se na zadanou e-mailovou adresu. Index1.php bude také fungovat jako prostřední oznamovací stránka o úspěšném odeslání dat s automatickým přesměrováním zpět na index.html (tj. naše jednostránková stránka)
Je důležité, aby váš hosting, kde se soubory stránek nacházejí, podporoval PHP zpracování, jinak se soubor index1.php nespustí a nebude fungovat. Chcete-li tuto nuanci objasnit, kontaktujte kampaň, kde je váš hosting registrován, nebo jej otestujte - funguje, což znamená, že existuje podpora. Pokud ne, povolte možnost podpory jazyka php
Podívejte se na diagram toho, jak všechny prvky interagují (stránka, formulář, handler)
Pojďme se podívat, jak funguje jedno z tlačítek, které vyvolá modální vyskakovací okno obsahující formulář zpětné vazby. Tento daný zdrojový kód je něco, co můžete vložit do stránky více než jednou a dvakrát a bude to fungovat, budete si ho muset sami upravit, aby vyhovoval vašemu designu a potřebám.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Žádost o zpětné volání Žádost o zpětné volání |
Žádost o zpětné volání Žádost o zpětné volání
Níže je kompletní zdrojový kód obslužné rutiny index1.php, pro nastavení odesílání do vaší poštovní schránky změňte “ [e-mail chráněný]„Svým vlastním, zbytek lze v zásadě ponechat beze změny
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | Budete kontaktováni |
Budete kontaktováni tělo ( pozadí: #22BFF7 url(img/zakaz.jpg) nahoře -70 % střed bez opakování; ) setTimeout("location.replace("/index.html")", 3000); /*Změňte adresu aktuální stránky po 3 sekundách (3000 milisekundách)*/
Kontrola funkčnosti formulářeVyvolejte okno a zadejte údaje pro testovací kontrolu našeho formuláře 
Ještě jednou připomenu, že váš hosting musí podporovat zpracování PHP souborů, jinak náš procesor jednoduše nespustí a na zadanou emailovou adresu nebude zaslán dopis. Výsledek úspěšně vyplněného formuláře zpětné vazby 
To je z mé strany vše, snažil jsem se co nejlépe zprostředkovat smysl a fungování scénáře. V případě dotazů mě neváhejte kontaktovat v komentářích nebo na VK (viz kontaktní údaje). Přeji vám snadnou a produktivní práci.
Dobrý den, milí čtenáři! O modálních oknech jsem už jednou psal, byl tu článek. V tomto článku vám ukážu, jak vytvořit vyskakovací okno na libovolném webu. Použijeme plugin jQuery fancybox. A abychom článku dodali smysl, vložíme do modálního okna formulář pro odeslání dopisu. Okamžitě bych rád poznamenal, že modální okna na tomto pluginu fungují ve všech prohlížečích. Začněme!
Co potřebujeme?! ne tolik:
- knihovna jQuery;
- plugin fancybox;
- PHP skript pro odeslání zprávy.
Aktuální verzi pluginu si můžete stáhnout z výše uvedeného odkazu. Co se týče pluginu fancybox, velmi dobrý nástroj pro vytváření oken na webu. Do oken můžete zahrnout libovolný videoobsah, obrázky (jak jednotlivě, tak v galerii), text, plovoucí rámečky, plugin má hromadu nastavení (více o nich níže) + fakt, že funguje stejně korektně ve všech prohlížečích je velmi potěšující.
Nebudu komplikovat značení, stačí kliknout na odkaz a otevře se okno s formulářem pro odeslání zprávy:
Odeslat zprávu |
Kde se hodnota atributu href shoduje s identifikátorem bloku div, ve kterém se nachází formulář pro odeslání e-mailu:
1 |
Odeslat e-mail |
Do formuláře přidáme dvě pole: text zprávy a e-mailovou adresu odesílatele a také tlačítko pro odeslání. Poté, co uživatel zadá e-mail, text zprávy a klikne na odeslat, nejprve zkontrolujeme správnost zadaných informací a následně pomocí Ajax požadavku odešleme data do PHP skriptu.
Zpočátku je formulář skrytý:
#inline ( display : none ; ) |
Několik stylů pro návrh polí formuláře a několik tříd použitých na pole, když jsou data zadána nesprávně. Když jsou chyby opraveny, styl polí se stane normálním:
1 | txt ( txtarea ( Txt: focus, Input.error, Input.error: focus, |
Chcete-li navrhnout tlačítko „Odeslat“, provedeme:
1 | #poslat ( #poslat : podržte kurzor ( #poslat : aktivní ( |
Přejděme k nejzajímavější části, pomocí pluginu. Zavoláme metodu .fancybox a třída link funguje jako selektor:
$(document).ready(function() ( |
Rušíme také standardní akci formuláře odeslat (odeslat), to nám umožní použít vlastní ajaxovou žádost. Při volání metody jsem nepoužil ani jeden parametr a nechal všechny výchozí hodnoty. Za zmínku však stojí:
| Jméno | Popis |
| vycpávka | Odsazení obsahu v okně (výchozí 15px) |
| okraj | Vzdálenost od okrajů prohlížeče k oknu (výchozí 20px) |
| šířka | Výchozí šířka pro obsah „IFRAME“ a „SWF“. Také pro objekty "inline", "AJAX" a "HTML", pokud je "AutoSize" nastaveno na "false". Může být číselný nebo "Automatický". (Výchozí 800px) |
| výška | Výchozí výška pro obsah „IFRAME“ a „SWF“. Také pro objekty "inline", "AJAX" a "HTML", pokud je "AutoSize" nastaveno na "false". Může být číselný nebo "Automatický". (Výchozí 600 pixelů) |
| minWidth | Minimální šířka okna (výchozí 100px) |
| minVýška | Minimální výška okna (výchozí 100 pixelů) |
| maxWidth | Maximální šířka okna (výchozí 9999 pixelů) |
| maxVýška | Maximální výška okna (výchozí 9999 pixelů) |
| automatická velikost | Pokud je „true“, pak autoHeight a autoWidth jsou také „true“ (výchozí hodnota true) |
| autoHeight | Pokud je nastaveno na „true“, výška obsahu „inline“, „AJAX“ a „HTML“ se určí automaticky (výchozí hodnota je false) |
| autoWidth | Pokud je nastaveno na „true“, pro obsah „inline“, „AJAX“ a „HTML“ je šířka určena automaticky (výchozí hodnota je false) |
| autoResize | Je-li nastaveno na "true", obsah se změní podle změny okna |
| autoCenter | Pokud je nastaveno na „true“, obsah bude vycentrován |
| fitToView | Pokud je nastaveno na „true“, okno se před otevřením přizpůsobí velikosti prohlížeče (výchozí hodnota je true) |
| poměr stran | Pokud je nastaveno na „true“, je změna velikosti omezena poměrem stran (výchozí hodnota je nepravda) |
| topRatio | Vertikální polohování. Pokud je nastaveno na 0,5, bude vzdálenost k horní a dolní části okna prohlížeče stejná. Pokud je 0, modální okno bude nahoře (výchozí 0,5) |
| levý poměr | Podobný parametr pouze pro horizontální umístění (výchozí 0,5) |
| rolování | Zobrazit posuvníky. Lze nastavit na „auto“, „ano“, „ne“ nebo „viditelné“ (výchozí nastavení je auto) |
| wrapCSS | Vlastní třída CSS |
| šipky | Pokud je nastaveno na „true“, zobrazí se navigační tlačítka (výchozí hodnota je true) |
| zavřítBtn | Pokud je nastaveno na „true“, zobrazí se tlačítko pro zavření okna (výchozí hodnota je true) |
| zavřítKlikněte | Pokud je „pravda“, po kliknutí na obsah se okno zavře (výchozí hodnota je nepravda) |
| dalšíKlikněte | Pokud je nastaveno na „true“, pak v galerii, když kliknete na obsah, přejdete na další obrázek (ve výchozím nastavení False) |
| kolečko myši | Pokud je „pravda“, lze galerii posouvat pomocí kolečka myši (výchozí hodnota true) |
| automatické přehrávání | Pokud je „pravda“, pak když otevřete první prvek v galerii, spustí se prezentace (výchozí hodnota je false) |
| rychlost přehrávání | Rychlost prezentace (výchozí 3000 milisekund) |
| předpětí | Počet miniatur obrázků pod hlavním obrázkem (výchozí 3) |
| modální | Pokud je „true“, navigace a tlačítko zavřít budou zakázány (výchozí hodnota je nepravda) |
| smyčka | Pokud je „pravda“, galerie se po dosažení konce spustí znovu (výchozí hodnota je true) |
| ajax | Možnost požadavku ajax |
| iframe | Možnost správy iframe |
| swf | Možnost správy obsahu swf |
| klíče | Můžete definovat klávesy pro procházení prezentací |
| směr | Směr navigace |
| rolovat Venku | Pokud je nastaveno na „true“, skript se vyhne vytváření posuvníků (výchozí hodnota je true) |
| index | Přepíše index počáteční skupiny (výchozí 0) |
| typ | Přepíše typ obsahu. Podporované typy: "image", "inline", "AJAX", "IFRAME", "SWF" a "HTML" (výchozí hodnota null) |
| href | Přepíše zdroj obsahu odkazem (výchozí hodnota je null) |
| obsah | Přepíše obsah, který bude zobrazen (výchozí hodnota je null) |
| titul | Přepíše záhlaví, můžete nastavit libovolný HTML (výchozí je null) |
| tpl | Objekt obsahující různé šablony |
| openEffect/ closeEffect / další efekt/ prevEffect |
Animační efekt pro akce, možné hodnoty jsou 'fade', 'fade', 'elastic', 'elastic' |
| openSpeed/ closeSpeed / další rychlost / prevSpeed |
Rychlost animace (výchozí 250) |
| openEasing/ closeEasing / nextEasing/ prevEasing |
Metoda uvolnění pro každý typ přechodu (výchozí je swing) |
| openOpacity/ zavřítOpacita |
Pokud je nastaveno na „true“, změní se průhlednost (výchozí hodnota je true) |
| openMethod/ closeMetoda/ dalšíMetoda/ prevMetoda |
Efekt přechodu může nabývat hodnot „zoomIn“ / „zoomOut“ / „changeIn“ / „changeOut“ |
| rodič | Nadřazený prvek kontejneru. To je užitečné pro ASP.NET, kde je horním prvkem „form“ (výchozí je tělo) |
Použití těchto parametrů je velmi jednoduché, řekněme, že chceme zmenšit výplň na obsah obsahu a výšku obsahu:
1 | $(".modalbox" ) .fancybox (( |
Před odesláním zkontrolujeme správnost zadaných údajů a správnost zadané emailové adresy. Proto budeme potřebovat ověřovací funkci. Použijeme regulární výraz:
1 | funkce validateEmail(e-mail) ( |
Posledním krokem je odeslání zprávy. Událost kliknutí sledujeme na tlačítku „Odeslat“:
1 | $("#odeslat" ) .on ("kliknout" , funkce () ( |
Do prvních dvou proměnných umístíme údaje zadané uživatelem. Zjistíme délku zprávy (msglen) a zkontrolujeme zadanou emailovou adresu (mailvalid). Dále zkontrolujeme, zda je proměnná mailvalid false, což znamená, že e-mailová adresa byla zadána nesprávně, a tento vstup bude zvýrazněn červeně. Kontrolujeme také počet znaků zadaných do textu zprávy, pokud je méně než 4 znaky, označíme, že se jedná o chybu (zadání textu zvýrazníme červeně). $("#contact" ) .serialize() ,
úspěch: funkce (data) (
if (data == "true" ) (
$("#contact" ) .fadeOut ( "rychle" , funkce () (
$(this).before("Úspěch! Vaše zpráva byla odeslána:)" );
setTimeout("$.fancybox.close()" , 1000 );
}
)
;
}
}
}
)
;
}
}
)
;
Pokud jsou zaškrtnuta obě pole, pak místo tlačítka „odeslat“ zobrazíme text, že se zpráva odesílá. To dává uživateli potvrzení, že obě pole jsou zaškrtnuta a proces probíhá.
Nyní požadavek AJAX. První parametr požadavku je typ přenosu dat (POST nebo GET). Dále specifikujeme soubor handleru (sendmessage.php). Dalším parametrem jsou data, metodou serializace připravíme data ve formulářích pro odeslání na server.
Pokud obdržíme dobrou odpověď ze serveru (tato data vygenerujeme v souboru PHP), kontaktní formulář skryjeme a zobrazíme zprávu o úspěšnosti odeslání. SetTimeout() používám proto, aby se modální okno nezavřelo hned, ale vteřinu po odeslání dat.
PHP skriptUživatelský vstup posíláme pomocí JQuery na sendmessage.php. V PHP tato data vygenerujeme z pole POST, vygenerujeme a odešleme zprávu. Pokud bylo odeslání úspěšné, vrátíme JQuery zpět true, jinak false .
V proměnné $sendto uvádíme e-mailovou adresu, na kterou budou dopisy zasílány.
1 | $sendto = " [e-mail chráněný]"
;
// Tvorba hlavičky dopisu // Tvorba těla dopisu Od: " . $usermail ." \r \n " ;$msg .=" Zpráva: " . $content ." \r \n " ;$msg .= "" ; // odeslat zprávu |
Ahoj. V této lekci vytvoříme plnohodnotný formulář zpětné vazby, který se zobrazí v modálním okně, když kliknete na tlačítko na stránce. Tuto lekci jsem udělal sám, od nuly, pouze pomocí frameworku jQuery a jednoho malého JavaScriptu potřebné soubory pro práci:
Krok 1. Obecný popis a fungování formuláře zpětné vazby:
Nejprve vám řeknu, jaké soubory budeme potřebovat a vlastně proč jsou potřeba:
- obrázky - složka, kde jsou uloženy všechny obrázky našeho formuláře;
- index.html - hlavní soubor „index“, ve kterém bude umístěno tlačítko pro vyvolání formuláře zpětné vazby;
- contact.html je soubor, který obsahuje samotný formulář. Je to tento soubor, který bude zahrnut do modálního okna;
- send.php - soubor handleru zodpovědný za odesílání dopisů;
- jquery.js - hlavní rámec jQuery;
- style.css je soubor s kaskádovými styly pro náš formulář.
Jdeme tedy dál a popořadě... Formulář bude fungovat následovně: Uživatel přejde na stránku, na které je tlačítko pro vyvolání modálního okna, stiskne jej, poté se objeví formulář, do kterého návštěvník zadá všechny data a text zprávy a odešle, poté je přesměrován na stránku se zprávou o úspěšném či neúspěšném odeslání dopisu. To je vše, nyní začneme sestavovat náš formulář...
Krok 2. Tlačítko pro vyvolání formuláře.
Aby se tedy zobrazilo naše modální okno s formulářem, musíme ho k tomu nějak donutit. K tomu nám stačí umístit na stránku běžné tlačítko. Kód takového tlačítka je uveden níže spolu se styly, které jsou na něj použity:
Napište zprávu správci
Krok 3. Samotný formulář + jeho nastavení
Nyní pojďme zjistit, kde bude umístěn náš formulář zpětné vazby. A bude umístěn v souboru contact.html, který se již nachází ve zdrojovém kódu lekce. Tento formulář je poměrně malý, takže jeho kód vložím níže:
Odeslání zprávy administraci:
Jak vidíte, při procházení kódu i pouhým okem vidíte, že pro lepší zobrazení formuláře jsem použil rozložení tabulky. To bylo pro mě velmi užitečné pro vyrovnání všech polí formuláře.
Krok 4. Zpracovatel odpovědný za odesílání dopisů
Zde vám rychle řeknu o hlavním procesoru pro odesílání dopisů. Jeho kód sem dávat nebudu, protože je ve zdrojovém kódu. Stáhněte si a prohlédněte si její obsah. Pokud znáte PHP někde na středně pokročilé úrovni, jako já, pak můžete celý kód tohoto handleru snadno analyzovat sami. Pokud je vše připraveno, pokračujte...
Krok 5. „Zašroubování“ hlavního rámce jQuery
Nyní, jako v každé lekci jQuery, musíme „našroubovat“ hlavní rámec jQuery. Chcete-li to provést, vraťte se trochu zpět, tam, kde se nachází naše tlačítko, a mezi značky a vložte následující kód:
Krok 6: Styling formuláře
Jak můžete vidět, styly pro náš formulář jsou umístěny samostatně v souboru style.css, protože tyto styly zabírají příliš mnoho místa. Potřebujeme pouze propojit níže uvedený kód s naším indexovým souborem:
Krok 7. Vylepšení jQuery
Nyní, aby modální okno formuláře plně fungovalo, musíme vložit následující kód jQuery:
$(function() ( $("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href"));
Závěr.
Náš zajímavý formulář zpětné vazby je připraven. Cesta byla dlouhá a obtížná, takže pokud někdo něčemu nerozumí, vyslechnu si vaše otázky v komentářích k této lekci. A to je pro mě vše, uvidíme se znovu, přátelé!
S upřímnou úctou, váš průvodce jQuery - M.K.
