Jednoduchý kontaktný formulár pomocou Ajaxu. Formulár spätnej väzby Ajax v modálnom okne Modálne okno s e-mailom s názvom formulára predplatného

Venoval som sa tomu, ako môžete vytvoriť vyskakovacie okno, ktoré sa na stránke zobrazí raz a po určitom časovom intervale. Takže ako možnosť môžete do tohto okna vložiť formulár. Môže to byť formulár predplatného alebo kontaktný formulár, vo všeobecnosti čokoľvek. Formuláre Ajax je lepšie zobrazovať vo vyskakovacích oknách, aby sa údaje odosielali bez opätovného načítania stránky.

Štruktúra článku

Ak robíte webovú stránku na engine, napríklad Joomla alebo WordPress, potom môžete samozrejme použiť rôzne hotové riešenia pre formuláre vrátane dizajnérov. Ale čo keď jednoducho navrhujete v čistom HTML a zákazník požiada o „oživenie“ formulárov tak, aby fungovali. Tu sa táto forma hodí.

UPD. 8.2.2018
Článok bol prepísaný s ohľadom na to, že formulár bol zverejnený na GitHub

Takže, začnime. Najprv si stiahnite zdroje formulárov z môjho úložiska GitHub.

Túto zostavu som zostavil pomocou správcu úloh Gulp. Písal som o tom, ako sa s ním pracuje, určite si prečítajte.

Pripojenie formulára k lokalite

Rozbaľte archív s formulárom. Potom skopírujte celý obsah z priečinka dist do priečinka formulárov (napríklad ajax-form) v šablóne lokality. Ďalej pripájame zdroje – štýly a skripty. V priečinkoch css a js sú dve verzie - komprimovaná a bežná. Ak plánujete v budúcnosti vykonať zmeny v kóde, je lepšie pripojiť nekomprimované verzie.

Ak vaša stránka už má povolenú knižnicu jQuery, nemusíte ju pripájať. Dávaj pozor na .

Inicializácia formulára

Dovoľte mi okamžite poznamenať, že validácia polí je organizovaná pomocou HTML5.

Formulár sa volá metódou .simpleSendForm(), napríklad:

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

Namiesto #idForm zadáme identifikátor formulára. Vo všeobecnosti môžete inicializačný kód formulára nájsť v súbore scripts.js. Kód volania doplnku je možné odtiaľ vystrihnúť a napísať priamo pred . Nezabudnite na jQuery.(document).ready() .

Formulár môže akceptovať niektoré možnosti.

možnosti

• successTitle (reťazec) — Názov ďakovnej správy pri odoslaní formulára. Predvolené nastavenie je „Ďakujeme, že ste si vybrali nás!“
• successText (reťazec) – Text pod názvom ďakovnej správy. Predvolená hodnota je „Čoskoro vás budeme kontaktovať“.
• errorTitle (reťazec) — názov chybovej správy pri odoslaní formulára. Predvolená hodnota je „Správa nebola odoslaná!“.
• errorSubmit (reťazec) — text správy o chybe odoslania formulára. Predvolená hodnota je „Chyba pri odosielaní formulára!“.
• errorNocaptcha (reťazec) — chybový text, ak captcha nebola vyplnená.
• errorCaptcha (reťazec) — text chyby, ak kontrola zlyhala.
• mailUrl (reťazec) — cesta k súboru obslužného programu. Predvolená hodnota je "../form-submit/submit.php". Ak sa priečinok „form-submit“ nenachádza v koreňovom adresári lokality, mali by ste zmeniť a zadať úplnú cestu.
• autoClose (boolean) - Automaticky zatvorí okno po úspešnom odoslaní formulára (pre formuláre v modálnom okne). Okno formulára sa zatvorí a po 5 sekundách sa zobrazí správa s poďakovaním. Tentokrát možno prepísať.
• autoCloseDelay (číslo) - trvanie (v milisekundách) zobrazovania ďakovnej správy, po ktorej sa zatvorí. Predvolená hodnota je 5 000 (5 sekúnd).
• ladenie (boolean) - predvolene nepravda. Povoliť ladenie, ak sa vyskytnú problémy s formulárom. Pozrite si chybové hlásenia v konzole.
• captcha (boolovská hodnota) – predvolene nepravda. Povoliť alebo zakázať Recaptcha 2.0.
• captchaPublicKey (reťazec) — recaptcha verejný kľúč.

Formulár v modálnom okne

