Parametrii formatului Modx revo. Formular de feedback pe MODX Revo folosind Formit cu un captcha neobișnuit. Ce este FormIt

21.06.2020 Sfat

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 predecesori similari (în special 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

Mai avem o singură pagină pe care nu am refăcut-o încă. Aceasta este pagina Contacte. Aici avem pe lângă informații de contact formularul va fi localizat părere. În MODx există un fragment special pentru crearea unui astfel de formular - eForm. Să vedem mai întâi în ce poate consta un formular de feedback.

1. În primul rând, acesta este formularul în sine cu câmpuri de intrare Nume, adresa postala, Subiecte de mesajeși el însuși Mesaje. Pentru a vă proteja împotriva spam-ului, ar trebui să adăugați un captcha - un formular pentru introducerea codului din imaginea generată. De asemenea, este necesar să se permită verificarea corectitudinii informațiilor introduse.

2. Notificarea vizitatorului despre trimiterea unui mesaj.

3. Forma mesajului trimis care va fi trimis prin e-mail.

Creați o bucată cu un șablon de formular de feedback

Înainte de a crea o bucată cu un șablon pentru un formular de feedback, să studiem codul care descrie acest formular în șablonul nostru. Deschideți fișierul în Notepad++ contact.html care se află în folderul C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. Acestea vor fi liniile cu 135 De 159 inclusiv. După cum puteți vedea, acesta este un container cu id="form_contact", care este locul unde se află formularul nostru. Folosind acest cod ca bază, creăm o nouă bucată form-tplși adăugați substituenții de care avem nevoie:

Părere


[+mesaj de validare+]



E-mail:email:1" />




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 de intrare adresa postala, indică tipul de date introduse și face ca acest câmp să fie 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.






Nume:[+autor+]
E-mail::[+email+]
Mesaj:[+text+]

Î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ă

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

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 bazat pe valoarea 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ă de 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 - Chunk 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



Aproape toate site-urile comerciale au o pagină de contact, care conține un formular de contact prin care utilizatorii pot scrie către administrația site-ului. Astăzi vom vedea cum să creați rapid Formular de contact. Vom implementa formularul de feedback folosind pachetul Formitîmpreună cu pachetul AjaxForm, instalați-le dacă nu le aveți instalate.

Crearea unui formular de feedback pe MODX Revo cu permisiunea de prelucrare a datelor cu caracter personal în conformitate cu Legea nr. 152-FZ „Cu privire la datele cu caracter personal” din 27 iulie 2006.

În primul rând, creăm o bucată în care va fi stocată forma în sine, să fie fragmentul „kontact-form” și plasăm codul în ea forma standard, fac în principal site-uri web folosind bootstrap, așa că voi lua șablonul standard ușor modificat, codul său static va fi așa:

Acordul Utilizatorului

Ta aspect va fi diferit, deoarece forma mea este stilizată în funcție de proiect, stiluri css Nu văd rostul să-l postez.

Aici puteți vedea alte forme getbootstrap.com/css/#forms

Acum să convertim codul în dinamic, ținând cont de sintaxă FormitȘi AjaxForm, obținem următoarele.

[[+fi.error.name]]
[[+fi.error.email]]
[[+fi.error.pfone]]
[[+fi.error.message]]

Bifând această casetă, îmi dau consimțământul pentru prelucrarea datelor mele personale în conformitate cu Legea nr. 152-FZ „Cu privire la datele cu caracter personal” din 27 iulie 2006 și accept termenii Acordului de utilizare

[[+fi.success:is=`1`:then=`
[[+fi.successMessage]]
`]] [[+fi.validation_error:is=`1`:then=`
[[+fi.validation_error_message]]
`]]

Acum să creăm o altă bucată care va genera o scrisoare, să o numim tpl-kontact-form cu următorul conținut:

Nume: [[+nume]]

E-mail: [[+email]]

Telefon: [[+pfone]]

Mesaj: [[+message]]

Ei bine, a devenit posibil să tragem o concluzie la locul potrivit:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Mesaj de pe site-ul [[++site_url]]` &emailTo=` [email protected]` &validate=`name:required,email:required` &validationErrorMessage=`Formularul conține erori!` &successMessage=`Mesajul trimis cu succes!` ]]

Nu uitați să schimbați valoarea emailTo la adresa ta de e-mail.

Documentatia componentelor:

  1. FormItdocs.modx.com/extras/revo/formit
  2. AjaxFormdocs.modx.pro/components/ajaxform

Practic asta este!