Atsauksmju veidlapas skripts modālā logā. Vienkārša Ajax kontaktinformācijas veidlapa

Sveiki visiem. Viņi tika bombardēti ar jautājumiem par to, kā īstenot veidlapu, kas parādās modālais logs pēc noklikšķināšanas uz pogas un pēc iesniegšanas tiks parādīts ziņojums par veiksmi vai neveiksmi.

Es domāju, ka internetā to jau ir daudz, bet, tā kā cilvēki jautā, es nolēmu to darīt. Turklāt šādai funkcionalitātei vajadzētu būt gandrīz katrai galvenajai lapai, lai ieviestu atzvanīšanas pogu. Patiešām, tagad arvien vairāk parādās AB testēšanas rezultāti, kuros teikts, ka atvērtās veidlapas darbojas sliktāk nekā tās, kuras ir paslēptas modālā logā un tiek atvērtas pēc noklikšķināšanas uz pogas.

Daži apgalvo, ka tas ir saistīts ar faktu, ka cilvēki lēnām "attīsta imunitāti", un atklātā forma ir agresīva pārdošana. Domājams, ka tagad ir laiks, kad lietotājs redz atvērta forma uzskata, ka viņi mēģina viņam kaut ko "pārdot". Es nepiekrītu šai teorijai, bet patiesības grauds ir klāt. Varbūt dažos uzņēmējdarbības veidos tā ir taisnība. Pagaidām ķersimies pie veidlapas ieviešanas.

Piezīme! Es sīkāk neaprakstīšu katru darbību, bet piedāvāju jums avotā gatavu versiju. Ja jums ir kādi jautājumi, rakstiet komentāros. Mēs izdomāsim :)

Šodien mēs sāksim nevis ar jQuery, bet gan ar pogas un veidlapas izkārtojumu. Visi skripti ir iekļauti lapas beigās.

Poga, noklikšķinot uz kuras tiks atvērts modālais logs:

Iesniedziet savu pieteikumu

Jūs varat iestatīt jebkuru klasi, bet href ierakstiet #modal - tas būs konteinera ID ar ēnojumu un kontaktformu.

Tagad es norādīšu veidlapas kodu un bloku, kurā veidlapa atradīsies:

Pēc stilu pievienošanas tas izskatās šādi:


Lai izveidotu modālu logu, tika izmantota bibliotēka Remodal. Šis ir css un js failu komplekts tikai animētu modālo logu izveidei. Jūs to varat lejupielādēt no saites vai jau ar maniem labojumiem raksta beigās.

Iekļaujiet stilus starp galvas tagiem:

Un pirms noslēdzošā ķermeņa taga pievienojiet skriptus:

Script.js ir skripts veidlapas apstrādei. Tas pats Ajax, kas ļauj mums veikt visu procedūru, atkārtoti neielādējot lapu:

$ (dokuments) .ready (funkcija () ($ ("veidlapa"). iesniedz (funkcija () (// Iegūstiet veidlapas ID var formID = $ (šis) .attr ("id"); // Pievienojiet jaucējmetālu) uz vārda ID var formNm = $ ("#" + formID); $ .ajax ((tips: "POST", url: "mail.php", dati: formNm.serialize (), success: function (data) ( // Nosūtīšanas rezultāta izvades teksts $ (formNm) .html (dati);), error: function (jqXHR, text, error) (// nosūtīšanas kļūdas teksta $ (formNm) .html (kļūda) izvade) )); atgriezt nepatiesu;));));

Oriģinālu nedošu css kods un js no failiem, kas atbild par modālo logu un veidlapu, jo tie ir diezgan lieli. Ja kas, paskatieties uz avotu. Bet php apstrādātājs lielākoties ir standarta (ja es tā varu teikt):

Sūtītāja vārds:$ nosaukums Tālrunis:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Paldies, ka nosūtījāt savu ziņu!
";) cits (atbalss"
Kļūda. Ziņojums nav nosūtīts!
";)) else (http_response_code (403); echo" Try again ";)?>

Lūdzu, lūdzu, neaizmirstiet mainīt adreses E -pasts savā nodabā.

Šeit ir ajax forma. Atvainojiet, ka nemēģināju detalizēti izskaidrot katra elementa izveidi. Es tikai gribēju dot gatavu rezultātu, bet nav jēgas aprakstīt visas animācijas, izskatu. Lejupielādējiet avotu un ieguliet to savā vietnē. Un tas viss šodien. Lai veicas visiem!

Puiši, es ļoti lūdzu jūs pārbaudīt veidlapu uz īsta vai virtuālais serveris(mitināšana). Lūdzu, pārliecinieties, vai jūsu serveris atbalsta php, vai jums ir maksas plāns, nevis izmēģinājuma periods. Pretējā gadījumā 90% gadījumu veidlapa nedarbosies.

Negaidiet vēstuli savā pastkastē, ja pārlūkprogrammā tikko atvērāt indeksa failu un noklikšķinājāt uz pogas Sūtīt. Php ir servera puses valoda!

Ja esat pārāk slinks, lai to izdomātu un veidlapu veidotu pats, tad iesaku pievērst uzmanību.

Atjaunināta versija raksts ir

Labdien, dārgie lasītāji! Šajā apmācībā es parādīšu, kā mēs varam panākt, lai HTML5 e -pasta reģistrācijas veidlapa apstiprinātu ievadīto URL, izmantojot JQuery. Pārbaudei mēs izmantosim regulārās izteiksmes un saglabāsim ievadīto adresi MySql datu bāzē. Tādējādi, saglabājot, tas izmantos AJAX(t.i., izsauciet PHP skriptu, atkārtoti neielādējot lapu). Rezultātu var apskatīt demonstrācijas lapā, kā arī lejupielādēt avotu. Sāksim!

Pamata iezīmēšana

Sāksim, izveidojot jaunu index.html failu. Un izveidosim vienkāršu dokumentu struktūru, kas turas pie HTML5. Mēs tūlīt iekļausim arī CSS stilus un bibliotēku, mums tas būs vajadzīgs, pārbaudot ievadīto e-pastu:

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


<html lang = "ru">
<galva>
<meta rakstzīmju kopa = "utf-8">
<nosaukums> E -pasta reģistrācijas veidlapa ar jQuery validatoru</ title>

<saite rel = "styleheet" type = "text / css" href = "style.css">

<skripta veids = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ galva>

<ķermenis>

</ ķermenis>
</ html>

Tagad jūs esat gatavs izveidot savu veidlapu!

Abonēšanas e-pasta veidlapa

Mūsu veidlapas mērķis ir pārbaudīt ievadīto apmeklētāja e -pasta adresi un kaut kā saglabāt to abonentu sarakstā. Šim nolūkam mēs to darām regulāra forma ar pogu, noklikšķinot uz kuras adrese tiek apstrādāta un saglabāta datu bāzē vai failā, kā tas ir ērti ikvienam. Nodarbībā mēs apsvērsim datu saglabāšanu buz. Tas padarīs to skaidrāku, mēs koncentrēsimies uz ievadītās adreses pareizības pārbaudi. Abonēšanas veidlapa izskatās šādi:

1
2
3
4
5
6
7
8
9



"Ievadi savu epastu" autocomplete = "off" autocorrect = "off" autocapitalize = "off">

Ietīsim veidlapu #completeform div blokā, lai pēc adreses saglabāšanas veidlapu varētu sakļaut.

Ievades laukā mēs izmantojam arī pāris jaunus atribūtus. Lauka veids ir iestatīts uz "e -pasts", lai mobilās pārlūkprogrammas varētu parādīt atbilstošo tastatūru. Pārlūks Chrome un dažas WebKit pārlūkprogrammas to izmantos, lai pārbaudītu, vai lietotājs ir ievadījis adresi. Automātiskās korekcijas un autokapitalizācijas atribūti ir īpaši izstrādāti mobilajām pārlūkprogrammām.

Span ar id kļūda sākotnēji paslēpts, par ko displeja rekvizīts ir atbildīgs ar vērtību none, tas ir ierakstīts failā ar stiliem, par to nedaudz vēlāk. Bet, tiklīdz lietotājs ir ievadījis nederīgu e -pasta adresi, tiek parādīts brīdinājuma ziņojums.

JQuery validators un AJAX pieprasījums

Sāksim ar vienkāršu e -pasta verifikācijas funkciju. Mēs izmantojam regulāras izteiksmes virkni, lai pārbaudītu, vai teksta virkne atbilst standarta e -pasta sintaksei, un pēc tam atgriež Būla vērtību true, citādi nepatiesu.

Apskatīsim funkciju completeInviteForm (). Lai nesajauktu adreses ievades veidlapu, mēs sakļausim fadeOut efektu 400 milisekundēs. Un kā atzvanīšana, izsauksim funkciju $ .ajax (), izmantosim to, lai izsauktu failu save.php un saglabātu ievadīto adresi datu bāzē. Zemāk es minēšu faila save.php avota kodu, bet pagaidām izdomāsim to ar funkciju $ .ajax ().

$ .ajax- ielādē attālo lapu, izmantojot HTTP pieprasījums... Kā arguments funkcijai $ .ajax () tiek nodots objekts, kas sastāv no atslēgu / vērtību pāriem, kas tiek izmantoti pieprasījuma inicializēšanai un apstrādei. Mūsu gadījumā mēs izmantosim šādus objektus:

  • tips: 'POST' - pēc noklusējuma izvēlieties faila pieprasījuma veidu GŪT, atšķirība starp POST un GET nav ļoti liela, tikai ar GET pieprasījumu dati tiek pārsūtīti galvenē un ar POST pieprasījuma pamattekstā, tāpēc, izmantojot POST, jūs varat pārsūtīt vairāk informācijas;
  • url: ‘save.php’ - ceļš uz izpildāmo failu;
  • dati: ’email =’ + $ ("# email"). val ()- dati, kas tiek nosūtīti uz serveri. AR izmantojot CSS atlasītājs #e -pasts attiecas uz elementu ar id = "e -pasts" un iegūstiet vērtības atribūta saturu, tas ir, lietotāja ievadīto e -pastu. Un piešķiriet šo saturu mainīgajam e -pastu kuru izmantosim failā save.php;
  • panākums: function () ($ (‘# completeform’). pirms (‘ Viss ir gatavs! Jūs esat pievienots adresātu sarakstam.‘);} - veiksmes funkcija tiek saukta par panākumiem ajax pieprasījums... Funkcija veic šādu darbību. #Completeform div priekšā mēs ievietojam saturu, kas informē lietotāju, ka viņa e -pasts ir pievienots adresātu sarakstam.

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

funkcija completeInviteForm () (
setTimeout (function () ($ ("# completeform") .fadeOut (400, function () (
$ .ajax ((
tips: "POST",
url: "save.php",
dati: "e -pasts =" + $ ("# e -pasts") .val (),
panākumi: function () (
$ ("# completeform") .before ( "Viss ir gatavs! Jūs esat pievienots adresātu sarakstam." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

Izmantojot setTimeout metodi, veidlapa tiek paslēpta un ajax pieprasījums tiek izpildīts asinhroni ar 1100 milisekundes aizkavi.

Veidlapu apstrāde

Lai ērtāk piekļūtu lapas elementiem, izveidosim pāris mainīgos ar #error un #btnwrap atlasītājiem.

var erdiv = $ ("# kļūda");
var btnwrap = $ ("# btnwrap");

Notikumu apstrādātāja izmantošana tiešraide izsekojiet klikšķi uz pogas "Abonēt", tā id = "sendbtn". E.preventDefault () metode; atceļ pārlūkprogrammas standarta darbību (noklikšķinot uz pogas), proti, mēs atceļam lapas atsvaidzināšanu un URL maiņu. Mēs piešķiram ievadīto e -pastu mainīgajam emailval, un mēs varam sākt apstrādāt šo mainīgo.

Vispirms ja ja (! isEmail (emailval)) pārbauda, ​​vai funkcija isEmail ir atgriezta nepatiesa, tas nozīmē, ka lietotāja ievadītā e -pasta adrese neatbilst parastajai izteiksmei, tas ir, tā nav pareiza, mēs par to informēsim lietotāju kļūdas bloks, parādiet ziņojumu (Jūs nepareizi ievadījāt e-pasta adresi).

Tagad otrais ja tiek izpildīts tikai tad, ja lietotājs ir ievadījis derīgu e -pasta adresi. Tad mēs varam sākt adreses saglabāšanas procesu.

Lai process būtu skaidrs, ievietojiet atbilstošo tekstu kļūdu blokā un ievietojiet GIF attēlu blokā, kurā atradās poga "Abonēt". Un mēs saucam par funkciju CompleteInviteForm (), kuru mēs apspriedām iepriekš.

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

ja (! isEmail (emailval)) {
erdiv.html ( "Jūs neesat ievadījis pareizo e -pasta adresi") ;
erdiv.css ("displejs", "bloks");
}
ja (isEmail (emailval)) {
erdiv.css ("krāsa", "# 719dc8");
erdiv.html ("apstrāde ...");
(completeInviteForm (), 900);
}
} ) ;
} ) ;

Datu bāze

Tā kā esmu izvēlējies ievadītās adreses saglabāšanas metodi datu bāzē, tad īsi pastāstīšu par datu bāzes un pašas tabulas izveidi, kā arī solītā faila save.php kodu, kas darbojas ar MySql datu bāzi.

Šim nolūkam mums vajag vietējais serveris, Es izmantoju Denwer. Protams, daudzi cilvēki to izmanto, tāpēc es neiedziļināšos detaļās. Mēs ejam garām phpMyAdmin un izveidot datu bāzi e -pastu:

Lai saglabātu abonentu adreses, mums ir nepieciešama viena tabula ar diviem laukiem, sauksim to adrese:

Lauki būs šādi:

  • id- identifikators epasta adrese(pazīstams arī kā primārā atslēga);
  • adrese- tieši pati e -pasta adrese.

Save.php fails

Tagad ir pienācis laiks runāt par pēdējais elements no izveidotā abonementa, par failu save.php. Tas satur PHP skriptu e -pasta adreses saglabāšanai datu bāzē.

1
2
3
4
5
6

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

Pirmkārt, mēs pārbaudām, vai e -pasta mainīgais pastāv globālajā POST masīvā, ja tā, tad piešķiriet tā vērtību vietējam mainīgajam $ email. Tālāk mēs izveidojam savienojumu ar serveri mysql_connect (), lietotājs ir root, nav paroles. Datu bāzes izvēle e -pastu un izpildiet vaicājumu datu bāzē, ievietojiet jaunu ierakstu adrešu tabulā, kur adreses laukos tiks ievietota mainīgā $ email vērtība. Tas ir viss!

Tas noslēdz stundu. Es vēlos jums atgādināt, ka šis abonements darbojas tikai serverī (jo mēs izmantojam bāzi un).

Sveiki. Šajā apmācībā mēs izveidosim pilnīgu formu. atsauksmes, un tas parādīsies modālā logā, noklikšķinot uz pogas lapā. Šo nodarbību es veicu pats, no nulles, izmantojot tikai jQuery ietvaru un vienu mazu JavaScript "th. Nodarbība ir ļoti interesanta, tāpēc, lūdzu, nepalaidiet to garām! Zemāk varat apskatīt iegūtās veidlapas demonstrāciju, kā arī lejupielādēt darbam nepieciešamie faili:

1. darbība. vispārīgs apraksts un kā darbojas atsauksmju veidlapa:

Pirmkārt, es jums pastāstīšu, kādi faili mums būs nepieciešami un patiesībā kāpēc tie ir nepieciešami:

  • attēlus- mape, kurā tiek glabāti visi mūsu veidlapas attēli;
  • index.html- galvenais, "indeksa" fails, kurā atradīsies atsauksmju veidlapas izsaukšanas poga;
  • contact.html- fails, kas satur pašu veidlapu. Tieši šis fails tiks savienots ar modālo logu;
  • send.php- failu apstrādātājs, kas ir atbildīgs par vēstules nosūtīšanu;
  • jquery.js- galvenais jQuery ietvars;
  • stils.css- fails ar mūsu veidlapas kaskādes stila lapām.

Tātad, iesim tālāk un kārtībā ... Veidlapas darbs būs šāds: Lietotājs ieiet lapā, kurā atrodas modālā loga izsaukšanas poga, noklikšķina uz tās, tad parādās veidlapa, tajā apmeklētājs ievada visus datus un ziņas tekstu un nosūta, tad tas tiek pārsūtīts uz lapu ar ziņojumu par vēstules veiksmīgu vai neveiksmīgu nosūtīšanu. Tas arī viss, tagad sāksim rakstīt veidlapu ...

2. solis. Poga veidlapas izsaukšanai.

Lai parādās mūsu modālais logs ar veidlapu, jums tas ir kaut kā jāpiespiež. Lai to izdarītu, mums vienkārši jāievieto parastā poga lapā. Šādas pogas kods ir parādīts zemāk kopā ar tai piemērotajiem stiliem:

3. solis. Pati veidlapa + tās iestatījumi

Tagad izdomāsim, kur atradīsies mūsu atsauksmju veidlapa. Un tas būs failā contact.html, kas jau atrodas stundas avota kodā. Šī veidlapa ir diezgan maza, tāpēc es ievietošu tās kodu zemāk:

Ziņojuma sūtīšana administrācijai:



*Vārds:
* E-pasts:
Tēma:
*Ziņojums:

Kā redzat, ejot cauri kodam, pat ar neapbruņotu aci, jūs varat redzēt, ka labākai veidlapas attēlošanai es izmantoju tabulas izkārtojumu. Tas man bija ļoti noderīgi, lai izlīdzinātu visus veidlapu laukus.

4. solis. Pārzinis, kas atbildīgs par e -pasta ziņojumu sūtīšanu

Šeit es ātri iepazīstināšu jūs ar galveno pasta apstrādātāju. Es šeit nenorādīšu tā kodu, jo tas ir avota kodā. Lejupielādējiet un apskatiet tā saturu. Ja jūs zināt php kaut kur vidējā līmenī, piemēram, es, tad varat viegli parsēt visu šī apstrādātāja kodu pats. Ja viss ir gatavs, tad turpiniet ...

5. solis. Galvenā jQuery ietvara pagriešana

Tagad, tāpat kā jebkurā jQuery apmācībā, mums ir "jāieskrūvē" galvenā jQuery sistēma. Lai to izdarītu, atgriezīsimies mazliet atpakaļ, kur atrodas mūsu poga, un starp tagiem un ievietojiet šādu kodu:

6. darbība. Veidlapas veidošana

Kā redzat, mūsu veidlapas stili tiek atveidoti failā atsevišķi stils.css jo šie stili aizņem pārāk daudz vietas. Mums vienkārši ir jāsaista zemāk esošais kods ar mūsu indeksa failu:

7. solis. jQuery uzlabojumi

Lai pilnībā izmantotu modālās formas logu, mums jāievieto šāds jQuery kods:

Secinājums.

Tātad mūsu interesantā atsauksmju veidlapa ir gatava. Ceļš bija garš un grūts, tādēļ, ja kāds kaut ko nesaprata, uzklausīšu jūsu jautājumus šīs nodarbības komentāros. Un tas man ir viss, līdz mēs atkal satiekamies, draugi!

Ar cieņu jQuery - ceļvedis - M.K.

Mēs visi esam pieraduši redzēt kontaktpersonas atsevišķās, speciāli izveidotās lapās lietotāju atsauksmēm. Parasti šādās lapās papildus saziņas veidlapām viņi ievieto daudz citas informācijas mijiedarbībai un saziņai. Mehānisms ir atkļūdots, gadu gaitā pierādīts un darbojas perfekti. Bet dažos gadījumos kļūst nepieciešams parādīt atsevišķu Saziņas veidlapa kā uznirstošo logu, nenovirzot lietotājus uz citām lapām.
Savulaik mēs apsvērām iespēju sadarboties ar jQuery. Šodien es vēlos jūs iepazīstināt ar interesantu risinājumu, lai vietnei izveidotu atsevišķu, sākotnēji izstrādātu, uznirstošu kontaktformu.

Manuprāt, brīnišķīgs mijiedarbības ar lietotājiem piemērs.

Mēs apskatījām piemēru. Tagad sadalīsim šo formu tās sastāvdaļās, sākot no radīšanas vispārējā struktūra Html, pirms izkārtojuma izveides, izmantojot CSS.

Veidlapas HTML kods

Nekas pārdabisks, vienkāršākais regulāras kontaktformas ietvars, kas ievietots bloka elementā div ar konkrētu identifikatoru un klasi, lai tālāk veidlapas izskatu veidotu css un mijiedarboties ar mazo javascript, kas mums ir nepieciešams, lai aktivizētu un aizvērtu uznirstošo veidlapu.

Aizvērt

Nosūtiet mums ziņu

Aizvērt

Nosūtiet mums ziņu

Turklāt, aktivizējot uznirstošo formu, mums ir jāizveido tumšāks slānis vispārējam fonam. Jūs varat paveikt šo uzdevumu dažādos veidos, taču mēs nebūsim pārāk gudri un pievienosim vēl vienu div piešķirot tam identifikatoru: id = "fade" un klasi: class = "black-overlay". Varat to novietot blakus veidlapai, lai nepieciešamības gadījumā ilgi nemeklētu.

Atsauksmes

Jūs droši vien pamanījāt, ka slēgšanas poga ir ierakstīta kontaktformas blokā, tieši pirms virsraksta, un tas ir loģiski, bet kur citur tam vajadzētu būt, pogai vajadzētu parādīties un pazust līdz ar veidlapu. Izskats un aizvēršanas pogas pozīciju, mēs turpmāk veidosim CSS

Tas ir viss, tagad apskatīsim pilnu lapas HTML lapu, kurā ir uznirstošā atsauksmju veidlapa:

Uznirstošā saziņas veidlapa Atsauksmes
Aizvērt

Nosūtiet mums ziņu

Uznirstošā saziņas veidlapa Atsauksmes

Aizvērt

Nosūtiet mums ziņu

Pirms ķeramies pie jautrās daļas, veidojot mūsu kontaktformu ar CSS, es mazliet atkāpos. Uzmanīgākais, iespējams, pamanīja, ka veidlapas atvēršanas un aizvēršanas pogas tiek ieviestas kā saites ar "jammer" href = "javascript: void (0)". Labi vai slikti, es neesmu atradis precīzu atbildi sev, es izmantoju šo metodi pieraduma dēļ. Lai gan elementiem, uz kuriem skripts apstrādā onclick notikumu, manuprāt, tas ir loģiskāk un pareizāk izmantot