Náš formulár je možné zobraziť aj v modálnom okne. Modal zobrazí knižnica.

HTML kód

Kód tlačidla

Požiadajte o hovor

Kód formulára

Inicializujte modálne okno a formulár. Nechajte okno zatvoriť automaticky po 3 sekundách. po úspešnom odoslaní formulára. Kód volania Magnific Popup nájdete aj v súbore scripts.js.

Volanie formulára s modálnym oknom // ======= 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álny formulár ==== $("#idForm").simpleSendForm (( successTitle: "Vaša žiadosť bola prijatá!", successText: "Náš zamestnanec vás bude čo najskôr kontaktovať." , autoClose : true, autoCloseDelay: 3000 )); Ako povoliť Recaptcha?

Ak chcete povoliť recaptcha vo formulári, musíte pridať prázdny blok s triedou recaptcha do html kódu formulára na miesto, kde ho chcete zobraziť. Ďalej v kóde na volanie doplnku formulára odovzdáme možnosť captcha s hodnotou true a váš verejný kľúč recaptcha odovzdáme možnosti captchaPublicKey. Môžete získať verejné a súkromné ​​​​kľúče.

// ===== Init captcha v tvare ==== $("#idForm").simpleSendForm(( successTitle: "Vaša žiadosť bola prijatá!", successText: "Náš zamestnanec vás bude čo najskôr kontaktovať ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Ďalej otvorte súbor obslužného programu formulára submit.php z adresára form-submit. Hľadáme premennú recaptchaOn (asi 7. riadok) a nastavíme ju na true . Ďalej vyhľadajte premennú $secret (približne riadok 89) a zmeňte súkromný kľúč na svoj vlastný.

V podstate všetko. Po týchto manipuláciách by ste mali vidieť captcha.

Upozorňujeme, že na stránke s ukážkou funguje captcha v testovacom režime, pretože sú uvedené testovacie kľúče od spoločnosti Google.

Teraz sa pozrime do súboru obslužného programu formulára (submit.php) a prejdeme si hlavné časti kódu. Obslužný program funguje v PHP, takže ak chcete otestovať formulár, budete musieť použiť .

Možné chyby Správa z formulára sa neodošle, preloader len prebehne a je to. Aký je problém?

Skontrolujte, či je cesta k súboru obslužného programu správne zadaná v inicializácii formulára:

mailUrl: — cesta k súboru obslužného programu

Tiež skontrolujte, či je recaptcha správne povolená. To znamená, že ak je zakázaná, potom by voľby recaptcha v inicializačnom kóde a $recptchaOn v súbore obslužného programu mali byť nastavené na false alebo true, ak je recaptcha povolená.

Neukázané Google Recaptcha v tvare

Skontrolujte, či boli prenesené hodnoty recaptcha (volanie recaptcha) a $recaptchaOn (súbor obslužného programu) - pravda. Skontrolujte tiež, či ste správne zadali kľúče – verejné a súkromné.

Urobil som všetko podľa návodu, ale formulár nefunguje, kde môžem hľadať chybu?

Najprv vám odporúčam pozrieť sa do konzoly prehliadača a skontrolovať chyby. Tiež skontrolujte, či máte povolenú knižnicu jQuery. Skontrolujte, či je súbor scripts.js zahrnutý správne. Ak je všetko v poriadku, skúste povoliť ladenie pomocou možnosti debug: true. Po zapnutí skontrolujte konzolu, či neobsahuje chyby.

Toto je forma. Použite ho na svojom webe, dúfam, že vám bude užitočný. Čo ešte povedať? Poďme sa porozprávať teraz - v komentároch. Opýtajte sa, ak je niečo nejasné. Taktiež, ak nájdete chybu, dajte mi prosím ihneď vedieť a my ju opravíme...

To je všetko. Ďakujem za tvoju pozornosť. Uvidíme sa v ďalších príspevkoch!

Zdravím svojich čitateľov, získal som skúsenosti a poviem vám o princípoch fungovania formulára spätná väzba php. Ukážem ti to jasné príklady, aby ste pochopili, ako všetko funguje a ako prebieha interakcia medzi samotným vstupným formulárom (jeho vstupnými poľami) a súborom handler napísaným v PHP. Okrem toho si môžete bezplatne stiahnuť zdroje spolu s .

Samozrejme, bude skvelé, ak aspoň trochu rozumiete HTML / CSS, pretože... Kód budete musieť analogicky pretiahnuť na svoju stránku. Nebudeme sa dotýkať jazyka PHP, ukážem vám všetky potrebné zmeny, ktoré musíte urobiť sami.

AKTUALIZÁCIA: Na základe ohlasov čitateľov som si uvedomil, že potrebujem niečo krajšie a funkčnejšie, prosím zoznámte sa so mnou, pozrite si to a mrknite. Vyberte si, ktorý sa vám najviac páči)

UPDATE2: Verzia 3.0 Adaptive Landing + ajax forma s prenosom UTM tagov, prečítajte si a uvidíte. Bude sa ti to páčiť

Spomenul som si na seba, keď som sa prvýkrát pokúsil vytvoriť formulár spätnej väzby v PHP sám, a aby som bol úprimný, bolo to náročné na prácu, pretože... Nechápal som, čo a ako sa deje. Trpezlivosť a vytrvalosť, priatelia, a budete úspešní.

PHP formulár spätnej väzby – štruktúra

Analýza samotného formulára spätnej väzby si preštudujeme na príklade vstupná stránka (Vstupná stránka), mimochodom, o tom je samostatný článok. Ako to funguje v akcii, môžete vidieť pomocou tlačidiel nižšie, pripájam zdroje tejto jednostránkovej stránky a hlavný súbor php handler (tento súbor spracuje a odošle e-mail)

Po stiahnutí zdrojov a rozbalení archívu uvidíte nasledujúcu štruktúru súborov:

• obrázok - všetky obrázky, ktoré sa používajú pre samotnú vstupnú stránku, tlačidlá atď.
• js – skripty javascript, ktoré poskytujú napríklad vyskakovacie modálne okno na stránke a iné vizuálne efekty
• index.html - indexový súbor našej jednostránkovej stránky
• index1.php je súbor handlera, do ktorého sa prenesú hodnoty z formulára, následne sa z prijatých premenných vygeneruje list a odošle sa na zadanú e-mailovú adresu. Index1.php bude fungovať aj ako medzistránka s upozornením o úspešnom odoslaní údajov s automatickým presmerovaním späť na index.html (t. j. naša jednostránková stránka)

Je dôležité, aby váš hosting, kde sa nachádzajú súbory stránky, podporoval PHP spracovanie, inak sa súbor index1.php nespustí a nebude fungovať. Ak chcete objasniť túto nuanciu, kontaktujte kampaň, kde je váš hosting zaregistrovaný, alebo ho len otestujte - funguje to, to znamená, že existuje podpora. Ak nie, povoľte možnosť podpory jazyka php

Pozrite sa na diagram interakcie všetkých prvkov (stránka, formulár, obslužný program)

Zdrojový kód na volanie formulára a obsluhy

Pozrime sa, ako funguje jedno z tlačidiel, ktoré vyvolá modálne vyskakovacie okno obsahujúce formulár spätnej väzby. Toto je dané zdroj- nie je to len jeden, dva vložené na stránku a bude to fungovať, budete si to musieť sami prispôsobiť tak, aby vyhovovali vášmu dizajnu a potrebám.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Požiadať o spätné volanie Požiadať o spätné volanie

Požiadať o spätné volanie Požiadať o spätné volanie

Nižšie je uvedený úplný zdrojový kód obslužného programu index1.php, aby ste mohli nastaviť odosielanie do vašej poštovej schránky, zmeňte „ [chránený e-mailom]„K svojmu, zvyšok v zásade môže zostať nezmenený

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 kontaktovaní

