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.

Cum sa construiti un formular de e mail Bootstrap cu ReCaptcha

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.

Cum sa construiti un formular de e mail Bootstrap cu ReCaptcha
Acesta va fi rezultatul. Vezi și live în demo.

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.

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.

1612018506 442 Cum sa construiti un formular de e mail Bootstrap cu ReCaptcha

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.

1612018507 886 Cum sa construiti un formular de e mail Bootstrap cu ReCaptcha

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">