Formular de feedback Modx. Formular de feedback pe MODX Revo folosind Formit cu un captcha neobișnuit

Numele dumneavoastră

E-mail:

Subiectul mesajului

Cerere de informatie
Suport tehnic
Oferi

Mesaj text

Introdu acest cod:

Unde [+mesaj de validare+]- este responsabil pentru afișarea mesajelor de eroare la trimiterea formularului.
acțiune="[~[*id*]~]- indică faptul că gestionarea formularului va fi pagina pe care este apelat fragmentul. În loc de [~[*id*]~] MODx va înlocui adresa URL a documentului curent.
specifică ID-ul formularului pe care îl vom specifica atunci când apelăm fragmentul.
eticheta cheie de acces- setează accesul la elementele de formular folosind taste rapide.
eform="E-mail:email:1"- descrie câmpul pentru introducerea unei adrese poștale, indică tipul de date care trebuie introduse și face acest câmp obligatoriu. În general, șablonul pentru completarea acestui parametru este următorul: eform="[descriere câmp]:[tip de date de intrare]:[dacă este necesar câmpul]:[mesaj de eroare de intrare]:[regulă de validare a intrării]" . Dar avem nevoie doar de trei valori. Similar acestui parametru, eform="Name::1" este completat.
[+verimageurl+] este responsabil pentru afișarea captcha.

Creați o bucată care să notifice vizitatorul că a fost trimis un mesaj

Crearea unei bucăți multumesc-tpl

Vă mulțumim că ați folosit formularul de feedback de pe site-ul nostru.

Mesajul tău va fi revizuit cât mai curând posibil, iar dacă necesită un răspuns, cu siguranță îl vei primi.

Informații trimise:

• Numele dumneavoastră:[+autor+]


• Email-ul tau:[+email+]


• Mesaj text:[+text+]

Creați o bucată cu formularul de mesaj trimis

Crearea unei bucăți raport-tplși plasați următorul cod în conținutul său:

Acest mesaj a fost trimis de un vizitator numit [+autor+] folosind formularul de feedback.

În această bucată, ca și în cea precedentă, toate informațiile introduse de utilizator sunt transmise folosind substituenți de forma [+autor+]. În acest caz, numele fiecărui substituent coincide cu valoarea atributului „nume” al câmpului corespunzător din partea cu formularul de feedback (name="author", name="email" name="text").

Creați o bucată cu un apel către formularul de feedback

Creați o bucată cu un nume formăși pune structura acolo:

