Skript formuláře zpětné vazby v modálním okně. Jednoduchý kontaktní formulář s Ajaxem

Ahoj. Bombardováno otázkami, jak implementovat formulář, který se objeví modální okno po stisknutí tlačítka a po odeslání by se zobrazila zpráva o úspěchu či neúspěchu.

Myslím, že už je toho na internetu hodně, ale protože se lidé ptají, rozhodl jsem se to udělat. Kromě toho by tato funkce měla být přítomna téměř na každé vstupní stránce, aby bylo možné implementovat tlačítko zpětného volání. Nyní se skutečně objevuje stále více výsledků AB - testování, které říkají, že otevřené formuláře fungují hůře než ty, které jsou skryté v modálním okně a otevírají se po stisknutí tlačítka.

Někteří tvrdí, že je to dáno tím, že si lidé pomalu „vyvíjejí imunitu“ a otevřená forma je agresivním prodejem. Údajně je nyní doba, kdy uživatel na pohled otevřený formulář věří, že se do něj snaží něco „vtlačit“. S touto teorií tak docela nesouhlasím, ale zrnko pravdy na tom je. V některých typech podnikání to může být pravda. Nyní přejdeme k implementaci formuláře.

Poznámka! Nebudu podrobně popisovat každou akci, ale nabízím vám hotovou verzi ve zdrojovém kódu. Pokud máte nějaké dotazy - napište do komentářů. Vymyslíme :)

Dnes nezačneme jQuery, ale rozložením tlačítek a formulářů. Všechny skripty připojíme 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í uvedu kód formuláře a blok, na kterém bude formulář umístěn:

Po přidání stylů to vypadá 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 můžete z odkazu nebo již s mými úpravami na konci článku.

Přidejte styly mezi značky hlavy:

A před koncovou značku body přidejte skripty:

Script.js je skript pro zpracování formulářů. 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 text výsledku odeslání $(formNm).html(data); ), chyba: funkce (jqXHR, text, chyba) ( // Zobrazení textu chyby odeslání $(formNm).html(chyba); ) )); 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 obslužný program php je do značné míry standardní (pokud to mohu říci):

Jméno odesílatele:$jméno Telefon:$phone"; $send = mail ($to, $předmět, $zpráva, $headers); if ($send == "true") ( echo "

Děkujeme za zaslání vaší zprávy!
";) jinak ( echo "
Chyba. Zpráva nebyla odeslána!
"; ) ) else ( http_response_code(403); echo "Zkuste to znovu"; )?>

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

Zde je formulář ajax. Omlouvám se, že se nesnažím podrobně vysvětlit, jak byly jednotlivé prvky vyrobeny. Chtěl jsem jen dát hotový výsledek a nemá smysl popisovat všechny animace, vzhledy. Stáhněte si zdroj a vložte 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, že máte placený plán a ne zkušební období. Jinak v 90% případů formulář nebude fungovat.

Nečekejte na dopis ve vaší poštovní schránce, 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ánek je

Dobrý den, milí čtenáři! V tomto tutoriálu vám ukážu, jak můžeme vytvořit formulář pro předplatné e-mailu HTML5 s ověřením jQuery. Pro kontrolu použijeme regulární výrazy a zadanou adresu uložíme do databáze MySql. Při ukládání se tedy použije AJAX(tj. volání PHP skriptu bez opětovného načítání stránky). Výsledek si můžete prohlédnout na demo stránce a také si stáhnout zdrojový kód. Začněme!

Základní označení

Začněme vytvořením nového souboru index.html. A vytvoříme jednoduchou strukturu dokumentu dodržující HTML5. Ihned propojíme CSS styly a knihovnu, budeme ji potřebovat při kontrole zadaného e-mailu:

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


<htmllang="cs">
<hlava >
<meta charset="utf-8">
<titul > Formulář předplatného e-mailu jQuery s Validátorem</title>

<odkaz 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>

<tělo >

</body>
</html>

Nyní je vše připraveno k vytvoření formuláře!

Formulář odběru e-mailu

Účelem našeho formuláře je ověřit zadanou e-mailovou adresu návštěvníka a nějakým způsobem ji uložit do seznamu odběratelů. Pro toto děláme obvyklou formou tlačítkem, kliknutím na které se adresa zpracuje a uloží do databáze nebo do souboru, jak je to vhodné pro každého. V lekci se budeme zabývat uložením dat do vyrovnávací paměti. Bude to tedy přehlednější, zaměříme se na kontrolu správnosti zadané adresy. Takto vypadá formulář předplatného:

1
2
3
4
5
6
7
8
9



"Vložte svůj e-mail" autocomplete="off" autocorrect="off" autocapitalize="off" >

Zabalte formulář do bloku div #completeform, aby bylo možné po uložení adresy formulář sbalit.

Ve vstupním poli používáme také několik nových atributů. Typ pole je nastaven na „e-mail“, aby mobilní prohlížeče mohly zobrazovat příslušnou klávesnici. Chrome a některé prohlížeče WebKit to použijí ke kontrole, zda uživatel zadal adresu. Atributy autocorrect a autocapitalize jsou navrženy speciálně pro mobilní prohlížeče.

Span s id chyba zpočátku skryté, což je zodpovědné za vlastnost display s hodnotou none , to je napsáno v našem souboru stylu, o tom o něco později. Jakmile však uživatel zadá do pole neplatnou e-mailovou adresu, zobrazí se varovná zpráva.

Validátor jQuery a požadavek AJAX

Začněme jednoduchou funkcí ověření e-mailové adresy. Řetězec regulárního výrazu používáme ke kontrole, zda textový řetězec odpovídá standardní syntaxi e-mailu, a vracíme logickou hodnotu true, jinak nepravdu.

Pojďme se podívat na funkci completeInviteForm(). Aby formulář pro zadání adresy nebyl matoucí, pojďme na 400 milisekund vyblednout. A jako callback se vraťme k funkci $.ajax(), pomocí ní zavolejte soubor save.php a uložte zadanou adresu do databáze. Zdrojový kód souboru save.php uvedu trochu níže, ale zatím se pojďme zabývat funkcí $.ajax().

$.ajax- načte vzdálenou stránku pomocí HTTP požadavek. Argument funkce $.ajax() je objekt sestávající z párů klíč/hodnota, které se používají k inicializaci a správě požadavku. V našem případě použijeme následující objekty:

  • typ: 'POST' - ve výchozím nastavení vyberte typ požadavku na soubor DOSTAT, rozdíl mezi POST a GET není příliš velký, jde jen o to, že s požadavkem GET se data přenášejí v hlavičce a s POST v těle požadavku, takže pomocí POST můžete přenést více informací;
  • url:'save.php' - cesta ke spustitelnému souboru;
  • data:'email='+$("#email").val()— data odesílaná na server. Z pomocí CSS selector #e-mailová adresa prvku, se kterým id="e-mail" a získat obsah atributu value, tedy e-maily zadané uživatelem. A tento obsah přiřadit proměnné e-mailem, který použijeme v souboru save.php;
  • success: function()( $('#completeform').before(' Vše je připraveno! Byli jste přidáni do seznamu adresátů.‘);} - funkce úspěchu se nazývá úspěch ajax požadavek. Funkce dělá následující. Před #completeform div vložte obsah, který upozorní uživatele, že jeho e-mail byl přidán do seznamu adresátů.

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

function completeInviteForm() (
setTimeout(funkce () ( $("#completeform" ) .fadeOut (400 , funkce () (
$.ajax((
typ: "POST" ,
url: "save.php" ,
data: "email=" + $("#email" ) .val () ,
úspěch: funkce()(
$("#completeform") .before ( "Vše je připraveno! Byli jste přidáni do seznamu adresátů." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

A u metody setTimeout dochází ke skrytí formuláře a provedení ajax požadavku asynchronně se zpožděním 1100 milisekund.

Zpracování formuláře

Pro usnadnění přístupu k prvkům stránky vytvořte několik proměnných pomocí selektorů #error a #btnwrap .

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

Použití obslužné rutiny události žít sledujeme kliknutí na tlačítko "Přihlásit se k odběru" jeho id="sendbtn" . metoda e.preventDefault(); zruší standardní chování prohlížeče při akci (kliknutí na tlačítko), konkrétně zrušíme aktualizaci stránky a změnu URL. Zadaný email přiřadíme k proměnné emailval a tuto proměnnou můžeme začít zpracovávat.

za prvé -li if(!isEmail(emailval)) zkontroluje, zda funkce isEmail vrátila false (false), pak to znamená, že e-mailová adresa zadaná uživatelem neodpovídá regulárnímu výrazu, to znamená, že není správná, upozorníme uživatele o tom v bloku chyb a zobrazí se zpráva (Nezadali jste správnou e-mailovou adresu).

Nyní druhý -li spustí se pouze v případě, že uživatel zadal platnou e-mailovou adresu. Poté můžeme zahájit proces uložení adresy.

Aby byl proces vizuální, vložte příslušný text do bloku chyb a vložte obrázek GIF do bloku, kde bylo umístěno tlačítko „Přihlásit se k odběru“. A zavoláme funkci completeInviteForm(), o které jsme hovořili výše.

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

if (! isEmail(emailval) ) (
erdiv.html ( "Nezadali jste správně svou e-mailovou adresu") ;
erdiv.css("zobrazit" , "blokovat" ) ;
}
if (isEmail(emailval) ) (
erdiv.css ("barva" , "#719dc8" ) ;
erdiv.html ("zpracování..." ) ;
(completeInviteForm() , 900) ;
}
} ) ;
} ) ;

Databáze

Vzhledem k tomu, že jsem zvolil způsob uložení zadané adresy do databáze, krátce se zmíním o vytvoření databáze samotné a tabulky a také, jak jsem slíbil, kódu souboru save.php, který pracuje s databází MySql.

K tomu potřebujeme lokální server, používám Denver . Jsem si jistý, že to mnoho lidí používá, takže nebudu zabíhat do podrobností. Pokračujme phpMyAdmin a vytvořit databázi e-mailem:

Pro uložení adres předplatitelů potřebujeme jednu tabulku se dvěma poli, nazvěme ji adresa:

Pole budou následující:

  • id- identifikátor emailová adresa(neboli primární klíč);
  • adresa- samotnou e-mailovou adresu.

save.php soubor

Nyní je čas o tom mluvit poslední prvek o vytvářeném předplatném o souboru save.php. Obsahuje PHP skript pro uložení e-mailové adresy do databáze.

1
2
3
4
5
6

if (isset ($_POST [ "e-mail" ] ) ) ( $email = $_POST [ "e-mail" ] ; )
$db = mysql_connect ("localhost" , "root" , "" );
mysql_select_db ("e-mail" , $db ) ;
mysql_query( "INSERT INTO address (address) VALUES ("$email ")", $db);
?>

Nejprve zkontrolujeme, zda proměnná email existuje v globálním poli POST, a pokud ano, přiřadíme její hodnotu lokální proměnné $email . Dále navážeme připojení k serveru mysql_connect () root uživatel, žádné heslo. Výběr databáze e-mailem a proveďte dotaz do databáze, vložte nový záznam do tabulky adres, kde se do polí adresy vloží hodnota proměnné $email. To je vše!

Tato lekce končí. Chci vám připomenout, že toto předplatné funguje pouze na serveru (protože používáme základnu a ).

Ahoj. V této lekci vytvoříme kompletní formulář zpětná vazba a zobrazí se v modálním okně kliknutím na tlačítko na stránce. Tuto lekci jsem udělal sám, od nuly, pouze pomocí rámce jQuery a jednoho malého JavaScriptu. Lekce je velmi zajímavá, takže ji prosím neprojděte! Níže si můžete prohlédnout ukázku formuláře, který jsem dostal, a také si stáhnout potřebné soubory pro práci:

Krok 1. obecný popis a jak funguje formulář zpětné vazby:

Nejprve vám řeknu, jaké soubory budeme potřebovat a vlastně proč jsou potřeba:

  • snímky- složka, kde jsou uloženy všechny obrázky našeho formuláře;
  • index.html- hlavní soubor "index", který bude obsahovat tlačítko pro vyvolání formuláře zpětné vazby;
  • kontakt.html- soubor, který obsahuje samotný formulář. Je to tento soubor, který bude připojen k modálnímu oknu;
  • odeslat.php- soubor handleru, který posílá dopis;
  • jquery.js- základní rámec jQuery;
  • styl.css- soubor s kaskádovými styly pro náš formulář.

Pojďme tedy dále a popořadě... Práce formuláře bude následující: Uživatel vstoupí na stránku, na které se nachází tlačítko pro vyvolání modálního okna, klikne na něj, poté se objeví formulář, ve kterém návštěvník zadá všechny údaje 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, a nyní začneme sestavovat náš formulář...

Krok 2 Tlačítko pro vyvolání formuláře.

Aby se nám 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 obyčejné tlačítko. Kód takového tlačítka je uveden níže spolu se styly, které jsou na něj použity:

Krok 3 Samotný formulář + jeho nastavení

Nyní pojďme zjistit, kde bude náš formulář zpětné vazby stále umístěn. A bude to v souboru kontakt.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:



*Název:
*E-mailem:
Téma:
*Zpráva:

Jak vidíte, při procházení kódu i pouhým okem vidíte, že pro lepší zobrazení formuláře jsem použil tabulkové rozložení. Bylo pro mě velmi užitečné vyrovnat všechna pole formuláře.

Krok 4 Handler zodpovědný za odesílání e-mailů

Zde vám rychle řeknu o hlavním handleru pro odesílání e-mailů. Jeho kód sem dávat nebudu, protože je ve zdrojovém kódu. Stáhněte si a prohlédněte si jeho obsah. Pokud znáte php někde na středně pokročilé úrovni, jako já, pak si celý kód tohoto handleru snadno rozeberete sami. Pokud je vše připraveno, pokračujte ...

Krok 5„Vyladění“ hlavního rámce jQuery

Nyní, jako v každém tutoriálu jQuery, musíme „našroubovat“ základní rámec jQuery. Abychom to udělali, vraťme se trochu zpět, tam, kde se nachází naše tlačítko, a mezi tagy A vložte následující kód:

Krok 6 Styling formuláře

Jak vidíte, styly pro náš formulář jsou umístěny samostatně, v souboru styl.css protože tyto styly zabírají příliš mnoho místa. Potřebujeme pouze propojit následující kód s naším indexovým souborem:

Krok 7 vylepšení jQuery

Nyní, aby modální formulář plně fungoval, musíme vložit následující kód jQuery:

Závěr.

Náš zajímavý formulář zpětné vazby je tedy připraven. Cesta byla dlouhá a náročná, takže pokud někdo něčemu nerozuměl, vyslechnu si vaše dotazy v komentářích k této lekci. A to je z mé strany vše, dokud se znovu nepotkáme, přátelé!

S pozdravem Váš jQuery Explorer - M.K.

Všichni jsme zvyklí vidět kontakty na samostatných, speciálně vytvořených stránkách pro zpětnou vazbu od uživatelů. Na takové stránky zpravidla kromě kontaktních formulářů umisťují mnoho dalších informací pro interakci a komunikaci. Mechanismus je odladěný, léty prověřený a funguje perfektně. Ale v některých případech je nutné odvodit samostatné Kontaktní formulář ve formě vyskakovacího okna, bez přesměrování uživatelů na jiné stránky.
Svého času jsme uvažovali o práci na jQuery. Dnes vám chci představit zajímavé řešení pro vytvoření samostatného, ​​originálně navrženého, ​​vyskakovacího kontaktního formuláře pro stránky.

Podle mě nádherný příklad prostředků interakce s uživateli.

Podíval se na příklad. Pojďme si nyní tuto formu rozložit na její součásti, od stvoření celková struktura v Html, před úpravou rozvržení pomocí CSS.

HTML kód formuláře

Nic nadpřirozeného, ​​nejjednodušší rám běžného kontaktního formuláře, umístěný v blokovém prvku div se specifickým identifikátorem a třídou, aby se dále utvářel vzhled formuláře css a interakce s malým javascriptem, který budeme potřebovat k aktivaci a zavření vyskakovacího formuláře.

zavřít

Pošlete nám zprávu

zavřít

Pošlete nám zprávu

Také musíme vytvořit vrstvu, která ztmaví obecné pozadí, když je aktivován vyskakovací formulář. Tento úkol můžete splnit různými způsoby, ale nebudeme příliš chytří a přidáme ještě jeden div, přiřaďte mu ID: id="fade" a class: class="black-overlay" . Můžete jej umístit vedle formuláře, abyste v případě potřeby dlouho nehledali.

Zpětná vazba

Pravděpodobně jste si všimli, že tlačítko Zavřít je vepsáno do bloku kontaktního formuláře, těsně před nadpis, a to je logické, ale kde jinde by mělo být, tlačítko by se mělo objevit a zmizet spolu s formulářem. Vzhled a pozici zavíracího tlačítka dále utvoříme v CSS

To je vše, nyní se podívejme na úplný Html kód stránky obsahující vyskakovací formulář zpětné vazby:

Popup kontaktní formulář Zpětná vazba
zavřít

Pošlete nám zprávu

Popup kontaktní formulář Zpětná vazba

zavřít

Pošlete nám zprávu

Než se dostaneme k zábavnější části, stylingu našeho kontaktního formuláře pomocí CSS, vraťme se o krok zpět. Ti nejpozornější si asi všimli, že tlačítka pro otevření a zavření formuláře jsou implementována jako odkazy s tlumičem href="javascript:void(0)" . Ať už je to dobře nebo špatně, přesnou odpověď jsem pro sebe nenašel, tuto metodu používám ze zvyku. I když u prvků, na kterých skript zpracovává událost onclick, se mi zdá logičtější a správnější použít