de Ondrej Svestka

Cum să construiți un formular de e-mail Bootstrap cu ReCaptcha și PHP în 30 de minute

În acest tutorial, vă voi arăta cum să ușor și rapid adăugați un captcha la formularul Bootstrap pentru a preveni spamul. Vom folosi Google ReCaptcha, cea mai populară soluție Captcha de astăzi.

Ca bază, voi folosi un formular de contact HTML cu backend-ul PHP dintr-unul din tutorialele mele anterioare. Daîl puteți folosi cu orice alt formular Bootstrap pe care îl aveți.

Formularul nostru va fi folosit HTML5 sintaxă presărată cu unele Schelă bootstrap și a Validator JavaScript.

Îl vom trimite prin AJAX (pagina nu se va reîncărca), apoi procesați valorile formularului cu PHP.

Și, în cele din urmă, vom trimite un e-mail cu PHP și vom returna un răspuns la pagina originală care va fi afișată într-un mesaj de stare deasupra formularului.

Așa cum am menționat anterior, mă voi concentra mai ales pe lucrul cu ReCaptcha astăzi și nu pe Bootstrap se formează prea mult. Deci, în cazul în care ați ratat-o, cel puțin o privire rapidă asupra tutorialului meu pentru formularul Bootstrap.

Demo și linkuri

• Vedeți demo-ul
• sau descărcați fișierele pentru tutorial

Ok, hai să o facem!

1. Înregistrează-ți site-ul

Pentru a putea utiliza ReCaptcha, va trebui înregistrați-vă site-ul web pe Site-ul ReCaptcha primul.

După înregistrarea cu succes, veți obține o pereche de chei de utilizat cu ReCaptcha. Lăsați pagina deschisă sau copiați cheile într-un fișier text, vom avea nevoie de ele în curând.

2. HTML

Vom folosi șablonul formularului de contact din tutorialul anterior + vom adăuga un element reCAPTCHA și o intrare ascunsă lângă el pentru a ne ajuta cu validarea JavaScript.

Să explicăm puțin codul HTML:

• avem un formular de contact HTML gata scris cu marcajul Bootstrap
• principalele scripturi și foi de stil terță parte care vor fi utilizate sunt: ​​jQuery, Bootstrap 4, CSS și JavaScript

Pentru a adăuga un ReCaptcha la formularul dvs., aveți nevoie doar de:

• a include <div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S">

într-un loc de care aveți nevoie in formularul dvs. (înlocuiți cheia de site cu propria cheie din primul pas)

Iată codul complet al formularului

3. PHP

În PHP, vom folosi Biblioteca client Google care se va ocupa de verificare.

Puteți utiliza Composer pentru a-l instala în proiectul dvs., îl puteți descărca de pe GitHub sau pur și simplu utilizați versiunea pe care am inclus-o în Descărcați pachetul.

Cea mai mare parte a codului este, de asemenea, din tutorialul meu anterior, așa că voi încerca să-l recapitulez pe scurt.

Să numim fișierul contact.php și să vedem ce vom face în el:

• la început, trebuie să avem nevoie de biblioteca PHP ReCaptcha – require('recaptcha-master/src/autoload.php');
• și faceți unele lucruri de configurare, de exemplu, introducerea cheii secrete – $recaptchaSecret="YOUR_SECRET_KEY";
• De asemenea, setăm variabilele suplimentare ca e-mailuri la care să trimiteți e-mailul, subiectul și mesajele de succes / eroare
• atunci va trebui să inițializezi clasa cu cheia ta secretă – $recaptcha = new ReCaptchaReCaptcha($recaptchaSecret);
• trimite un apel pentru validarea ReCaptcha – $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
• aruncă o excepție dacă validarea eșuează – if (!$response->isSuccess()) {...}
• scriptul compune apoi mesajul de e-mail, îl trimite și returnează un răspuns JSON. (Formularul este trimis de AJAX în mod implicit.)

4. JavaScript

Fișierul nostru JavaScript contact.js se va ocupa de:

• validarea intrărilor cu Validator bootstrap
• manipularea Răspunsuri JS de la ReCaptcha (vom completa ceea ce este ascuns input[data-recaptcha] pe baza răspunsului ReCaptcha. Dacă reușește, completăm această intrare = validatorul va considera că formularul este valid.)
• AJAX trimite formularul
• și în cele din urmă, afișarea mesajului de succes sau de eroare și de asemenea golirea formei.

Iată codul:

5. Rezultatul

Asta este!

Ar trebui să aveți un formular de contact Bootstrap de contact funcțional cu fundal ReCaptcha și PHP acum.

Mulțumesc pentru 50 de palme? dacă ți-a plăcut acest articol! ADe asemenea, verificați celălalt B al meututoriale ootstrap sau B-ul meușabloane ootstrap.

Publicat inițial la Blog bootstrapios.

Despre autor

Ondrej Svestka este un fan și fondator al Bootstrap și front-end Boostrapious.