[!eForm? &formid=`Trimite` &tpl=`form-tpl` &la=` [email protected],[email protected],[email protected]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`mulțumesc-tpl` &vericode=`1` &subject=`Mesaj de pe site-ul meu`!]

Unde &formid=`Trimite`- identificatorul de formular, pe care l-am specificat în fragmentul form-tpl
&tpl=`form-tpl`- șablon pentru formularul de feedback
&to=` [email protected],[email protected],[email protected]` - Adresa de email pentru trimiterea informatiilor
&mailselector=`otdel`- setează câmpul de formular care va fi folosit la selectarea unei singure adrese dintr-o listă de adrese separate prin virgulă (,) în parametru &la. În cazul nostru, aceasta este o listă derulantă în fragmentul form-tpl, unde otdel ia valori 1,2 sau 3, în funcție de subiectul selectat de vizitator.
&report=`raport-tpl`- șablon de informații trimise
&mulțumesc=`mulțumesc-tpl`- mesaj afisat dupa trimiterea datelor
&vericode=`1`- include cod de verificare. Șablonul trebuie să conțină un câmp pentru verificare și un substituent [+vericode+].
&subject=`Mesaj de pe site-ul meu`- subiectul mesajului trimis

Apelați la formularul de feedback din șablon

Crearea unei bucăți de contact, în care plasăm următorul cod:

Adresa noastră

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



E-mail: [email protected]

Birou suplimentar

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



E-mail: [email protected]

((formă))

Pe pagina Contacte plasăm un apel către partea de contact:

((a lua legatura))

Schimbarea stilurilor

Găsim o descriere a butoanelor noastre în fișierul de stil:

margine-stânga: 108px;
umplutură: 5px 10px;
fundal: #cecece;
chenar: 1px solid #888888;
}

Datorită faptului că am inserat inscripții rusești la butoanele Trimitere și Resetare, acestea s-au mutat. De asemenea, nu îmi place că atunci când treceți cursorul peste un buton, aspectul cursorului nu se schimbă, vreau să repar acest lucru. În primul rând, să facem butonul să-și schimbe culoarea când treci cu mouse-ul peste el. Ei bine, să mutăm captcha la dreapta. Deci, în loc să descriem stilul pe care l-am dat mai sus, vom insera următorul:

#contact_form form .submit_btn (
margine-stânga: 55px; /*Schimbați liniuța din stânga a butoanelor*/
umplutură: 5px 10px;
fundal: #cecece;
chenar: 1px solid #888888;
}
#contact_form form .submit_btn:hover (
margine-stânga: 55px;
umplutură: 5px 10px;
fundal: #505050; /*Specificați culoarea butonului când treceți cursorul*/
chenar: 1px solid #888888;
culoare: #fff; /*Schimbați culoarea textului*/
cursor: pointer; /*Schimbați tipul cursorului*/
}
#contact_form form img (
umplutură: 0 0 0 90px; /*Mutați imaginea cu codul la dreapta*/
}

Dacă totul a fost făcut corect, formularul va arăta astfel:

Acum încercăm să completăm formularul și să trimitem scrisoarea. Deoarece folosim un server local, toate scrisorile primite pot fi vizualizate în folder C:\xampp\tmp\sendmail\ . Vă amintiți că am creat acest folder la instalarea XAMPP?

Puteți seta propria listă de cuvinte pentru a genera în captcha; acest lucru se face pe pagina de configurare a sistemului Instrumente >> Configurare >> Utilizatori >> Cuvinte pentru generarea codurilor CAPTCHA :

Aceasta completează integrarea designului site-ului nostru web în MODx. Tot ce rămâne este să punem site-ul nostru pe o găzduire. Vom face asta în lecția următoare.

Materialele de pe site au fost folosite pentru a crea această lecție

FormIt 3.0 introduce o actualizare a metodelor de criptare utilizate pentru criptarea trimiterilor de formulare. Înainte de 3.0 a fost folosit mcrypt, care în 3.0 este înlocuit cu openssl, deoarece mcrypt a fost depreciat începând cu PHP 7.2. FormIt 3.0 vine cu o pagină de migrare care este accesibilă de la manager.

Începând cu FormIt 2.2.9, toate câmpurile vor avea automat aplicate html_entities. Pentru a permite salvarea/stocarea etichetelor HTML, va trebui să utilizați validatorul allowSpecialChars pe fiecare câmp, care ar trebui să salveze etichete HTML brute.

Începând cu FormIt 1.1.4, toate câmpurile vor avea automat aplicate stripTags. Pentru a permite salvarea/stocarea etichetelor HTML, va trebui să utilizați validatorul allowTags pe fiecare câmp, care stipulează ce etichete sunt permise.

Cum se utilizează

Pur și simplu plasați apelul pentru fragmentul FormIt în Resursa care conține formularul pe care doriți să îl utilizați. Spre deosebire de predecesorii similari (mai ales eForm în MODX Evolution), nu puneți formularul într-un Chunk și nu faceți referire la Chunk în apelul de fragment FormIt: puneți literalmente apelul de fragment de-a lungul laturii formularului pe care doriți să îl proceseze. Specificați „cârligele” (sau scripturile de procesare post-validare) în apelul fragmentului. Apoi adăugați validarea prin intermediul &validași &CustomValidators parametrii din eticheta snippet.

Dacă aveți mai multe formulare pe o pagină, setați &submitVar proprietatea din apelul Snippet la un nume al unui element de formular din formular (adică, &submitVar=`form1-submit`). Acest lucru îi spune FormIt să proceseze numai cererile de formular cu acea variabilă POST. Ar trebui folosite mai multe formulare cu INPUT type="submit" name="form1-submit", elementele butoanelor au fost raportate că nu funcționează.

Proprietăți disponibile

Acestea sunt proprietățile generale disponibile pentru apelul FormIt (fără a include proprietățile specifice cârligului):

Nume	Descriere	Valoare implicită
precârlige	Ce scripturi să declanșeze, dacă există, odată ce formularul se încarcă. Aceasta poate fi o listă de cârlige separate prin virgulă, iar dacă prima eșuează, cele care urmează nu se vor declanșa. Un cârlig poate fi, de asemenea, un nume de fragment care va executa acel fragment.
renderHooks	Ce scripturi să declanșeze, dacă există, odată ce formularul se încarcă, preHook-urile sunt terminate și toate câmpurile și erorile au fost setate. Aceasta poate fi o listă separată prin virgulă de utilizat pentru manipularea tuturor câmpurilor din formular înainte ca totul să fie setat pe baza datelor date din alte pachete sau preHooks. Un cârlig poate fi, de asemenea, un nume de fragment care va executa acel fragment.
cârlige	Ce scripturi să declanșeze, dacă există, după ce formularul trece validarea. Aceasta poate fi o listă separată prin virgulă, iar dacă prima eșuează, cele care urmează nu se vor declanșa. Un cârlig poate fi, de asemenea, un nume de fragment care va executa acel fragment.
submitVar	Dacă este setată, nu va începe procesarea formularului dacă această variabilă POST nu este trecută. Observație: Este necesar dacă utilizați proprietatea &store (+ setați submit var în input="submit"!).
valida	O listă de câmpuri separate prin virgulă de validat, cu numele fiecărui câmp ca nume:validator (de exemplu: nume de utilizator:obligatoriu, e-mail:obligatoriu). Validatorii pot fi, de asemenea, înlănțuiți, cum ar fi email:email:required . Această proprietate poate fi specificată pe mai multe linii.
validationErrorMessage	Un mesaj de eroare general de setat la un substituent [[!+fi.validation_error_message]] dacă validarea eșuează. Poate conține [[+erori]] dacă doriți să afișați o listă cu toate erorile în partea de sus.	A apărut o eroare de validare a formularului. Vă rugăm să verificați valorile pe care le-ați introdus.
validationErrorBulkTpl	HTML tpl care este utilizat pentru fiecare eroare individuală din valoarea mesajului de eroare de validare generică.	[[+eroare]]
errTpl	Wrapper-ul html pentru mesajele de eroare. Notă: nu o bucată, doar HTML direct.	[[+eroare]]
customValidators	O listă separată prin virgulă de nume de validator personalizat (fragmente) pe care intenționați să le utilizați în acest formular. Acestea trebuie specificate în mod explicit aici, altfel nu vor fi executate.
clearFieldsOnSuccess	Dacă este adevărat, va șterge câmpurile dintr-un formular trimis cu succes, care nu redirecționează.	1
magazin	Dacă este adevărat, va stoca datele în cache pentru extragere folosind fragmentul FormItRetriever.	0
storeTime	Dacă „stocare” este setat la adevărat, aceasta specifică numărul de secunde pentru stocarea datelor de la trimiterea formularului. Implicit la cinci minute.	300
locatia magazinului	Când utilizați magazin, aceasta definește locul în care este stocat formularul după trimitere. Opțiunile posibile sunt „cache” și „session”. Setarea implicită este „cache”.	cache
substituentPrefix	Prefixul de utilizat pentru toți substituenții setați de FormIt pentru câmpuri. Asigurați-vă că includeți „.” separator în prefixul dvs.	fi.
succesMessage	Dacă nu utilizați cârligul de redirecționare, afișați acest mesaj de succes după o trimitere cu succes.
successMessagePlaceholder	Numele substituentului la care să setați mesajul de succes.	fi.successMessage
redirectTo	ID de pagină al unei pagini „Mulțumesc”, unde vizitatorul poate fi trimis după trimiterea cu succes a formularului, dar acest parametru este citit NUMAI dacă includeți „redirecționare” în lista de &hooks.
allowFiles	Specificați dacă fișierele pot fi postate. Fișierele trimise sunt stocate într-un director temporar pentru a preveni pierderea fișierelor în forme cu mai mulți pași.	Adevărat
atașați fișiere la e-mail	Atașează fișierele încărcate în e-mail, formularul trebuie setat ca enctype="multipart/form-data"	Adevărat

Validare

Validarea în FormSe face prin proprietatea &validate și poate fi folosită pentru a gestiona automat validarea pe oricare dintre câmpurile din formular.

Pentru mai multe informații despre validarea în FormIt, consultați

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

Scopul componentelor FormIt și AjaxForm

FormIt este o componentă (fragment) pentru Revoluția MODX, conceput pentru a procesa formularul pe partea serverului. Poate verifica câmpurile formularelor (valida) înainte de acțiuni ulterioare, poate proteja site-ul împotriva primirii de spam, poate trimite datele formularului prin e-mail, poate stoca copii ale formularelor completate, poate redirecționa către o altă pagină (de exemplu, după trimiterea cu succes a unui formular prin e-mail), poate efectua funcția unui răspuns automat și multe altele.

Dar pentru a lucra cu FormIt prin AJAX, trebuie să utilizați componenta 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 componenta AjaxForm (cod JavaScript) îl trimite la server prin AJAX. Pe server, această componentă rulează fragmentul FormIt și îi transmite date de 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 o valoare error_name , în care expresia de nume trebuie schimbată cu valoarea atributului name al elementului de formular pe care îl urmează.

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ă numai 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 a afișa erori de validare.

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

Telefon: