Szkript egy visszajelzési űrlaphoz egy modális ablakban. Egyszerű Ajax kapcsolatfelvételi űrlap

Üdv mindenkinek. Kérdésekkel bombázták őket, hogy hogyan kell megvalósítani a ben megjelenő űrlapot modális ablak a gombra kattintás után, és a beküldés után megjelenik egy sikeres vagy sikertelen üzenet.

Azt hiszem, már sok ilyen van az interneten, de mivel az emberek kérdezik, úgy döntöttem, hogy megcsinálom. Ezenkívül az ilyen funkcióknak szinte minden céloldalon jelen kell lenniük a visszahívási gomb megvalósításához. Valóban, egyre több AB -teszt eredmény jelenik meg, amelyek azt mondják, hogy a nyitott űrlapok rosszabbul működnek, mint azok, amelyek egy modális ablakban vannak elrejtve, és a gombra kattintás után megnyílnak.

Egyesek azzal érvelnek, hogy ez annak köszönhető, hogy az emberek lassan "fejlesztik az immunitást", és a nyílt forma agresszív eladás. Állítólag most jött el az idő, amikor a felhasználó, amikor meglát egy nyitott űrlapot, azt gondolja, hogy valamit "eladni" próbálnak neki. Nem teljesen értek egyet ezzel az elmélettel, de van egy csomó igazság. Talán bizonyos típusú vállalkozásoknál ez igaz. Most térjünk rá az űrlap megvalósítására.

Jegyzet! Nem írom le részletesen az egyes műveleteket, de felajánlok egy kész verziót a forrásban. Ha bármilyen kérdése van, írjon megjegyzéseket. Majd kitaláljuk :)

Ma nem a jQuery -vel kezdünk, hanem a gomb és az űrlap elrendezésével. Minden szkript az oldal végén található.

A gomb, amelyre kattintva megnyílik a modális ablak:

Küldje be jelentkezését

Bármilyen osztályt beállíthat, de a href -be írja be a #modal parancsot - ez lesz az árnyékolással ellátott tároló azonosítója és a kapcsolatfelvételi űrlap.

Most megadom az űrlap kódját és azt a blokkot, amelyen az űrlap található:

A stílusok hozzáadása után így néz ki:


Modális ablak létrehozásához a Remodal könyvtárat használtuk. Ez egy css és js fájlkészlet, csak animált modális ablakok létrehozásához. Letöltheti a linkről, vagy már a cikk végén lévő szerkesztéseimmel.

Stílusok beillesztése a head címkék közé:

És a záró törzscímke előtt - adjon hozzá szkripteket:

A Script.js egy űrlap feldolgozására szolgáló szkript. Ugyanaz az Ajax, amely lehetővé teszi számunkra, hogy a teljes eljárást az oldal újratöltése nélkül elvégezzük:

$ (dokumentum) .ready (function () ($ ("űrlap"). submitted (function () (// Az űrlap azonosítójának beszerzése var formID = $ (ez) .attr ("id"); // hash hozzáadása) a név azonosítóhoz var formNm = $ ("#" + formID); $ .ajax ((típus: "POST", url: "mail.php", adatok: formNm.serialize (), siker: function (data) { // a küldési eredmény kimeneti szövege $ (formNm) .html (adatok);), error: function (jqXHR, text, error) (// a küldési hibaszöveg kimenete $ (formNm) .html (error);) )); hamis visszatérés;));));

Az eredetit nem adom meg css kódés js a modális ablakért és az űrlapért felelős fájlokból, mivel meglehetősen nagyok. Ha valami, nézd meg a forrást. De a php kezelő nagyrészt szabványos (ha mondhatom):

A küldő neve:$ név Telefon:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Köszönjük, hogy elküldte üzenetét!
";) más (visszhang")
Hiba. Az üzenet nem lett elküldve!
";)) else (http_response_code (403); echo" Try again ";)?>

Kérem, ne felejtse el megváltoztatni a címet Email maguktól.

Itt egy ajax űrlap. Sajnálom, hogy nem próbáltam részletesen elmagyarázni az egyes elemek elkészítését. Csak kész eredményt akartam adni, de nincs értelme leírni az összes animációt, látszatot. Töltse le a forrást, és ágyazza be webhelyére. És mára ennyi. Sok szerencsét mindenkinek!

Srácok, határozottan kérem, hogy tesztelje az űrlapot egy valódi ill virtuális szerver(tárhely). Kérjük, győződjön meg arról, hogy a szerver támogatja a php -t, fizetett csomagja van, és nem próbaidőszak. Ellenkező esetben az esetek 90% -ában az űrlap nem fog működni.

Ne várja meg a levelet a postaládájában, ha éppen megnyitotta az indexfájlt a böngészőben, és rákattintott a "Küldés" gombra. A php szerveroldali nyelv!

Ha lusta vagy kitalálni és saját maga elkészíteni az űrlapot, akkor azt javaslom, hogy figyeljen oda.

Frissített verzió cikk az

Üdv kedves olvasók a! Ebben az oktatóanyagban megmutatom, hogyan tudjuk elérni, hogy a HTML5 e -mail regisztrációs űrlap érvényesítse a megadott URL -t a JQuery segítségével. Az ellenőrzéshez rendszeres kifejezéseket fogunk használni, és a megadott címet elmentjük a MySql adatbázisba. Így mentéskor használni fogja AJAX(azaz hívja fel a PHP szkriptet az oldal újratöltése nélkül). Az eredmény megtekinthető a demo oldalon, valamint letölthető a forrás. Lássunk neki!

Alap jelölés

Kezdjük egy új index.html fájl létrehozásával. És készítsünk egy egyszerű dokumentumstruktúrát, amely ragaszkodik a HTML5 -hez. A CSS-stílusokat és a könyvtárat is azonnal belefoglaljuk, szükségünk lesz rá a beírt e-mail ellenőrzésekor:

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


<html lang = "ru">
<fej>
<meta charset = "utf-8">
<cím> E -mail regisztrációs űrlap jQuery validátorral</ title>

<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">
</ head>

<test>

</ body>
</ html>

Most már készen áll az űrlap létrehozására!

Előfizetési e-mail űrlap

Űrlapunk célja, hogy ellenőrizze a beírt látogató e -mail címét, és valahogy elmentse az előfizetők listájára. Erre teszünk szabályos forma egy gombbal, amelyre kattintva a cím feldolgozásra kerül, és bárki számára kényelmesen menthető az adatbázisba vagy egy fájlba. A leckében megfontoljuk az adatok buz -ban való mentését. Így világosabb lesz, a beírt cím helyességének ellenőrzésére összpontosítunk. Az előfizetési űrlap így néz ki:

1
2
3
4
5
6
7
8
9



"Írd be az email címed" autocomplete = "ki" autocorrect = "ki" autocapitalize = "off">

Csomagoljuk be az űrlapot a #completeform div blokkba, hogy a cím mentése után az űrlap összecsukható legyen.

A beviteli mezőben néhány új attribútumot is használunk. A mező típusa "e -mail", így a mobilböngészők megjeleníthetik a megfelelő billentyűzetet. A Chrome és néhány WebKit böngésző ezt használja annak ellenőrzésére, hogy a felhasználó megadott -e címet. Az automatikus javítás és az automatikus nagybetűsítés attribútumokat kifejezetten mobil böngészők számára tervezték.

Span azonosítóval hiba kezdetben elrejtve, amiért a megjelenítési tulajdonság a none értékkel felel, ezt írják be a fájlba stílusokkal, erről egy kicsit később. De amint a felhasználó érvénytelen e -mail címet adott meg a tartományban, figyelmeztető üzenet jelenik meg.

JQuery validátor és AJAX kérés

Kezdjük egy egyszerű e -mail ellenőrzési funkcióval. Egy reguláris kifejezés karakterláncot használunk annak tesztelésére, hogy a szöveges karakterlánc megegyezik -e a standard e -mail szintaxissal, majd visszatérítünk egy logikai értéket true, különben hamis.

Vessünk egy pillantást a teljesInviteForm () függvényre. A címbeviteli űrlap összetévesztésének elkerülése érdekében 400 milliszekundumra összecsukjuk a fadeOut hatást. Visszahívásként pedig a $ .ajax () függvényhez fordulunk, segítségével felhívjuk a save.php fájlt, és elmentjük a beírt címet az adatbázisba. Az alábbiakban a save.php fájl forráskódját idézem, de most a $ .ajax () függvénnyel találjuk ki.

$ .ajax- segítségével betölti a távoli oldalt HTTP kérés... A $ .ajax () függvény argumentumaként egy objektum kerül átadásra, amely kulcs / érték párokból áll, amelyek a kérés inicializálására és kezelésére szolgálnak. Esetünkben a következő objektumokat fogjuk használni:

  • típus: 'POST' - alapértelmezés szerint válassza ki a fájlhoz tartozó kérés típusát KAP, a különbség a POST és a GET között nem túl nagy, csak egy GET kéréssel az adatok a fejlécben, a POST pedig a kérés törzsében kerülnek továbbításra, ezért a POST használatával több információt továbbíthat;
  • url: ’save.php’ - a futtatható fájl elérési útja;
  • adatok: ’email =’ + $ ("# email"). val ()- a szerverre küldött adatok. VAL VEL CSS használatával A #email választóelem az elemre hivatkozik id = "email"és megkapja az érték attribútum tartalmát, vagyis a felhasználó által megadott e -mailt. És rendelje hozzá ezt a tartalmat egy változóhoz email amelyet a save.php fájlban fogunk használni;
  • success: function () ($ ('# completeform'). előtt (' Minden kész! Felkerült a levelezőlistára.‘);} - a siker függvény a siker ajax kérés... A függvény a következő műveletet hajtja végre. A #completeform div elé beillesztünk olyan tartalmat, amely értesíti a felhasználót, hogy az e -mail -címe felkerült a levelezőlistára.

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

function completeInviteForm () (
setTimeout (function () ($ ("# completeform") .fadeOut (400, function () ()
$ .ajax ((
típus: "POST",
url: "save.php",
adatok: "email =" + $ ("# email") .val (),
siker: function () (
$ ("# completeform") .before ( "Minden kész! Felkerült a levelezőlistára." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

A setTimeout módszerrel az űrlap elrejtésre kerül, és az ajax kérés aszinkron módon, 1100 milliszekundum késleltetéssel hajtódik végre.

Űrlapfeldolgozás

Az oldalelemek elérésének kényelme érdekében hozzunk létre néhány változót a #error és a #btnwrap választókkal.

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

Eseménykezelő használata élő nyomon követheti a "Feliratkozás" gombra kattintást, annak id = "sendbtn". E.preventDefault () metódus; törli a böngésző szokásos viselkedését egy művelethez (egy gombra kattintás), azaz töröljük az oldalfrissítést és az URL -módosítást. A beírt e -mailt az emailval változóhoz rendeljük, és elkezdhetjük ennek a változónak a feldolgozását.

Első ha ha a (! isEmail (emailval)) ellenőrzi, hogy az isEmail függvény hamis -e, akkor ez azt jelenti, hogy a felhasználó által megadott e -mail cím nem egyezik a reguláris kifejezéssel, vagyis nem helyes, erről értesítjük a felhasználót a hibaüzenet, jelenítse meg az üzenetet (Hibásan adta meg az e-mail címet).

Most a második ha csak akkor hajtódik végre, ha a felhasználó érvényes e -mail címet adott meg. Ezután megkezdhetjük a cím mentésének folyamatát.

A folyamat egyértelművé tétele érdekében illessze be a megfelelő szöveget a hibablokkba, és tegyen egy GIF -képet abba a blokkba, ahol a "Feliratkozás" gomb található. És hívjuk a teljesInviteForm () függvényt, amelyet fentebb tárgyaltunk.

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

ha (! isEmail (emailval)) {
erdiv.html ( "Nem a megfelelő e -mail címet adta meg") ;
erdiv.css ("kijelző", "blokk");
}
if (isEmail (emailval)) {
erdiv.css ("szín", "# 719dc8");
erdiv.html ("feldolgozás ...");
(teljesInviteForm (), 900);
}
} ) ;
} ) ;

Adatbázis

Mivel a bevitt cím adatbázisba való mentésének módját választottam, röviden szólok az adatbázis és a táblázat létrehozásáról, valamint a megígért save.php fájl kódjáról, amely működik a MySql adatbázissal.

Ehhez szükségünk van helyi szerver, Denwer -t használok. Biztos sokan használják, így nem részletezem. Átmegyünk phpMyAdmin, és hozzon létre egy adatbázist email:

Az előfizetők címeinek mentéséhez szükségünk van egy táblára, két mezővel, nevezzük így cím:

A mezők a következők lesznek:

  • id- azonosító email cím(más néven elsődleges kulcs);
  • cím- közvetlenül maga az e -mail cím.

Save.php fájl

Most itt az ideje, hogy beszéljünk róla utolsó elem a létrehozott előfizetésről, a save.php fájlról. Ez tartalmazza a PHP szkriptet az e -mail cím adatbázisba való mentéséhez.

1
2
3
4
5
6

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

Először ellenőrizzük, hogy létezik -e az e -mail változó a globális POST tömbben, ha igen, akkor rendeljük hozzá az értékét a helyi $ email változóhoz. Ezután kapcsolatot létesítünk a mysql_connect () szerverrel, a felhasználó root, nincs jelszó. Adatbázis kiválasztása emailés hajtson végre egy lekérdezést az adatbázisba, helyezzen be egy új rekordot a címetáblába, ahol a $ email változó értéke bekerül a címmezőkbe. Ez minden!

Ezzel lezárjuk a leckét. Szeretném emlékeztetni Önöket, hogy ez az előfizetés csak a szerveren működik (mivel a bázist és) használjuk.

Helló. Ebben az oktatóanyagban teljes alakzatot készítünk. Visszacsatolás, és megjelenik a modális ablakban az oldalon található gombra kattintva. Ezt a leckét magam végeztem, a semmiből, csak a jQuery keretrendszer és egy kis JavaScript "th segítségével. A lecke nagyon érdekes, ezért kérjük, ne hagyja ki! Az alábbiakban megtekintheti a kapott űrlap demóját, valamint letöltheti a a munkához szükséges fájlok:

1. lépés. Általános leírásaés hogyan működik a visszajelzési űrlap:

Először is elmondom, milyen fájlokra lesz szükségünk, és valójában miért van szükség rájuk:

  • képek- a mappa, ahol űrlapunk összes képe tárolódik;
  • index.html- a fő, "index" fájl, amelyben a visszajelzési űrlap hívására szolgáló gomb található;
  • contact.html- az űrlapot tartalmazó fájl. Ez a fájl kapcsolódik a modális ablakhoz;
  • send.php- iratkezelő, aki felelős a levél elküldéséért;
  • jquery.js- a fő jQuery keretrendszer;
  • stílus.css- fájl a lépcsőzetes stíluslapokkal az űrlapunkhoz.

Tehát menjünk tovább és sorrendben ... Az űrlap munkája a következő lesz: A felhasználó belép arra az oldalra, amelyen a modális ablak hívására szolgáló gomb található, rákattint, majd megjelenik az űrlap, benne a látogató megadja az összes adatot és az üzenet szövegét, és elküldi, majd átkerül az oldalra a levél sikeres vagy sikertelen elküldéséről szóló üzenettel. Ennyi, most kezdjük el beírni a formánkat ...

2. lépés. Az űrlap hívására szolgáló gomb.

Annak érdekében, hogy megjelenjen az űrlappal ellátott modális ablakunk, valahogy kényszerítenie kell erre. Ehhez csak egy közönséges gombot kell elhelyeznünk az oldalon. Az ilyen gomb kódja az alábbi stílusokkal együtt látható:

3. lépés. Maga az űrlap + beállítások hozzá

Most nézzük meg, hol található a visszajelzési űrlapunk. És benne lesz az aktában contact.html, amely már megtalálható a lecke forráskódjában. Ez az űrlap meglehetősen kicsi, ezért a kódját az alábbiakban helyezem el:

Üzenet küldése az adminisztrációnak:



*Név:
* E-mail:
Téma:
*Üzenet:

Amint látja, a kódot végigjárva, még szabad szemmel is látható, hogy az űrlap jobb megjelenítése érdekében táblázat elrendezést használtam. Ez nagyon hasznos volt számomra, hogy kiegyenlítsem az összes űrlapmezőt.

4. lépés. Az e -mailek küldéséért felelős kezelő

Itt gyorsan bemutatom nektek a levélkezelőt. Itt nem adom meg a kódját, mert benne van a forráskódban. Töltse le és tekintse meg tartalmát. Ha valahol köztes szinten ismeri a php -t, mint én, akkor könnyen kezelheti a kezelő összes kódját. Ha minden készen áll, lépjen tovább ...

5. lépés. A fő jQuery keretrendszer felpörgetése

Most is, mint minden jQuery -oktatóanyagnál, "csavarni" kell a fő jQuery keretrendszert. Ehhez térjünk vissza egy kicsit, a gombunk helyére és a címkék közé és illessze be a következő kódot:

6. lépés. Az űrlap formázása

Amint láthatja, az űrlap stílusait külön -külön, a fájlban jelenítjük meg stílus.css mivel ezek a stílusok túl sok helyet foglalnak el. Csak le kell kötnünk az alábbi kódot az indexfájlunkhoz:

7. lépés. jQuery csíp

A modális űrlap ablak teljes munkájához be kell illesztenünk a következő jQuery kódot:

Következtetés.

Tehát érdekes visszajelzési űrlapunk készen áll. Az út hosszú és nehéz volt, ezért ha valaki nem ért valamit, meghallgatom kérdéseit a lecke megjegyzéseiben. És ez minden számomra, amíg újra nem találkozunk, barátaim!

Üdvözlettel: jQuery - útmutató - M.K.

Mindannyian hozzászoktunk ahhoz, hogy a névjegyeket külön, speciálisan a felhasználói visszajelzésekre létrehozott oldalakon látjuk. Általános szabály, hogy az ilyen oldalakon a kapcsolatfelvételi űrlapokon kívül sok más információt is közzétesznek interakció és kommunikáció céljából. A mechanizmus hibakeresett, az évek során bevált és tökéletesen működik. De bizonyos esetekben szükségessé válik egy külön megjelenítése kapcsolatfelvételi űrlap felugró ablakként anélkül, hogy a felhasználókat más oldalakra irányítaná.
Valamikor fontolóra vettük a jQuery -vel való együttműködést. Ma egy érdekes megoldással szeretném megismertetni Önökkel, hogy hozzon létre egy külön, eredetileg tervezett, felugró kapcsolatfelvételi űrlapot az oldalhoz.

Véleményem szerint remek példa a felhasználói interakciós eszközökre.

Példát néztünk. Most bontjuk fel ezt az alakzatot alkotóelemeire általános szerkezet a HTML -ben, mielőtt az elrendezés CSS használatával formázná.

Az űrlap HTML kódja

Semmi természetfeletti, a legegyszerűbb keretrendszer a rendszeres kapcsolatfelvételi űrlaphoz, blokk elembe helyezve div meghatározott azonosítóval és osztállyal, hogy tovább alakítsa az űrlap megjelenését cssés a kis javascript használatával való interakcióhoz aktiválnunk és bezárnunk kell az előugró űrlapot.

Bezárás

Küldjön nekünk üzenetet

Bezárás

Küldjön nekünk üzenetet

Ezenkívül létre kell hoznunk egy árnyékoló réteget az általános háttérhez, amikor a felugró alakot aktiváljuk. Ezt a feladatot többféleképpen is elvégezheti, de nem leszünk túl okosak, és adunk hozzá még egyet div az azonosító hozzárendelésével: id = "fade" és egy class: class = "black-overlay". Elhelyezheti az űrlap mellett, hogy szükség esetén ne keressen sokáig.

Visszacsatolás

Valószínűleg észrevette, hogy a bezárás gomb a kapcsolatfelvételi űrlap blokkjába van írva, közvetlenül a cím előtt, és ez logikus, de ahol máshol kellene lennie, a gombnak meg kell jelennie és el kell tűnnie az űrlappal együtt. Megjelenésés a bezárás gomb helyzetét tovább alakítjuk a CSS -ben

Ennyi, nézzük most a felugró visszajelzési űrlapot tartalmazó oldal teljes Html-kódját:

Felugró kapcsolatfelvételi űrlap Visszacsatolás
Bezárás

Küldjön nekünk üzenetet

Felugró kapcsolatfelvételi űrlap Visszacsatolás

Bezárás

Küldjön nekünk üzenetet

Mielőtt rátérnénk a szórakoztató részre, a kapcsolatfelvételi űrlap CSS -szel történő formázásával, egy kicsit visszalépek. A legfigyelmesebbek valószínűleg észrevették, hogy az űrlap megnyitására és bezárására szolgáló gombok "jammer" linkként vannak megvalósítva. Href = "javascript: void (0)". Jó vagy rossz, nem találtam pontos választ magamnak, megszokásból használom ezt a módszert. Bár azokon az elemeken, amelyeken az onclick eseményt feldolgozza a szkript, szerintem logikusabb és helyesebb a használata