Tagasiside vormi skript modaalaknas. Lihtne kontaktivorm Ajaxiga

Tere. Pommitatakse küsimustega selle kohta, kuidas kuvatavat vormi rakendada modaalne aken pärast nupu vajutamist ja pärast saatmist kuvatakse teade õnnestumise või ebaõnnestumise kohta.

Ma arvan, et seda on Internetis juba palju, kuid kuna inimesed küsivad, otsustasin seda teha. Pealegi peaks selline funktsioon olema tagasihelistamisnupu rakendamiseks peaaegu igal sihtlehel. Tõepoolest, nüüd on üha rohkem AB - testimise tulemusi, mis ütlevad, et avatud vormid töötavad halvemini kui need, mis on peidetud modaalaknas ja avanevad pärast nupu vajutamist.

Mõned väidavad, et see on tingitud asjaolust, et inimestel tekib aeglaselt "immuunsus" ja avatud vorm on agressiivne müük. Väidetavalt on nüüd käes aeg, mil kasutaja silmis avatud vorm usub, et nad üritavad temasse midagi "suruda". Ma ei ole selle teooriaga päris nõus, kuid tõetera on selles. See võib teatud tüüpi ärides tõsi olla. Liigume nüüd vormi rakendamise juurde.

Märge! Ma ei kirjelda iga toimingut üksikasjalikult, kuid pakun teile lähtekoodis valmis versiooni. Kui teil on küsimusi - kirjutage kommentaaridesse. Eks me selgitame välja :)

Täna alustame mitte jQueryga, vaid nuppude ja vormide paigutusega. Ühendame kõik skriptid lehe lõpus.

Nupp, mis avab klõpsamisel modaalakna:

Esitage oma taotlus

Saate määrata mis tahes klassi, kuid kirjutage #modal sisse href - see on konteineri ID koos varjundiga ja kontaktivorm.

Nüüd annan vormi koodi ja ploki, millel vorm asub:

Pärast stiilide lisamist näeb see välja järgmine:


Modaalse akna loomiseks kasutati Remodali teeki. See on css- ja js-failide komplekt, mis on mõeldud ainult animeeritud modaalakende loomiseks. Saate alla laadida lingilt või juba minu muudatustega artikli lõpus.

Lisage peamärgendite vahele stiile:

Ja enne sulgevat kehamärgendit lisage skriptid:

Script.js on vormi töötlemise skript. Sama Ajax, mis võimaldab meil kogu protseduuri läbi viia ilma lehte uuesti laadimata:

$(document).ready(function () ( $("vorm").submit(function () ( // Hangi vormi ID var formID = $(this).attr("id"); // Lisage räsi nime ID-le var formNm = $("#" + formID); $.ajax(( tüüp: "POST", url: "mail.php", andmed: formNm.serialize(), õnnestumine: funktsioon (andmed) () // Väljund saatmise tulemuse teksti $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Kuva saatmisvea teksti $(formNm).html(error); ) )); tagasta vale; ) ); ));

Originaali ma ei anna css kood ja js failidest, mis vastutavad modaalakna ja vormi eest, kuna need on üsna suured. Kui jah, siis vaadake allikat. Kuid php töötleja on suures osas standardne (kui ma võin nii öelda):

Saatja nimi:$nimi Telefon:$telefon"; $saada = kiri ($adressaat, $teema, $sõnum, $päised); if ($send == "true") ( kaja "

Täname sõnumi saatmise eest!
"; ) else ( kaja "
Viga. Sõnumit ei saadetud!
"; ) ) else ( http_response_code(403); echo "Proovi uuesti"; )?>

Palunärge unustage aadresse muuta Meil omapead.

Siin on ajaxi vorm. Vabandame, et ei üritanud üksikasjalikult selgitada, kuidas iga element tehti. Tahtsin lihtsalt valmis tulemust anda ja kõiki animatsioone, esinemisi pole mõtet kirjeldada. Laadige allikas alla ja manustage see oma saidile. Ja tänaseks on see kõik. Edu kõigile!

Poisid, ma soovitan teil testida vormi päris või virtuaalserver(majutus). Veenduge, et teie server toetab php-d, teil on tasuline plaan, mitte prooviperiood. Vastasel juhul 90% juhtudest vorm ei tööta.

Ärge oodake oma postkasti kirja, kui avasite just brauseris registrifaili ja klõpsasite nuppu "Esita". Php on serveripoolne keel!

Kui oled liiga laisk, et seda ise nuputada ja vormi teha, siis soovitan sellele tähelepanu pöörata.

uuendatud versioon artikkel on

Tere kallid lugejad a! Selles õpetuses näitan teile, kuidas saame JQuery valideerimisega koostada HTML5 meilitellimuse vormi. Kontrollimiseks kasutame regulaaravaldisi ja salvestame sisestatud aadressi MySql andmebaasi. Seega, millal säästmist kasutatakse AJAX(st helistage PHP-skriptile ilma lehte uuesti laadimata). Tulemust näete demolehel, samuti saate alla laadida lähtekoodi. Alustame!

Põhiline märgistus

Alustame uue faili index.html loomisega. Ja me teeme lihtsa dokumendistruktuuri, mis järgib HTML5. Samuti ühendame kohe CSS-stiilid ja teegi, vajame seda sisestatud meili kontrollimisel:

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


<htmllang="en">
<pea>
<meta charset="utf-8">
<pealkiri > jQuery meilitellimuse vorm koos Validaatoriga</title>

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

<skripti tüüp="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</pea>

<keha>

</body>
</html>

Nüüd on kõik vormi loomiseks valmis!

Meili tellimise vorm

Meie vormi eesmärk on kinnitada külastaja sisestatud meiliaadress ja salvestada see kuidagi tellijate nimekirja. Selleks me teeme tavaline vorm nupuga, millele klõpsates aadress töödeldakse ja salvestatakse andmebaasi või faili, nagu igaühele mugav on. Õppetunnis kaalume andmete salvestamist puhvrisse. Nii on asi selgem, keskendume sisestatud aadressi õigsuse kontrollimisele. Tellimisvorm näeb välja järgmine:

1
2
3
4
5
6
7
8
9



"Sisesta oma e-mail" autocomplete="off" autocorrect="off" autocapitalize="off" >

Mähi vorm plokki div #completeform, et pärast aadressi salvestamist saaks vormi ahendada.

Samuti kasutame sisestusväljal paari uut atribuuti. Välja tüübiks on seatud "e-post", et mobiilibrauserid saaksid kuvada sobivat klaviatuuri. Chrome ja mõned WebKiti brauserid kasutavad seda, et kontrollida, kas kasutaja on aadressi sisestanud. Automaatse parandamise ja automaatse suurtähtede muutmise atribuudid on loodud spetsiaalselt mobiilibrauserite jaoks.

Sirge koos ID-ga viga algselt peidetud, mis vastutab kuvatava atribuudi eest väärtusega none , see on kirjas meie stiilifailis, selle kohta veidi hiljem. Kuid niipea, kui kasutaja sisestab vahemikku kehtetu e-posti aadressi, kuvatakse hoiatusteade.

jQuery validaator ja AJAX-i päring

Alustame lihtsa e-posti aadressi kinnitamise funktsiooniga. Kasutame regulaaravaldise stringi, et kontrollida, kas tekstistring ühtib standardse meili süntaksiga, seejärel tagastame tõeväärtuse tõene, muidu väär.

Heidame pilgu funktsioonile completeInviteForm(). Et aadressi sisestamise vorm ei tekitaks segadust, laseme välja 400 millisekundit. Ja tagasihelistamiseks pöördume funktsiooni $.ajax() poole, kasutame seda faili save.php väljakutsumiseks ja sisestatud aadressi salvestamiseks andmebaasi. Annan faili save.php lähtekoodi veidi madalamaks, aga praegu tegeleme funktsiooniga $.ajax().

$.ajax- laadib kauglehe kasutades HTTP taotlus. Funktsiooni $.ajax() argument on võtme/väärtuse paaridest koosnev objekt, mida kasutatakse päringu lähtestamiseks ja haldamiseks. Meie puhul kasutame järgmisi objekte:

  • type: 'POST' – valige vaikimisi faili päringu tüüp SAADA, POST-i ja GET-i vahe ei ole väga suur, lihtsalt GET-päringu puhul edastatakse andmed päises ja POST-iga päringu kehas, seega saate POST-i kasutades rohkem teavet edastada;
  • url:'save.php' – käivitatava faili tee;
  • data:'email='+$("#email").val()— serverisse saadetavad andmed. FROM kasutades CSS-i valija #e-posti aadress, millega element id="e-post" ja saada väärtuse atribuudi sisu ehk kasutaja sisestatud meilid. Ja määrake see sisu muutujale meili, mida kasutame failis save.php;
  • edu: function()( $('#completeform').before(' Kõik on valmis! Olete lisatud meililisti.‘);} - edufunktsiooni nimetatakse eduks ajaxi taotlus. Funktsioon teeb järgmist. Enne jaotist #completeform sisestage sisu, et teavitada kasutajat, et tema e-posti aadress on meililisti lisatud.

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

funktsioon completeInviteForm() (
setTimeout(function () ( $("#completeform" ) .fadeOut (400 , funktsioon () (
$.ajax((
tüüp: "POSTITA" ,
url: "save.php" ,
andmed: "email=" + $("#email" ) .val () ,
edu: funktsioon()(
$("#completeform") .before ( "Kõik on valmis! Olete lisatud meililisti." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

Ja setTimeout meetodiga toimub vormi peitmine ja ajaxi päringu täitmine asünkroonselt 1100 millisekundilise viivitusega.

Vormi töötlemine

Leheelementidele juurdepääsu hõlbustamiseks loome paar muutujat valijatega #error ja #btnwrap .

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

Sündmuste töötleja kasutamine elada jälgime klõpsamist nupul "Telli" selle id="sendbtn" . e.preventDefault() meetod; tühistab brauseri tavapärase käitumise toimingul (nupul klõpsamine), nimelt tühistame lehe värskendamise ja URL-i muutmise. Määrame sisestatud meili muutujale emailval ja saame hakata seda muutujat töötlema.

Esiteks kui if(!isEmail(emailval)) kontrollib, kas funktsioon isEmail tagastas false (false), siis see tähendab, et kasutaja sisestatud meiliaadress ei ühti regulaaravaldisega, st see pole õige, teavitame kasutajat selle kohta veablokis ja kuvage teade (Te ei sisestanud õiget e-posti aadressi).

Nüüd teine kui käivitub ainult siis, kui kasutaja on sisestanud kehtiva e-posti aadressi. Seejärel saame alustada aadressi salvestamise protsessi.

Protsessi visuaalseks muutmiseks sisestage vastav tekst veaplokki ja GIF-pilt plokki, kus asus nupp "Telli". Ja me kutsume funktsiooni completeInviteForm(), millest me eespool rääkisime.

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

if (! isEmail(emailval) ) (
erdiv.html ( "Te ei sisestanud oma e-posti aadressi õigesti") ;
erdiv.css("kuva" , "blokeeri" ) ;
}
if (isEmail(emailval) ) (
erdiv.css ("värv" , "#719dc8" );
erdiv.html ("töötlemine..." ) ;
(completeInviteForm() , 900 ) ;
}
} ) ;
} ) ;

Andmebaas

Kuna valisin sisestatud aadressi andmebaasi salvestamise meetodi, siis räägin lühidalt andmebaasi enda ja tabeli loomisest ning samuti nagu lubatud, faili koodist save.php, mis töötab MySql andmebaasiga.

Selleks vajame kohalik server, ma kasutan Denverit. Olen kindel, et paljud inimesed kasutavad seda, nii et ma ei hakka detailidesse laskuma. Liigume edasi phpMyAdmin ja luua andmebaas meili:

Abonentide aadresside salvestamiseks vajame ühte kahe väljaga tabelit, nimetagem seda aadress:

Väljad on järgmised:

  • id- identifikaator e-posti aadress(teise nimega primaarvõti);
  • aadress- meiliaadress ise.

fail save.php

Nüüd on aeg sellest rääkida viimane element loodav tellimus faili save.php kohta. See sisaldab PHP-skripti e-posti aadressi andmebaasi salvestamiseks.

1
2
3
4
5
6

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

Esiteks kontrollime, kas e-posti muutuja on globaalses POST-massiivis olemas, ja kui jah, siis määrame selle väärtuse kohalikule muutujale $email. Järgmisena loome ühenduse serveri mysql_connect () root kasutajaga, parooli pole. Andmebaasi valimine meili ja sooritada päring andmebaasi, sisestada aadressitabelisse uus kirje, kus aadressiväljadele sisestatakse muutuja $email väärtus. See on kõik!

See õppetund lõpeb. Tahan teile meelde tuletada, et see tellimus töötab ainult serveris (kuna me kasutame baasi ja ).

Tere. Selles õppetükis koostame täieliku vormi tagasisidet, ja see kuvatakse modaalses aknas, klõpsates lehel nuppu. Tegin selle õppetunni ise, nullist, kasutades ainult jQuery raamistikku ja ühte väikest JavaScripti "th. Õppetund on väga huvitav, seega ärge minge mööda! ​​Allpool saate vaadata saadud vormi demonstratsiooni ja ka alla laadida tööks vajalikud failid:

Samm 1. üldkirjeldus ja kuidas tagasisidevorm töötab:

Esiteks ütlen teile, milliseid faile me vajame ja miks neid vaja on:

  • pilte- kaust, kuhu on salvestatud kõik meie vormi pildid;
  • index.html- peamine "indeksi" fail, mis sisaldab tagasisidevormi helistamise nuppu;
  • kontakt.html- vormi ennast sisaldav fail. See fail ühendatakse modaalaknaga;
  • send.php- käsitleja fail, mis saadab kirja;
  • jquery.js- jQuery põhiraamistik;
  • stiil.css- faili kaskaadlaadilehtedega meie vormi jaoks.

Niisiis, läheme edasi ja järjekorras... Vormi töö saab olema järgmine: Kasutaja siseneb modaalakna kutsumiseks lehele, millel asub nupp, klõpsab seda, seejärel ilmub vorm, milles külastaja sisestab kõik andmed ja sõnumi teksti ning esitab, seejärel suunatakse see lehele, kus on teade kirja eduka või ebaõnnestunud saatmise kohta. See on kõik ja nüüd hakkame oma vormi paika panema...

2. samm Nupp vormi kutsumiseks.

Niisiis, selleks, et meie vormiaken ilmuks, peame seda kuidagi sundima. Selleks peame lihtsalt asetama lehele tavalise nupu. Sellise nupu kood on näidatud allpool koos sellele rakendatud stiilidega:

3. samm Vorm ise + selle seaded

Nüüd mõtleme välja, kus meie tagasisidevorm ikkagi asub. Ja see on failis kontakt.html, mis asub juba õppetunni lähtekoodis. See vorm on üsna väike, seega panen selle koodi alla:

Sõnumi saatmine administratsioonile:



*Nimi:
*E-post:
Teema:
*Sõnum:

Nagu näete, näete isegi palja silmaga koodi läbides, et vormi paremaks kuvamiseks kasutasin tabelipaigutust. Minu jaoks oli väga kasulik vormi kõik väljad võrdsustada.

4. samm Meilide saatmise eest vastutav töötleja

Siin räägin teile kiiresti e-kirjade saatmise peamisest töötlejast. Ma ei anna selle koodi siin, kuna see on lähtekoodis. Laadige alla ja vaadake selle sisu. Kui tead php-d kuskil kesktasemel, nagu mina, siis saad selle käitleja kogu koodi lihtsalt ise lahti võtta. Kui kõik on valmis, siis liikuge edasi ...

5. samm Peamise jQuery raamistiku "muutmine".

Nüüd, nagu iga jQuery õpetuse puhul, peame jQuery põhiraamistiku külge keerama. Selleks läheme veidi tagasi, meie nupu asukoha ja siltide vahele Ja kleepige järgmine kood:

6. samm Vormi stiil

Nagu näete, paigutatakse meie vormi stiilid faili eraldi stiil.css sest need stiilid võtavad liiga palju ruumi. Peame lihtsalt linkima järgmise koodi meie registrifailiga:

7. samm jQuery näpunäited

Nüüd, et vormi modaal täielikult töötaks, peame sisestama järgmise jQuery koodi:

Järeldus.

Nii et meie huvitav tagasiside vorm on valmis. Tee oli pikk ja raske, nii et kui keegi millestki aru ei saanud, kuulan teie küsimusi selle õppetunni kommentaarides. Ja see on minu jaoks kõik, kuni me uuesti kohtume, sõbrad!

Lugupidamisega Teie jQuery Explorer – M.K.

Oleme kõik harjunud nägema kontakte eraldi, spetsiaalselt loodud lehtedel kasutajate tagasiside saamiseks. Reeglina paigutavad nad sellistele lehtedele lisaks kontaktivormidele suhtlemiseks ja suhtlemiseks palju muud teavet. Mehhanism on silutud, aastate jooksul testitud ja töötab ideaalselt. Kuid mõnel juhul on vaja tuletada eraldi kontaktivorm hüpikakna kujul, ilma kasutajaid teistele lehtedele suunamata.
Korraga kaalusime jQuery kallal töötamist. Täna tahan teile tutvustada huvitavat lahendust saidi jaoks eraldi, algselt kujundatud hüpikkontaktivormi loomiseks.

Minu arvates suurepärane näide kasutajatega suhtlemise viisidest.

Vaatas näidet. Jagame nüüd selle vormi loomisest alates selle komponentideks üldine struktuur HTML-is, enne paigutuse kujundamist CSS-iga.

Vormi HTML-kood

Ei midagi üleloomulikku, tavalise kontaktivormi kõige lihtsam raam, paigutatud plokielemendi sisse div kindla identifikaatori ja klassiga, et vormi välimust veelgi kujundada css ja suhtlemine väikese JavaScriptiga, mida peame hüpikakna aktiveerimiseks ja sulgemiseks.

Sulge

Saada meile sõnum

Sulge

Saada meile sõnum

Samuti peame hüpikvormi aktiveerimisel looma üldise tausta tumedamaks muutmiseks kihi. Saate seda ülesannet täita erineval viisil, kuid me ei ole liiga targad ja lisame veel ühe div, andes sellele ID: id="fade" ja klassi: class="black-overlay" . Võid asetada selle vormi kõrvale, et vajadusel mitte kaua otsida.

Tagasiside

Tõenäoliselt märkasite, et sulgemisnupp on kirjutatud kontaktivormiplokis, vahetult pealkirja ette ja see on loogiline, kuid kus see mujal peaks olema, peaks nupp koos vormiga ilmuma ja kaduma. Välimus ja sulgemisnupu positsiooni kujundame edasi CSS-is

See on kõik, vaatame nüüd hüpikakna tagasiside vormi sisaldava lehe täielikku HTML-koodi:

Hüpikaknas kontaktivorm Tagasiside
Sulge

Saada meile sõnum

Hüpikaknas kontaktivorm Tagasiside

Sulge

Saada meile sõnum

Enne kui jõuame lõbusa osa juurde, milleks on kontaktivormi kujundamine CSS-iga, astume sammu tagasi. Tähelepanelikumad märkasid ilmselt, et vormi avamise ja sulgemise nupud on realiseeritud linkidena koos summutiga href="javascript:void(0)" . Kas see on hea või halb, ma pole enda jaoks täpset vastust leidnud, kasutan seda meetodit harjumusest. Kuigi elementide puhul, millel onclicki sündmust skript töötleb, tundub mulle, et loogilisem ja õigem on kasutada