Skript pre formulár spätnej väzby v modálnom okne. Jednoduchý kontaktný formulár Ajax

Ahojte všetci. Boli bombardovaní otázkami, ako implementovať formu, v ktorej sa objavuje modálne okno po kliknutí na tlačidlo a po odoslaní sa zobrazí správa o úspechu alebo zlyhaní.

Myslím, že na internete je toho už veľa, ale keďže sa ľudia pýtajú, rozhodol som sa to urobiť. Okrem toho by mala byť taká funkcia prítomná na takmer každej vstupnej stránke na implementáciu tlačidla spätného volania. Skutočne sa teraz objavuje stále viac výsledkov testovania AB, ktoré hovoria, že otvorené formuláre fungujú horšie ako tie, ktoré sú skryté v modálnom okne a otvoria sa po kliknutí na tlačidlo.

Niektorí tvrdia, že je to kvôli tomu, že ľudia si pomaly „rozvíjajú imunitu“ a otvorená forma je agresívnym predajom. Údajne teraz nastal čas, keď si používateľ, keď vidí otvorený formulár, myslel, že sa mu pokúšajú niečo „predať“. S touto teóriou celkom nesúhlasím, ale zrnko pravdy je prítomné. Možno v niektorých typoch podnikania je to pravda. Teraz sa dostaneme k implementácii formulára.

Poznámka! Nebudem podrobne popisovať každú akciu, ale ponúkam vám hotovú verziu v zdroji. Ak máte akékoľvek otázky, napíšte do komentárov. Zistíme :)

Dnes začneme nie s jQuery, ale s rozložením tlačidla a formulára. Všetky skripty sú uvedené na konci stránky.

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

Odošlite svoju žiadosť

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

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

Po pridaní štýlov to vyzerá 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 už pomocou mojich úprav na konci článku.

Zahrnúť štýly medzi značky hlavy:

A pred koncovú značku tela - pridajte skripty:

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

