Trimiterea de e-mailuri modx. Demonstrarea modului în care funcționează formularul de feedback. Creați un nou document numit „E-mail trimis cu succes”

Lecție în care vom analiza crearea unui formular de feedback în CMF Revoluția MODX folosind componentele AjaxForm și FormIt.

Scopul componentelor FormIt și AjaxForm

FormIt este o componentă (fragment) pentru MODX Revolution concepută pentru a procesa formulare pe partea serverului. Poate verifica câmpurile formularului (validare) înainte actiunile urmatoare, protejați site-ul de primirea de spam, trimiteți datele formularelor prin e-mail, stocați copii ale formularelor completate, redirecționați către o altă pagină (de exemplu, după ce ați trimis cu succes un formular prin e-mail), acționați ca un răspuns automat și multe altele.

Dar pentru a lucra cu FormIt prin AJAX, trebuie să utilizați componentă suplimentară AjaxForm.

Cum funcționează formularul de feedback

Înainte de a trece la dezvoltarea unui formular de feedback în MODX Revolution, să luăm în considerare algoritmul de bază al funcționării acestuia.

După deschiderea unei pagini cu un formular (este preluat din porțiunea specificată în parametrul &form al apelului de fragment AjaxForm la generarea paginii pe server), utilizatorul continuă să o completeze. Odată finalizat, utilizatorul face clic pe butonul „Trimite” și pe componenta AjaxForm ( Cod JavaScript) îl trimite la server prin AJAX. Pe server această componentă rulează fragmentul FormIt și îi transmite datele din formular. După procesarea acestor date, fragmentul FormIt generează un răspuns, care este transmis clientului prin componenta AjaxForm și afișat pe pagină utilizatorului. Răspunsul poate fi pozitiv (asta înseamnă că formularul a fost validat și, de exemplu, datele au fost trimise cu succes prin e-mail) sau negativ (de exemplu, utilizatorul a făcut unele greșeli la completarea formularului).

Creați un formular de feedback

Pentru a crea un formular de feedback în MODX Revolution, trebuie să urmați acești pași de bază:

Să ne uităm la pașii 2 și 4 mai detaliat.

Crearea unui formular HTML într-o bucată

Crearea unui formular de feedback HTML se poate face prin copierea șablonului tpl.AjaxForm.example. De exemplu, să denumim fragmentul copiat tpl.AjaxForm . Această bucată conține deja un formular HTML gata făcut, format din 3 câmpuri: Nume, E-mail și Mesaj. Principalele acțiuni care trebuie efectuate cu formularul se vor reduce în principal la adăugarea de noi categorii sau la ștergerea celor existente. Prin categorie înțelegem un grup de elemente interconectate: o etichetă, un element de formular (input, select, textarea) și un element span (utilizat pentru afișarea unei erori de validare).

Momente de bază:

• Textul etichetei (element de etichetă). De obicei luat fie dintr-un dicționar (pentru site-uri multilingve), fie indicat direct folosind text.
• Elementul span trebuie să aibă un atribut de clasă cu valoarea error_name în care expresia de nume trebuie schimbată cu valoarea atributul numelui elementul de formă după care se află.

Atenție: folosirea substituentului [[+fi.name]] ca valoare a atributului value al elementului de formular și a substituentului [[+fi.error.name]] ca conținut al elementului span este relevantă doar pentru lucrările clasice cu FormIt , adică fără AJAX. Acestea sunt folosite pentru a completa formularul la retrimitere pentru a salva valorile introduse de utilizator și pentru a afișa erori de validare.

De exemplu, să adăugăm la formular HTML câmp de intrare număr de telefon:

Telefon:

Ca rezultat, această bucată va conține următorul cod HTML:

Nume* E-mail* Telefon Mesaj* Ștergeți Trimitere

Se generează codul care conține apelul pentru fragmentul AjaxForm

Deschidem șablonul care va folosi resursa și introducem codul care va implementa toate acestea.

[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm, email` &emailSubject=`Mesajul de testare` &emailTo=` [email protected]` &emailFrom=` [email protected]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`Formularul conține erori!` &successMessage=`Mesajul trimis cu succes` ] ]

Să ne uităm la parametrii principali:

• &form – este responsabil pentru fragmentul care conține formularul (tpl.AjaxForm).
• &snippet - fragment care procesează formularul (FormIt).
• &hooks – cârlige pe care fragmentul FormIt le va executa după validarea cu succes a formularului (1 - FormItSaveForm , 2 - e-mail). Cârligele sunt scripturi care sunt lansate după ce formularul a trecut validarea. Acestea sunt specificate separate prin virgule și rulează secvenţial unul după altul. Dacă apare o eroare într-una dintre ele, celelalte nu pornesc. În acest tutorial vom folosi 2 cârlige. Cârligul FormItSaveForm este conceput pentru a salva un formular în baza de date. Cârligul de e-mail este conceput pentru a trimite datele formularului prin e-mail.
• &emailSubject , &emailTo , &emailFrom , &emailTpl – parametri ale căror valori sunt utilizate de hook-ul de e-mail. Acestea sunt menite să indice subiectul scrisorii (&emailSubject), adresa de trimitere (&emailTo), antetul De la (&emailFrom) și șablonul scrisorii (&emailTpl).
• &validate – parametru pe baza valorii căreia este validat formularul. Valoarea parametrului este o listă de elemente separate prin virgule. Fiecare element constă din numele elementului de formular (care trebuie verificat) și regula (cerințele pentru acesta), separate prin două puncte. De exemplu, validatorul name:minLength=^2^ verifică dacă câmpul nume conține cel puțin 2 caractere. Validatorul email:email:required verifică dacă câmpul de e-mail conține o adresă E-mail. Regulile de bază pentru crearea validatorilor pot fi găsite pe pagina „FormIt Validators”.
• &validationErrorMessage - conține un mesaj care va fi afișat dacă formularul conține erori.
• &successMessage - mesajul pe care utilizatorul îl va vedea dacă mesajul este trimis cu succes.

Tot ce rămâne este să creați o bucată tpl.email, care va conține șablonul de scrisoare.

Mesaj

De la: [[+nume]]

E-mail: [[+email]]

Telefon: [[+telefon]]

Mesaj: [[+message]]

MODX - Bucățiune tpl.email

Atenție: Pentru afișarea valorilor câmpurilor de formular se folosesc substituenți.

Demonstrarea modului în care funcționează formularul de feedback

Vom demonstra punctele principale atunci când lucrați cu formularul de feedback de pe pagină folosind următoarele imagini.

MODX - Formularul de feedback nu a fost validat

Bună ziua Astăzi vă voi prezenta crearea unui formular de feedback pentru Modx Revolution, a cărui caracteristică va fi un captcha neobișnuit (deoarece qaptcha Google este prea complex și greoi). Do părere vom folosi suplimentul Formit. Probabil că îl puteți instala singur, dar pentru cei care nu știu cum să o facă, voi scrie în continuare lecția de la început până la sfârșit. ÎNCEPE!

Voi sări peste toate momentele legate de instalarea MODX Revolution, configurarea sistemului, încorporarea designului site-ului și așa mai departe. Să începem prin a instala pachetul Formit.

1. Accesați System - Package Management

2. Faceți clic pe „Descărcați suplimente”

3. Selectați din lista Formit

Faceți clic pe „descărcați”. După descărcarea Formit, veți vedea pachetele descărcate, faceți clic pe butonul de instalare. Formit este instalat!

4. Apoi, creați o nouă bucată

Să-l numim „form” și să lipim următorul cod:

[[!Qaptcha]] [[!FormIt?&hooks=`spam,email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Solicitare un apel invers` &emailTo=`adresa ta de e-mail` &redirectTo=`id-ul paginii "E-mail trimis cu succes „` &validate=`contact_name:required,contact_phone_NA_format:required` &customValidators=`qaptcha.Slider`]] Nume\Company* Telefon* E-mail [[+qaptcha.Slider]]

Iată apelul la fragmentul Formit, formularul și captcha, pe care le vom face să funcționeze în paragrafele următoare. Nu uitați de parametru emailTo indica Cutie poștală, la care ar trebui să ajungă scrisoarea, iar în redirectTo trebuie să puneți id-ul paginii „E-mail trimis cu succes”

5. Creați o bucată sentEmailTpl

El vă va spune ce informații să trimiteți prin e-mail și va introduce codul acolo:

Nume: [[+nume_contact]]
E-mail: [[+contact_email]]
Telefon: [[+contact_phone_NA_format]]
Notă: [[+contact_message]]

6. Creați document nou intitulat „E-mail trimis cu succes”

Puteți introduce text precum: Am primit scrisoarea dvs.! Vă mulțumim că ați ales compania noastră. Managerul nostru în cât mai repede posibil te va contacta prin numar de telefon de contact, pe care l-ai lăsat în aplicație!

7. Acum să ne ocupăm de Captcha în sine

Conectam biblioteca jquery la pagina:

8. Creați directoare active/componente/qaptcha/Și core/componente/qaptcha/

Pentru a cataloga active/componente/qaptcha/ plasați folderul imagini și jquery cu conținutul și în core/componente/qaptcha/ - folderul php cu fișierul Qaptcha.jquery

9. Creați un fragment Qaptcha

și pune următorul cod acolo: