Un script pentru un formular de feedback într-o fereastră modală. Formular simplu de contact Ajax

Bună ziua tuturor. Au fost bombardați cu întrebări despre cum să implementăm formularul care apare în fereastra modală după ce faceți clic pe buton și după trimitere, va fi afișat un mesaj de succes sau eșec.

Cred că există deja multe despre acest lucru pe Internet, dar, de vreme ce oamenii întreabă, am decis să o fac. Mai mult, o astfel de funcționalitate ar trebui să fie prezentă pe aproape fiecare pagină de destinație pentru a implementa un buton de apel invers. Într-adevăr, acum apar din ce în ce mai multe rezultate ale testelor AB, care spun că formularele deschise funcționează mai rău decât cele ascunse într-o fereastră modală și deschise după ce faceți clic pe buton.

Unii susțin că acest lucru se datorează faptului că oamenii încet „dezvoltă imunitate”, iar forma deschisă este o vânzare agresivă. Se presupune că acum a sosit momentul în care utilizatorul, când vede o formă deschisă, crede că încearcă să-i „vândă” ceva. Nu sunt de acord cu această teorie, dar există un fir de adevăr. Poate că în unele tipuri de afaceri acest lucru este adevărat. Deocamdată, să intrăm în implementarea formularului.

Notă! Nu voi descrie fiecare acțiune în detaliu, dar vă ofer o versiune gata făcută în sursă. Dacă aveți întrebări, scrieți în comentarii. Ne vom da seama :)

Astăzi vom începe nu cu jQuery, ci cu aspectul butonului și al formularului. Toate scripturile sunt incluse la sfârșitul paginii.

Butonul făcând clic pe care se va deschide fereastra modală:

Trimiteți cererea

Puteți seta orice clasă, dar în href scrieți #modal - acesta va fi ID-ul containerului cu umbrire și formularul de contact.

Acum voi da codul formularului și blocul pe care va fi amplasat formularul:

După adăugarea stilurilor, arată astfel:


Pentru a crea o fereastră modală, a fost utilizată biblioteca Remodal. Acesta este un set de fișiere css și js, doar pentru a crea ferestre modale animate. Puteți să-l descărcați de pe link sau deja cu modificările mele la sfârșitul articolului.

Includeți stiluri între etichetele de cap:

Și înainte de eticheta de închidere a corpului - adăugați scripturi:

Script.js este un script pentru procesarea unui formular. Același Ajax care ne permite să desfășurăm întreaga procedură fără a reîncărca pagina:

$ (document). ready (function () ($ ("form"). submit (function () (// Obțineți ID-ul formularului var formID = $ (this) .attr ("id"); // Adăugați un hash la numele ID var formNm = $ ("#" + formID); $ .ajax ((tip: "POST", url: "mail.php", date: formNm.serialize (), succes: funcție (date) ( // Ieșirea textului rezultatului de trimitere $ (formNm) .html (date);), eroare: funcție (jqXHR, text, eroare) (// Ieșirea textului de eroare de trimitere $ (formNm) .html (eroare);) )); returnează fals;));));

Nu voi da originalul cod CSSși js din fișierele responsabile pentru fereastra modală și formular, deoarece acestea sunt destul de mari. Dacă e ceva, uită-te la sursă. Dar gestionarul PHP este în mare măsură standard (dacă pot să spun așa):

Numele expeditorului:$ nume Telefon:$ telefon "; $ trimitere = mail ($ către, $ subiect, $ mesaj, $ anteturi); dacă ($ trimitere ==" adevărat ") (ecou"

Vă mulțumim că ați trimis mesajul!
";) else (ecou"
Eroare. Mesajul nu a fost trimis!
";)) else (http_response_code (403); echo" Încercați din nou ";)?>

Vă rog, nu uitați să schimbați adresele E-mail pe cont propriu.

Iată o formă ajax. Ne pare rău că nu am încercat să explic în detaliu modul în care a fost realizat fiecare element. Am vrut doar să dau un rezultat terminat, dar nu are rost să descriu toate animațiile, aparențele. Descărcați sursa și încorporați-o pe site-ul dvs. Și atât pentru astăzi. Noroc tuturor!

Băieți, vă rog insistent să testați formularul pe un real sau server virtual(găzduire). Vă rugăm să vă asigurați că serverul dvs. acceptă PHP, aveți un plan plătit și nu o perioadă de încercare. În caz contrar, în 90% din cazuri, formularul nu va funcționa.

Nu așteptați scrisoarea din cutia poștală dacă ați deschis fișierul index în browser și ați făcut clic pe butonul „Trimiteți”. PHP este un limbaj de pe server!

Dacă ești prea leneș să-ți dai seama și să creezi singur forma, atunci îți recomand să fii atent.

Versiune actualizata articolul este

Buna dragi cititori a! În acest tutorial, vă voi arăta cum putem face ca un formular de înscriere prin e-mail HTML5 să valideze adresa URL introdusă cu JQuery. Pentru verificare, vom folosi expresii regulate și vom salva adresa introdusă în baza de date MySql. Astfel, atunci când salvați, va folosi AJAX(adică sunați scriptul PHP fără a reîncărca pagina). Rezultatul poate fi vizualizat pe pagina demonstrativă, precum și descărcarea surselor. Să începem!

Marcaj de bază

Să începem prin a crea un nou fișier index.html. Și să facem o structură simplă de documente care să rămână pe HTML5. De asemenea, vom include imediat stilurile CSS și biblioteca, vom avea nevoie de ea la verificarea e-mailului introdus:

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


<html lang = "ru">
<cap>
<meta charset = "utf-8">
<titlu> Formular de înscriere prin e-mail cu validatorul jQuery</ title>

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

<tip de script = "text / javascript" src = „http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”>
</ cap>

<corp>

</ corp>
</ html>

Acum sunteți gata să vă creați formularul!

Formular de e-mail de abonament

Scopul formularului nostru este să verificăm adresa de e-mail a vizitatorului introdus și să o salvăm cumva pe lista abonaților. Pentru asta facem formă regulată cu un buton, făcând clic pe care adresa este procesată și salvată în baza de date sau într-un fișier, deoarece este convenabil pentru oricine. În lecție, vom lua în considerare salvarea datelor în buz. Acest lucru va face mai clar, ne vom concentra pe verificarea corectitudinii adresei introduse. Așa arată formularul de abonament:

1
2
3
4
5
6
7
8
9



"Introduceți adresa dvs. de email" autocomplete = "off" autocorrect = "off" autocapitalize = "off">

Să înfășurăm formularul în blocul div #completeform, astfel încât după salvarea adresei, formularul să poată fi restrâns.

De asemenea, folosim câteva atribute noi în câmpul de introducere. Tipul de câmp este setat la „e-mail”, astfel încât browserele mobile să poată afișa tastatura corespunzătoare. Chrome și unele browsere WebKit vor folosi acest lucru pentru a verifica dacă utilizatorul a introdus o adresă. Atributele de autocorectare și autocapitalizare sunt concepute special pentru browserele mobile.

Intinde cu id eroare ascuns inițial, pentru care proprietatea afișajului este responsabilă cu valoarea none, aceasta este scrisă în fișierul cu stiluri, despre aceasta puțin mai târziu. Dar de îndată ce utilizatorul a introdus o adresă de e-mail nevalidă în interval, se afișează un mesaj de avertizare.

Validator JQuery și solicitare AJAX

Să începem cu o funcție simplă de verificare prin e-mail. Folosim un șir de expresie regulat pentru a testa dacă șirul de text se potrivește cu sintaxa e-mail standard, apoi returnăm o valoare booleană adevărată altfel falsă.

Să aruncăm o privire la funcția completeInviteForm (). Pentru a evita confuzia formularului de introducere a adresei, vom restrânge efectul fadeOut timp de 400 de milisecunde. Și ca apel invers, vom trece la funcția $ .ajax (), cu ajutorul său vom apela fișierul save.php și vom salva adresa introdusă în baza de date. Voi cita mai jos codul sursă al fișierului save.php, dar deocamdată să ne dăm seama cu funcția $ .ajax ().

$ .ajax- încarcă pagina de la distanță folosind Cerere HTTP... Ca argument pentru funcția $ .ajax (), se trece un obiect, format din perechi cheie / valoare care sunt utilizate pentru inițializarea și manipularea cererii. În cazul nostru, vom folosi următoarele obiecte:

  • tip: „POST” - selectați tipul de cerere către fișier, în mod implicit OBȚINE, diferența dintre POST și GET nu este foarte mare, doar cu o solicitare GET, datele sunt transferate în antet și cu POST în corpul cererii, prin urmare, folosind POST, puteți transfera mai multe informații;
  • url: 'save.php' - cale către fișierul executabil;
  • date: ’email =’ + $ („# email”). val ()- datele trimise către server. CU folosind CSS selectorul #email se referă la elementul cu id = "e-mail"și obțineți conținutul atributului valoare, adică e-mailul introdus de utilizator. Și atribuiți acest conținut unei variabile e-mail pe care îl vom folosi în fișierul save.php;
  • success: function () ($ (‘# completeform’). before (‘ Totul este gata! Ați fost adăugat la lista de discuții.‘);} - funcția de succes este apelată la succes cerere ajax... Funcția efectuează următoarea acțiune. În fața diviziei #completeform, inserăm conținut notificând utilizatorului că e-mailul său a fost adăugat la lista de corespondență.

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

function completeInviteForm () (
setTimeout (function () ($ ("# completeform") .fadeOut (400, function () (
$ .ajax ((
tastați: „POST”,
url: „save.php”,
date: "email =" + $ ("# email") .val (),
success: function () (
$ („# completeform”) .înainte ( "Totul este gata! Ați fost adăugat la lista de discuții." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

Și folosind metoda setTimeout, formularul este ascuns și solicitarea ajax este executată asincron cu o întârziere de 1100 milisecunde.

Prelucrarea formularului

Pentru comoditatea referirii la elementele paginii, să creăm câteva variabile cu selectorele #error și #btnwrap.

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

Utilizarea unui gestionar de evenimente Trăi urmăriți clicul pe butonul „Abonați-vă”, codul său = „sendbtn”. E.preventDefault () metoda; anulează comportamentul standard al browserului pentru o acțiune (făcând clic pe un buton), și anume, anulăm reîmprospătarea paginii și modificarea adresei URL. Atribuim e-mailul introdus variabilei emailval și putem începe procesarea acestei variabile.

Primul dacă dacă (! isEmail (emailval)) verifică dacă funcția isEmail a fost returnată falsă, aceasta înseamnă că adresa de e-mail introdusă de utilizator nu se potrivește cu expresia obișnuită, adică nu este corectă, vom informa utilizatorul despre acest lucru în bloc de eroare, afișați mesajul (Ați introdus incorect adresa de e-mail).

Acum al doilea dacă executat numai dacă utilizatorul a introdus o adresă de e-mail validă. Apoi putem începe procesul de salvare a adresei.

Pentru a clarifica procesul, introduceți textul corespunzător în blocul de erori și plasați o imagine GIF în blocul în care se afla butonul „Abonați-vă”. Și numim funcția completeInviteForm (), despre care am discutat mai sus.

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

if (! isEmail (emailval)) (
erdiv.html ( „Ați introdus o adresă de e-mail incorectă”) ;
erdiv.css ("afișaj", "bloc");
}
if (isEmail (emailval)) (
erdiv.css ("culoare", "# 719dc8");
erdiv.html („procesează ...”);
(completeInviteForm (), 900);
}
} ) ;
} ) ;

Bază de date

Deoarece am ales metoda de salvare a adresei introduse în baza de date, voi vorbi pe scurt despre crearea bazei de date în sine și a tabelului, precum și despre codul fișierului save.php promis, care funcționează cu baza de date MySql.

Pentru aceasta avem nevoie server local, Folosesc Denwer. Cu siguranță mulți oameni îl folosesc, așa că nu voi intra în detalii. Trecem phpMyAdminși creați o bază de date e-mail:

Pentru a salva adresele abonaților, avem nevoie de un tabel cu două câmpuri, să-l numim abordare:

Câmpurile vor fi după cum urmează:

  • id- identificator Adresa de e-mail(aka cheie primară);
  • abordare- direct adresa de e-mail în sine.

Fișierul Save.php

Acum este timpul să vorbim despre ultimul element din abonamentul creat, despre fișierul save.php. Acesta conține scriptul PHP pentru salvarea adresei de e-mail în baza de date.

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 ( „INSERT INTO address (address) VALUES („ $ email ”)”, $ db);
?>

În primul rând, verificăm dacă variabila de e-mail există în matricea globală POST, dacă da, apoi atribuim valoarea variabilei locale $ email. Apoi, stabilim o conexiune la serverul mysql_connect (), utilizatorul este root, nu există parolă. Alegerea unei baze de date e-mailși executați o interogare în baza de date, introduceți o nouă înregistrare în tabelul de adrese, unde valoarea variabilei $ email va fi inserată în câmpurile de adresă. Asta e tot!

Aceasta încheie lecția. Vreau să vă reamintesc că acest abonament funcționează numai pe server (deoarece utilizăm baza și).

Buna ziua. În acest tutorial vom realiza o formă completă. părere, și va apărea în fereastra modală făcând clic pe butonul de pe pagină. Am făcut această lecție chiar de la zero, folosind doar cadrul jQuery și un mic JavaScript. Lecția este foarte interesantă, așa că vă rugăm să nu o treceți! Mai jos puteți vizualiza o demonstrație a formularului rezultat, precum și descărca fișierele necesare pentru lucru:

Pasul 1. descriere generalași cum funcționează formularul de feedback:

Mai întâi, vă voi spune de ce fișiere vom avea nevoie și, de fapt, de ce sunt necesare:

  • imagini- dosarul în care sunt stocate toate imaginile formularului nostru;
  • index.html- fișierul principal, „index”, în care va fi amplasat butonul pentru apelarea formularului de feedback;
  • contact.html- fișierul care conține formularul în sine. Acest fișier va fi conectat la fereastra modală;
  • send.php- file-handler, care este responsabil pentru trimiterea scrisorii;
  • jquery.js- principalul cadru jQuery;
  • stil.css- fișier cu foi de stil în cascadă pentru formularul nostru.

Deci, să mergem mai departe și în ordine ... Lucrarea formularului va fi după cum urmează: Utilizatorul intră pe pagina pe care se află butonul pentru apelarea ferestrei modale, face clic pe ea, apoi apare formularul, în ea vizitatorul introduce toate datele și textul mesajului și trimite, apoi este transferat pe pagină cu un mesaj despre trimiterea cu succes sau nereușită a scrisorii. Asta este tot, și acum să începem să ne setăm formularul ...

Pasul 2. Buton pentru apelarea formularului.

Pentru ca fereastra noastră modală cu formularul să apară, trebuie să o forțați să o facă cumva. Pentru a face acest lucru, trebuie doar să plasăm un buton obișnuit pe pagină. Codul pentru un astfel de buton este prezentat mai jos, împreună cu stilurile aplicate acestuia:

Pasul 3. Formularul în sine + setările pentru acesta

Acum să ne dăm seama unde va fi amplasat formularul nostru de feedback. Și va fi în dosar contact.html, care se află deja în codul sursă al lecției. Acest formular este destul de mic, așa că îi voi plasa codul mai jos:

Trimiterea unui mesaj către administrație:



*Nume:
* E-mail:
Temă:
*Mesaj:

După cum puteți vedea, trecând prin cod, chiar și cu ochiul liber, puteți vedea că, pentru o afișare mai bună a formularului, am folosit un aspect de tabel. Acest lucru mi-a fost foarte util pentru a egaliza toate câmpurile de formular.

Pasul 4. Handler responsabil pentru trimiterea e-mailurilor

Aici, vă voi prezenta rapid managerul principal de corespondență. Nu voi da codul său aici, deoarece este în codul sursă. Descărcați și vizualizați conținutul acestuia. Dacă știți php undeva la un nivel intermediar, ca mine, atunci puteți analiza cu ușurință tot codul acestui handler. Dacă totul este gata, atunci treci mai departe ...

Pasul 5.Învârtirea cadrului principal jQuery

Acum, ca și în cazul oricărui tutorial jQuery, trebuie să „înșurubăm” cadrul principal jQuery. Pentru a face acest lucru, să ne întoarcem puțin, unde se află butonul nostru și între etichete și introduceți următorul cod:

Pasul 6. Coafarea formei

După cum puteți vedea, stilurile pentru formularul nostru sunt redate separat, în fișier stil.css deoarece aceste stiluri ocupă prea mult spațiu. Trebuie doar să legăm codul de mai jos la fișierul nostru index:

Pasul 7. JQuery tweaks

Acum, pentru lucrul complet al ferestrei de formular modal, trebuie să inserăm următorul cod jQuery:

Concluzie.

Deci formularul nostru interesant de feedback este gata. Calea a fost lungă și dificilă, așa că, dacă cineva nu a înțeles ceva, vă voi asculta întrebările în comentariile la această lecție. Și asta e tot pentru mine, până ne întâlnim din nou, prieteni!

Cu stimă jQuery - ghid - M.K.

Suntem cu toții obișnuiți să vedem contactele pe pagini separate, special create pentru feedback-ul utilizatorilor. De regulă, pe astfel de pagini, pe lângă formularele de contact, acestea postează o mulțime de alte informații pentru interacțiune și comunicare. Mecanismul este depanat, dovedit de-a lungul anilor și funcționează perfect. Dar, în unele cazuri, devine necesar să se afișeze un separat Formular de contact ca fereastră pop-up fără a redirecționa utilizatorii către alte pagini.
La un moment dat, ne-am gândit să lucrăm cu jQuery. Astăzi, vreau să vă fac cunoștință cu o soluție interesantă pentru a crea un formular de contact pop-up separat, conceput inițial, pentru site.

În opinia mea, un exemplu minunat de mijloc de interacțiune cu utilizatorii.

Ne-am uitat la un exemplu. Acum, să descompunem această formă în componentele sale, de la creație structura generalăîn Html, înainte de a modela aspectul aspectului folosind CSS.

Codul HTML al formularului

Nimic supranatural, cel mai simplu cadru al unui formular de contact obișnuit, plasat într-un element bloc div cu un identificator și o clasă specifică, pentru a contura în continuare aspectul formularului în cssși să interacționăm cu micul javascript de care avem nevoie pentru a activa și a închide formularul popup.

Închide

Trimite-ne un mesaj

Închide

Trimite-ne un mesaj

De asemenea, trebuie să creăm un strat de umbrire pentru fundalul general, atunci când activăm forma pop-up. Puteți îndeplini această sarcină în moduri diferite, dar nu vom fi prea deștepți și nu vom mai adăuga una div atribuindu-i un identificator: id = "fade" și o clasă: class = "black-overlay". Îl puteți plasa lângă formular pentru a nu căuta mult timp, dacă este necesar.

Părere

Probabil ați observat că butonul de închidere este înscris în blocul formularului de contact, imediat înainte de antet, iar acest lucru este logic, dar unde altundeva ar trebui să fie, butonul ar trebui să apară și să dispară împreună cu formularul. Aspect iar poziția butonului de închidere o vom forma în continuare în CSS

Asta e tot, să aruncăm o privire la codul HTML complet al paginii care conține formularul de feedback pop-up:

Formular de contact pop-up Părere
Închide

Trimite-ne un mesaj

Formular de contact pop-up Părere

Închide

Trimite-ne un mesaj

Înainte de a ajunge la partea amuzantă, care ne aranjează formularul de contact cu CSS, voi face un pas înapoi puțin. Cel mai atent, probabil a observat că butoanele pentru deschiderea și închiderea formularului sunt implementate ca legături cu un „jammer” href = „javascript: void (0)”. Bine sau rău, nu am găsit un răspuns exact pentru mine, folosesc această metodă din obișnuință. Deși pentru elementele pe care evenimentul onclick este procesat de script, mi se pare că este mai logic și mai corect de utilizat