Jednoduchý kontaktní formulář pomocí Ajaxu. Formulář zpětné vazby Ajax v modálním okně Modální okno s e-mailem s názvem formuláře předplatného

Věnoval jsem se tomu, jak lze vytvořit vyskakovací okno, které se na webu zobrazí jednou a po určitém časovém intervalu. Volitelně tedy můžete do tohoto okna vložit formulář. Může to být formulář předplatného nebo kontaktní formulář, obecně cokoliv. Je lepší zobrazovat formuláře Ajax ve vyskakovacích oknech, aby byla data odeslána bez opětovného načítání stránky.

Struktura článku

Pokud děláte web na enginu, například Joomla nebo WordPress, pak můžete samozřejmě použít různá hotová řešení pro formuláře, včetně návrhářů. Co když ale jednoduše navrhujete v čistém HTML a zákazník požádá o „oživení“ formulářů, aby fungovaly. Zde se tato forma hodí.

UPD. 8. 2. 2018
Článek byl přepsán s ohledem na to, že formulář byl zveřejněn na GitHubu

Takže, pojďme začít. Nejprve si stáhněte zdroje formulářů z mého úložiště GitHub.

Sestavil jsem tuto sestavu pomocí správce úloh Gulp. Psal jsem o tom, jak s ním pracovat, určitě si přečtěte.

Připojení formuláře k webu

Rozbalte archiv s formulářem. Dále zkopírujte veškerý obsah ze složky dist do složky formulářů (například ajax-form) v šabloně webu. Dále propojíme zdroje – styly a skripty. Ve složkách css a js jsou dvě verze – komprimovaná a běžná. Pokud plánujete v budoucnu provádět změny v kódu, je lepší připojit nekomprimované verze.

Pokud váš web již má povolenou knihovnu jQuery, nemusíte ji připojovat. Dávejte pozor na .

Inicializace formuláře

Dovolte mi okamžitě poznamenat, že ověřování polí je organizováno pomocí HTML5.

Formulář je volán metodou .simpleSendForm(), například:

$("#idForm").simpleSendForm();

Místo #idForm uvedeme identifikátor formuláře. Obecně platí, že kód pro inicializaci formuláře najdete v souboru scripts.js. Volací kód pluginu lze odtud vyjmout a zapsat přímo před . Nezapomeňte na jQuery.(document).ready() .

Formulář může přijmout některé možnosti.

Možnosti

• successTitle (řetězec) — Název děkovné zprávy při odeslání formuláře. Výchozí nastavení je „Děkujeme, že jste si vybrali nás!“
• successText (řetězec) – Text pod názvem děkovné zprávy. Výchozí nastavení je „Brzy vás budeme kontaktovat“.
• errorTitle (řetězec) — název chybové zprávy při odeslání formuláře. Výchozí nastavení je „Zpráva nebyla odeslána!“.
• errorSubmit (string) — text chybové zprávy odeslání formuláře. Výchozí nastavení je „Chyba při odesílání formuláře!“.
• errorNocaptcha (řetězec) — text chyby, pokud captcha nebyla vyplněna.
• errorCaptcha (řetězec) — text chyby, pokud se kontrola nezdařila.
• mailUrl (řetězec) — cesta k souboru handleru. Výchozí hodnota je "../form-submit/submit.php". Pokud vaše složka „form-submit“ není v kořenovém adresáři webu, měli byste změnit a zadat úplnou cestu.
• autoClose (boolean) - Automaticky zavře okno po úspěšném odeslání formuláře (pro formuláře v modálním okně). Okno formuláře se zavře a po 5 sekundách se zobrazí zpráva s poděkováním. Tentokrát lze přepsat.
• autoCloseDelay (číslo) - doba (v milisekundách) zobrazení děkovné zprávy, po které se zavře. Výchozí hodnota je 5000 (5 sekund).
• debug (boolean) - ve výchozím nastavení false. Povolit ladění v případě problémů s formulářem. Viz chybové zprávy v konzole.
• captcha (boolean) - ve výchozím nastavení false. Povolte nebo zakažte Recaptcha 2.0.
• captchaPublicKey (řetězec) — recaptcha veřejný klíč.

Formulář v modálním okně

Náš formulář lze také zobrazit v modálním okně. Modal zobrazí knihovna.

HTML kód

Kód tlačítka

Požádejte o zavolání

Kód formuláře

Inicializujte modální okno a formulář. Necháme okno zavřít automaticky po 3 sekundách. po úspěšném odeslání formuláře. Kód volání Magnific Popup můžete také najít v souboru scripts.js.

Volání formuláře s modálním oknem // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline", fixedContentPos: false, fixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removeDelay: 300, mainClass: "mfp-top-up" )); // ===== Init modální formulář ==== $("#idForm").simpleSendForm (( successTitle: "Vaše žádost byla přijata!", successText: "Náš zaměstnanec vás bude co nejdříve kontaktovat." , autoClose : true, autoCloseDelay: 3000 )); Jak povolit Recaptcha?