Budete kontaktovaní telo ( pozadie: #22BFF7 url(img/zakaz.jpg) hore -70 % stred bez opakovania; ) setTimeout("location.replace("/index.html")", 3000); /*Zmeňte aktuálnu adresu stránky po 3 sekundách (3000 milisekúnd)*/

Kontrola funkčnosti formulára

Vyvolajte okno a zadajte údaje pre testovaciu kontrolu nášho formulára

Ešte raz pripomínam, že váš hosting musí podporovať spracovanie php súbory, inak náš handler jednoducho nebude vykonaný a na zadanú emailovú adresu nebude zaslaný žiadny list. Výsledok úspešne vyplneného formulára spätnej väzby

To je z mojej strany všetko, snažil som sa čo najlepšie sprostredkovať zmysel a fungovanie scenára. Ak máte nejaké otázky, pokojne ma kontaktujte v komentároch alebo na VK (pozri kontaktné údaje). Prajem vám ľahkú a produktívnu prácu.

Ahojte všetci. Boli sme bombardovaní otázkami, ako implementovať formulár, ktorý sa po kliknutí na tlačidlo zobrazí v modálnom okne a po odoslaní sa zobrazí správa o úspechu alebo neúspechu.

Myslím, že podobných vecí je na internete dosť, ale keďže sa ľudia pýtajú, rozhodol som sa to urobiť. Okrem toho musí byť takáto funkcia prítomná na takmer každej vstupnej stránke, aby bolo možné implementovať tlačidlo spätného volania. A skutočne, teraz je stále viac výsledkov testovania AB, ktoré ukazujú, že otvorené formuláre fungujú horšie ako tie, ktoré sú skryté v modálnom okne a otvárajú sa po kliknutí na tlačidlo.

Niektorí tvrdia, že je to spôsobené tým, že ľudia si pomaly „vyvíjajú imunitu“ a otvorená forma je agresívny predaj. Údajne je teraz čas, keď používateľ, keď vidí otvorený formulár, verí, že sa mu snaží niečo „predať“. S touto teóriou úplne nesúhlasím, ale je tam zrnko pravdy. V niektorých typoch podnikania to môže byť pravda. No a teraz poďme k implementácii formulára.

Poznámka! Nebudem podrobne popisovať každú akciu, ale ponúknem vám hotovú verziu v zdrojovom kóde. Ak máte nejaké otázky, píšte do komentárov. Vymyslíme :)

Dnes nezačneme s jQuery, ale s rozložením tlačidla a formulára. Všetky skripty zahrnieme na koniec stránky.

Tlačidlo, na ktoré sa po kliknutí otvorí modálne okno:

Odošlite žiadosť

Môžete nastaviť ľubovoľnú triedu, ale do href napíšte #modal - toto bude id kontajnera s tieňovaním a kontaktným formulárom.

Teraz dám kód pre formulár a blok, na ktorom bude formulár umiestnený:

Zanechajte svoje kontaktné údaje a náš konzultant vás bude kontaktovať Chcem tento formulár pre moju webovú stránku

Po pridaní štýlov to vyzeralo takto:

Na vytvorenie modálneho okna bola použitá knižnica Remodal. Toto je sada súborov css a js, len na vytváranie animovaných modálnych okien. Môžete si ho stiahnuť z odkazu alebo s mojimi úpravami na konci článku.

Medzi značky hlavy pridávame štýly:

A pred koncovú značku tela pridajte skripty:

Script.js je skript na spracovanie formulára. Rovnaký Ajax, ktorý nám umožňuje vykonať celý postup bez opätovného načítania stránky:

$(document).ready(function () ( $("form").submit(function () ( // Získanie ID formulára var formID = $(this).attr("id"); // Pridať hash k názvu ID var formNm = $("#" + formID); $.ajax(( typ: "POST", url: "mail.php", údaje: formNm.serialize(), úspech: funkcia (údaje) ( // Výstup textu výsledku odosielania $(formNm).html(data); ), chyba: funkcia (jqXHR, text, chyba) ( // Výstup textu chyby odosielania $(formNm).html(error); ) )); návrat false; ) ); ));

originál nedám css kód a js zo súborov zodpovedných za modálne okno a formulár, pretože sú dosť veľké. Ak áno, pozrite sa na zdroj. Ale PHP handler je do značnej miery štandardný (ak to tak môžem povedať):

Prosím, nezabudnite zmeniť svoje adresy Email na vlastnú päsť.

Toto je ajax formulár, ktorý sme dostali. Ospravedlňujeme sa, že som sa nesnažil podrobne vysvetliť, ako bol každý prvok vyrobený. Chcel som len dať hotový výsledok, ale nemá zmysel popisovať všetky animácie a vzhľady. Stiahnite si zdroj a implementujte ho na svoj web. A to je na dnes všetko. Veľa šťastia všetkým!

Chlapci, vyzývam vás, aby ste otestovali formu na skutočnej resp virtuálny server(hosting). Uistite sa, že váš server podporuje PHP, že máte platený plán a nie skúšobné obdobie. V opačnom prípade v 90% prípadov formulár nebude fungovať.

Nečakajte na list u vás poštová schránka, ak ste jednoducho otvorili indexový súbor v prehliadači a klikli na tlačidlo „Odoslať“. PHP je jazyk na strane servera!

Ak ste príliš leniví na to, aby ste na to prišli a vytvorili si formu sami, potom odporúčam venovať pozornosť.

Aktualizovaná verzia článku sa nachádza