$ (document) .ready (function () ($ ("form"). submit (function () (// Get the form ID var formID = $ (this) .attr ("id"); // Add a hash na názov ID var formNm = $ ("#" + formID); $ .ajax ((typ: "POST", URL: "mail.php", data: formNm.serialize (), úspech: funkcia (údaje) ( // Výstupný text výsledku odoslania $ (formNm) .html (údaje);), chyba: funkcia (jqXHR, text, chyba) (// Výstup textu chyby odoslania $ (formNm) .html (chyba);) )); return false;));));

Originál dávať nebudem css kód a js zo súborov zodpovedných za modálne okno a formulár, pretože sú dosť veľké. Ak niečo, pozrite sa na zdroj. Obsluha php je však do značnej miery štandardná (ak to môžem povedať):

Meno odosielateľa:$ meno Telefón:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Ďakujeme za odoslanie vašej správy!
";) else (ozvena"
Chyba. Správa nebola odoslaná!
";)) else (http_response_code (403); echo" Skúste to znova ";)?>

Prosím, nezabudnite zmeniť adresy E -mail na vlastnú päsť.

Tu je formulár ajax. Ospravedlňujeme sa, že sme sa nepokúsili podrobne vysvetliť, ako boli jednotlivé prvky vyrobené. Chcel som len dať hotový výsledok, ale nemá zmysel opisovať všetky animácie, vzhľady. Stiahnite si zdroj a vložte ho na svoj web. A to je na dnes všetko. Veľa šťastia všetkým!

Chlapci, dôrazne vás žiadam, aby ste formulár vyskúšali na skutočnom alebo virtuálny server(hostiteľ). Uistite sa, že váš server podporuje php, máte platený program a nie skúšobné obdobie. V opačnom prípade v 90% prípadov formulár nebude fungovať.

Nečakajte na písmeno vo vašej poštovej schránke, ak ste v prehliadači otvorili indexový súbor 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 urobili si formu sami, potom odporúčam venovať pozornosť.

Aktualizovaná verziačlánok je

Dobrý deň, milí čitatelia! V tomto tutoriále vám ukážem, ako môžeme vytvoriť e -mailový prihlasovací formulár HTML5 na overenie zadanej adresy URL pomocou JQuery. Na overenie použijeme regulárne výrazy a zadanú adresu uložíme do databázy MySql. Pri ukladaní teda použije AJAX(t.j. zavolajte skript PHP bez opätovného načítania stránky). Výsledok si môžete pozrieť na demo stránke a tiež stiahnuť zdroj. Začnime!

Základné značenie

Začnime vytvorením nového súboru index.html. A urobme jednoduchú štruktúru dokumentu, ktorá sa bude držať HTML5. Okamžite zaradíme aj štýly CSS a knižnicu, budeme to potrebovať pri kontrole zadaného e-mailu:

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


<html lang = "ru">
<hlava>
<meta charset = "utf-8">
<názov> E -mailový prihlasovací formulár s validátorom jQuery</ názov>

<link rel = "stylesheet" type = "text / css" href = "style.css">

<script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ hlava>

<telo>

</ telo>
</ html>

Teraz ste pripravení vytvoriť svoj formulár!

E-mailový formulár na predplatné

Účelom nášho formulára je overiť e -mailovú adresu zadaného návštevníka a nejako ho uložiť do zoznamu predplatiteľov. Preto to robíme pravidelná forma tlačidlom, kliknutím na ktoré sa adresa spracuje a uloží do databázy alebo do súboru, ako je to pre kohokoľvek vhodné. V lekcii zvážime uloženie dát v buzuse. Vďaka tomu bude prehľadnejšie, zameriame sa na kontrolu správnosti zadanej adresy. Takto vyzerá formulár predplatného:

1
2
3
4
5
6
7
8
9



"Zadajte svoj e-mail" autocomplete = "off" autocorrect = "off" autocapitalize = "off">

Zabalíme formulár do bloku #completeform div, aby po uložení adresy bolo možné formulár zbaliť.

Vo vstupnom poli používame aj niekoľko nových atribútov. Typ poľa je nastavený na „e -mail“, aby mobilné prehliadače mohli zobrazovať príslušnú klávesnicu. Chrome a niektoré prehliadače WebKit to použijú na kontrolu, či používateľ zadal adresu. Atribúty autocorrect a autocapitalize sú navrhnuté špeciálne pre mobilné prehliadače.

Rozpätie s id chyba pôvodne skryté, za ktoré je zodpovedná vlastnosť display s hodnotou none, je to zapísané v súbore so štýlmi, o tom trochu neskôr. Hneď ako však používateľ zadá do poľa neplatnú e -mailovú adresu, zobrazí sa varovná správa.

Validátor JQuery a požiadavka AJAX

Začnime jednoduchou funkciou overenia e -mailu. Na otestovanie, či sa textový reťazec zhoduje so štandardnou syntaxou e -mailu, použijeme reťazec regulárnych výrazov, potom vrátime booleovskú hodnotu true, inak false.

Pozrime sa na funkciu CompleteInviteForm (). Aby sme zabránili zmätku vo formulári na zadanie adresy, efekt fadeOut zbalíme na 400 milisekúnd. A ako spätné volanie sa obrátime na funkciu $ .ajax (), s jej pomocou zavoláme súbor save.php a zadanú adresu uložíme do databázy. Nižšie uvediem zdrojový kód súboru save.php, ale zatiaľ to zistíme pomocou funkcie $ .ajax ().

$ .ajax- načíta vzdialenú stránku pomocou Požiadavka HTTP... Ako argument pre funkciu $ .ajax () je odovzdaný objekt pozostávajúci z párov kľúč / hodnota, ktoré sa používajú na inicializáciu a manipuláciu so žiadosťou. V našom prípade použijeme nasledujúce objekty:

  • typ: 'POST' - predvolene vyberte typ požiadavky na súbor ZÍSKAJTE, rozdiel medzi POST a GET nie je veľmi veľký, iba pri požiadavke GET sa údaje prenášajú v hlavičke a pri POST v tele žiadosti, preto pomocou POST môžete prenášať viac informácií;
  • URL: 'save.php' - cesta k spustiteľnému súboru;
  • údaje: ‘email =’ + $ („# email“). val ()- údaje odoslané na server. S pomocou CSS volič #e -mail odkazovať na prvok pomocou id = "e -mail" a získať obsah atribútu hodnoty, tj e -mailu zadaného používateľom. A priraďte tento obsah k premennej e -mail ktoré použijeme v súbore save.php;
  • success: function () ($ ('# Completeform'). before (' Všetko je pripravené! Boli ste pridaní do zoznamu adries.‘);} - funkcia úspechu sa nazýva úspech ajax požiadavka... Funkcia vykoná nasledujúcu akciu. Pred #completeform div vložíme obsah upozorňujúci používateľa na to, že jeho e -mail bol pridaný do zoznamu adries.

1
2
3
4
5
6
7
8
9
10
11
12

funkcia CompleteInviteForm () (
setTimeout (function () ($ ("# Completeform") .fadeOut (400, function () (
$ .ajax ((
typ: "POST",
URL: "save.php",
údaje: "email =" + $ ("# email") .val (),
úspech: funkcia () (
$ ("# Completeform"). pred ( "Všetko je pripravené! Boli ste pridaní do zoznamu adries." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

A pomocou metódy setTimeout je formulár skrytý a požiadavka ajax je vykonaná asynchrónne s oneskorením 1 100 milisekúnd.

Spracovanie formulárov

Na uľahčenie prístupu k prvkom stránky vytvoríme niekoľko premenných pomocou selektorov #error a #btnwrap.

var erdiv = $ ("# chyba");
var btnwrap = $ ("# btnwrap");

Použitie obsluhy udalostí žiť sledujte kliknutie na tlačidlo „Prihlásiť sa na odber“, jeho id = „sendbtn“. Metóda E.preventDefault (); zruší štandardné správanie prehliadača pre akciu (kliknutie na tlačidlo), konkrétne zrušíme obnovenie stránky a zmenu adresy URL. Zadaný e -mail priradíme k premennej emailval a môžeme začať spracovávať túto premennú.

najprv keby ak (! isEmail (emailval)) skontroluje, či je funkcia isEmail vrátená nepravda, znamená to, že e -mailová adresa zadaná používateľom sa nezhoduje s regulárnym výrazom, to znamená, že nie je správna, upozorníme na to používateľa v chybový blok a zobrazí sa správa (Zadali ste nesprávne e-mailovú adresu).

Teraz druhý keby sa vykoná iba vtedy, ak používateľ zadá platnú e -mailovú adresu. Potom môžeme začať s ukladaním adresy.

Aby bol proces jasný, vložte príslušný text do chybového bloku a vložte obrázok GIF do bloku, kde sa nachádzalo tlačidlo „Prihlásiť sa na odber“. Nazývame funkciu CompleteInviteForm (), o ktorej sme diskutovali vyššie.

1
2
3
4
5
6
7
8
9
10
11
12

if (! isEmail (emailval)) (
erdiv.html ( "Zadali ste nesprávnu e -mailovú adresu") ;
erdiv.css ("zobrazenie", "blok");
}
if (isEmail (emailval)) (
erdiv.css ("farba", "# 719dc8");
erdiv.html ("spracovanie ...");
(CompleteInviteForm (), 900);
}
} ) ;
} ) ;

Databáza

Keďže som si vybral spôsob uloženia zadanej adresy do databázy, budem v krátkosti hovoriť o vytvorení databázy a samotnej tabuľky, ako aj o sľúbenom kóde súboru save.php, ktorý funguje s databázou MySql.

Na to potrebujeme lokálny server, Používam Denwer. Určite to používa veľa ľudí, takže nebudem zachádzať do podrobností. Míňame phpMyAdmin, a vytvorte databázu e -mail:

Na uloženie adries predplatiteľov potrebujeme jednu tabuľku s dvoma poľami, nazvime to adresa:

Polia budú nasledujúce:

  • id- identifikátor emailová adresa(alias primárny kľúč);
  • adresa- priamo samotná e -mailová adresa.

Súbor Save.php

Teraz je načase hovoriť o tom posledný prvok vytvoreného predplatného o súbore save.php. Obsahuje skript PHP na uloženie e -mailovej adresy do databázy.

1
2
3
4
5
6

if (isset ($ _POST ["email"])) ($ email = $ _POST ["email"];)
$ db = mysql_connect ("localhost", "root", "");
mysql_select_db ("e -mail", $ db);
mysql_query ( "VLOŽIŤ NA adresu (adresu) HODNOTY (" $ email ")", $ db);
?>

Najprv skontrolujeme, či premenná e -mailu existuje v globálnom poli POST, ak áno, potom priradíme jej hodnotu miestnej premennej $ email. Ďalej vytvoríme pripojenie k serveru mysql_connect (), používateľ je root, neexistuje žiadne heslo. Výber databázy e -mail a vykonajte dotaz do databázy, vložte nový záznam do tabuľky s adresami, kde sa do polí s adresou vloží hodnota premennej $ email. To je všetko!

Tým sa lekcia končí. Chcem vám pripomenúť, že toto predplatné funguje iba na serveri (pretože používame základňu a).

Ahoj. V tomto návode vytvoríme kompletný tvar. spätnú väzbu, a zobrazí sa v modálnom okne kliknutím na tlačidlo na stránke. Túto lekciu som urobil sám od začiatku, pričom som používal iba rámec jQuery a jeden malý JavaScript. Lekcia je veľmi zaujímavá, preto ju prosím neprechádzajte! Nižšie si môžete pozrieť ukážku výsledného formulára a tiež si stiahnuť potrebné súbory na prácu:

Krok 1. všeobecný popis a ako funguje formulár spätnej väzby:

Najprv vám poviem, aké súbory budeme potrebovať a v skutočnosti prečo sú potrebné:

  • snímky- priečinok, kde sú uložené všetky obrázky nášho formulára;
  • index.html- hlavný súbor „index“, v ktorom bude umiestnené tlačidlo na vyvolanie formulára spätnej väzby;
  • contact.html- súbor, ktorý obsahuje samotný formulár. Práve tento súbor bude spojený s modálnym oknom;
  • odoslať.php- spisovateľ, ktorý je zodpovedný za odoslanie listu;
  • jquery.js- hlavný rámec jQuery;
  • style.css- súbor s kaskádovými štýlmi pre náš formulár.

Poďme teda ďalej a po poriadku ... Práca s formulárom bude nasledovná: Používateľ zadá stránku, na ktorej sa nachádza tlačidlo na vyvolanie modálneho okna, klikne naň, potom sa zobrazí formulár, v ňom návštevník zadá všetky údaje a text správy a odošle, potom sa prenesie na stránku so správou o úspešnom alebo neúspešnom odoslaní listu. To je všetko, teraz začnime sádzať náš formulár ...

Krok 2. Tlačidlo na vyvolanie formulára.

Aby sa objavilo naše modálne okno s formulárom, musíte ho k tomu nejako prinútiť. Aby sme to urobili, stačí na stránku umiestniť obyčajné tlačidlo. Kód pre toto tlačidlo je uvedený nižšie spolu so štýlmi, ktoré naň boli použité:

Krok 3 Samotný formulár + nastavenia k nemu

Teraz poďme zistiť, kde bude umiestnený náš formulár spätnej väzby. A bude to v súbore contact.html, ktorý sa už nachádza v zdrojovom kóde hodiny. Tento formulár je dosť malý, preto umiestnim jeho kód nižšie:

Odoslanie správy administratíve:



*Názov:
* E-mail:
Téma:
*Správa:

Ako vidíte, pri prechádzaní kódu, dokonca aj voľným okom, vidíte, že na lepšie zobrazenie formulára som použil rozloženie tabuľky. To bolo pre mňa veľmi užitočné na vyrovnanie všetkých polí formulára.

Krok 4. Pracovník zodpovedný za odosielanie e -mailov

Tu vás rýchlo zoznámim s hlavným správcom pošty. Jeho kód tu neuvádzam, pretože je v zdrojovom kóde. Stiahnite si a zobrazte jeho obsah. Ak poznáte php niekde na strednej úrovni, ako ja, potom môžete ľahko analyzovať celý kód tohto obslužného programu sami. Ak je všetko pripravené, pokračujte ...

Krok 5. Rozvinutie hlavného rámca jQuery

Teraz, rovnako ako pri každom inom návode jQuery, musíme „pokaziť“ hlavný rámec jQuery. Aby sme to urobili, vráťme sa trochu späť na miesto, kde sa nachádza naše tlačidlo, a medzi značky a vložte nasledujúci kód:

Krok 6. Styling formy

Ako vidíte, štýly pre náš formulár sú vykreslené oddelene v súbore style.css pretože tieto štýly zaberajú príliš veľa miesta. Potrebujeme len viazať nižšie uvedený kód na náš indexový súbor:

Krok 7. vylepšenia jQuery

Teraz, aby úplná práca v okne modálneho formulára, musíme vložiť nasledujúci kód jQuery:

Záver.

Náš zaujímavý formulár spätnej väzby je teda pripravený. Cesta bola dlhá a náročná, takže ak niekto niečomu nerozumel, vypočujem si vaše otázky v komentároch k tejto lekcii. A to je pre mňa všetko, kým sa znova stretneme, priatelia!

S pozdravom váš jQuery - sprievodca - M.K.

Všetci sme zvyknutí vídať kontakty na oddelených, špeciálne vytvorených stránkach, aby sme od nich mohli získať spätnú väzbu od používateľov. Na takýchto stránkach spravidla okrem kontaktných formulárov zverejňuje aj mnoho ďalších informácií na interakciu a komunikáciu. Mechanizmus je odladený, rokmi overený a funguje perfektne. V niektorých prípadoch je však potrebné zobraziť samostatné Kontaktný formulár ako vyskakovacie okno bez presmerovania používateľov na iné stránky.
Svojho času sme zvažovali prácu s jQuery. Dnes vás chcem zoznámiť so zaujímavým riešením na vytvorenie samostatného, ​​pôvodne navrhnutého, vyskakovacieho kontaktného formulára pre stránku.

Podľa môjho názoru je to úžasný príklad spôsobu interakcie s používateľmi.

Pozreli sme sa na príklad. Teraz rozložme tento tvar na jeho súčasti od vytvorenia celková štruktúra v HTML, pred tvarovaním vzhľadu rozloženia pomocou CSS.

HTML kód formulára

Nič nadprirodzené, najjednoduchší rámec pravidelného kontaktného formulára, umiestnený v prvku bloku div so špecifickým identifikátorom a triedou, aby sa ďalej formoval vzhľad formulára v css a pri interakcii s malým javascriptom budeme musieť aktivovať a zatvoriť kontextové okno.

Zavrieť

Pošlite nám správu

Zavrieť

Pošlite nám správu

Pri aktivácii vyskakovacieho tvaru musíme tiež vytvoriť stmavujúcu vrstvu pre všeobecné pozadie. Túto úlohu môžete splniť rôznymi spôsobmi, ale nebudeme príliš múdri a pridáme ešte jednu div priradením identifikátora: id = "fade" a triedy: class = "black-overlay". Môžete ho umiestniť vedľa formulára, aby ste v prípade potreby nemuseli dlho hľadať.

Spätná väzba

Pravdepodobne ste si všimli, že tlačidlo Zavrieť je zapísané v bloku kontaktného formulára bezprostredne pred hlavičkou, a je to logické, ale kde inde by to malo byť, tlačidlo by sa malo objaviť a zmiznúť spolu s formulárom. Vzhľad a pozíciu tlačidla Zavrieť, budeme ďalej formovať v CSS

To je všetko, pozrime sa teraz na kompletný Html kód stránky obsahujúcej vyskakovací formulár spätnej väzby:

Vyskakovací kontaktný formulár Spätná väzba
Zavrieť

Pošlite nám správu

Vyskakovací kontaktný formulár Spätná väzba

Zavrieť

Pošlite nám správu

Predtým, ako sa dostaneme k zábavnej časti, stylingu nášho kontaktného formulára pomocou CSS, trochu odstúpim. Najpozornejší si pravdepodobne všimli, že tlačidlá na otváranie a zatváranie formulára sú implementované ako odkazy pomocou "rušičky" href = "javascript: void (0)". Dobré alebo zlé, nenašiel som pre seba presnú odpoveď, túto metódu používam zo zvyku. Aj keď pre prvky, na ktorých je skriptom spracovaná udalosť onclick, myslím si, že je logickejšie a správnejšie ju použiť