Pokud chcete povolit recaptcha ve formuláři, musíte přidat prázdný blok s třídou recaptcha do html kódu formuláře na místo, kde jej chcete zobrazit. Dále v kódu pro volání formuláře plugin předáme možnost captcha s hodnotou true a váš veřejný klíč recaptcha předáme možnosti captchaPublicKey. Můžete získat veřejné a soukromé klíče.

// ===== Init captcha ve tvaru ==== $("#idForm").simpleSendForm(( successTitle: "Vaše žádost byla přijata!", successText: "Náš zaměstnanec vás bude co nejdříve kontaktovat ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Dále otevřete soubor handler formuláře submit.php z adresáře form-submit. Hledáme proměnnou recaptchaOn (asi na 7. řádku) a nastavíme ji na true . Dále vyhledejte proměnnou $secret (přibližně řádek 89) a změňte soukromý klíč na svůj vlastní.

V podstatě všechno. Po těchto manipulacích byste měli vidět captcha.

Vezměte prosím na vědomí, že na demo webu funguje captcha v testovacím režimu, protože jsou uvedeny testovací klíče od společnosti Google.

Nyní se podíváme do souboru obslužného programu formuláře (submit.php) a projdeme si hlavní části kódu. Obslužný program funguje v PHP, takže pokud chcete formulář otestovat, budete muset použít .

Možné chyby Zpráva z formuláře se neodešle, preloader jen proběhne a je to. Co je za problém?

Podívejte se, zda je cesta k souboru obslužného programu správně zadána v inicializaci formuláře:

mailUrl: — cesta k souboru handleru

Zkontrolujte také, zda je správně povolena recaptcha. To znamená, že pokud je zakázáno, pak by volby recaptcha v inicializačním kódu a $recptchaOn v souboru obslužného programu měly být nastaveny na false nebo true, pokud je recaptcha povolena.

Nezobrazeno Google Recaptcha ve tvaru

Zkontrolujte, zda byly přeneseny hodnoty recaptcha (recaptcha call) a $recaptchaOn (soubor obslužného programu) - skutečný. Zkontrolujte také, zda jste správně zadali klíče – veřejný a soukromý.

Udělal jsem vše podle návodu, ale formulář nefunguje, kde hledat chybu?

Nejprve vám doporučuji podívat se do konzoly prohlížeče a zkontrolovat chyby. Zkontrolujte také, zda máte povolenou knihovnu jQuery. Zkontrolujte, zda je správně zahrnut soubor scripts.js. Pokud je vše v pořádku, zkuste povolit ladění pomocí možnosti debug: true. Po zapnutí se podívejte na konzoli, zda neobsahuje chyby.

Toto je formulář. Použijte jej na svém webu, doufám, že vám bude užitečný. co ještě říct? Pojďme si promluvit teď – v komentářích. Zeptejte se, pokud není něco jasné. Také, pokud najdete chybu, dejte mi prosím okamžitě vědět a my ji opravíme...

To je vše. Děkuji za pozornost. Uvidíme se v dalších příspěvcích!

Zdravím své čtenáře, získal jsem zkušenosti a povím vám o principech fungování formuláře zpětná vazba php. Ukážu vám to jasné příklady, abyste pochopili, jak vše funguje a jak probíhá interakce mezi samotným vstupním formulářem (jeho vstupními poli) a souborem handleru napsaným v PHP. Zdroje si navíc můžete zdarma stáhnout spolu s .

Samozřejmě bude skvělé, když 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 udělat 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 vy uspějete.

Formulář zpětné vazby PHP - struktura

Rozbor samotného formuláře zpětné vazby si prostudujeme na příkladu vstupní stránka (Vstupní stránka), 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 zprostředkující 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 zpracování PHP, 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 to, to 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)

Zdrojový kód pro volání formuláře a handleru

Pojďme se podívat, jak funguje jedno z tlačítek, které vyvolá modální vyskakovací okno obsahující formulář zpětné vazby. Toto je dané zdroj- není to jen jeden, dva vložené na stránku a bude to fungovat, budete si to muset sami upravit tak, aby vyhovovalo 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áře

Vyvolejte okno a zadejte data pro testovací kontrolu našeho formuláře

Ještě jednou připomenu, že váš hosting musí podporovat zpracování php soubory, jinak nebude náš handler jednoduše proveden a na zadanou emailovou adresu nebude zaslán žádný dopis. Výsledek úspěšně vyplněného formuláře zpětné vazby

To je za mě 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.

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 :)

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:

Odešlete přihlášku

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 vás bude kontaktovat 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. Můžete si ho stáhnout 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 na ID názvu var formNm = $("#" + ID formuláře); $.ajax(( typ: "POST", url: "mail.php", data: formNm.serialize(), úspěch: funkce (data) ( // Výstup textu výsledku odesílání $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Výstup textu chyby odesílání $(formNm).html(error); ) )); návrat false; ) ); ));

originál nedám css kód 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):

Prosím, nezapomeňte změnit své adresy E-mailem na vlastní pěst.

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, vyzývám vás, abyste otestovali formu na skutečném popř virtuální server(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.

Nečekejte na dopis u vás poštovní schránka, pokud jste jednoduše 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í