Hogyan lehet 30 perc alatt elkészíteni a Bootstrap e-mail űrlapot a ReCaptcha és a PHP segítségével

Programozás

Ebben az oktatóanyagban megmutatom, hogyan lehet egyszerűen és gyorsan hozzáadni a captchát a Bootstrap űrlaphoz a spam megakadályozása érdekében . A Google ReCaptchát fogjuk használni , amely a mai legnépszerűbb Captcha megoldás.

Alapként HTML kapcsolatfelvételi űrlapot fogok használni a PHP háttérrel az egyik korábbi oktatóanyagomból. Y ou tudja használni más Bootstrap formában van.

Az űrlapunk HTML5 szintaxist fog használni, amely néhány Bootstrap állvánnyal és egy JavaScript validátorral van megszórva .

Az AJAX-on keresztül küldjük el (az oldal nem töltődik be újra), majd az űrlap értékeit PHP-vel dolgozzuk fel.

Végül küldünk egy e-mailt a PHP-vel, és válaszolunk az eredeti oldalra, amely egy állapotüzenetben jelenik meg az űrlap felett.

Mint korábban említettem, ma leginkább a ReCaptchával való együttműködésre fogok összpontosítani, nem pedig magára a Bootstrap formára. Tehát, ha elmulasztotta, legalább nézze át a Bootstrap űrlap bemutatómat.

Bemutató és linkek

  • Lásd a bemutatót
  • vagy töltse le a fájlokat az oktatóanyaghoz

Oké csináljuk!

1. Regisztrálja webhelyét

A ReCaptcha használatához először regisztrálnia kell webhelyét a ReCaptcha webhelyén.

A sikeres regisztráció után kap egy pár kulcsot , amelyet a ReCaptchával használhat. Hagyja nyitva az oldalt, vagy másolja a kulcsokat egy szöveges fájlba, hamarosan szükségünk lesz rájuk.

2. HTML

Használjuk a kapcsolatfelvételi űrlap sablonját az előző bemutatóból + hozzáadunk egy reCAPTCHA elemet és egy rejtett bemenetet mellé, hogy segítsen nekünk a JavaScript ellenőrzésében.

Magyarázzuk el kicsit a HTML kódot:

  • készen állunk egy HTML kapcsolattartási űrlappal, amelyet a Bootstrap jelöléssel írunk
  • a fő harmadik fél által használt szkriptek és stíluslapok a következők: jQuery, Bootstrap 4, CSS és JavaScript

ReCaptcha hozzáadásához az űrlaphoz csak a következőkre van szüksége:

  • hogy az űrlapodon feltöltsd egy szükséges helyre (az első lépéstől kezdve cseréld le a webhelykulcsot a saját kulcsodra)
  • Tartalmazza a ReCaptcha JS-t a ReCaptcha inicializálásához a - <; / script> oldalon
  • A div-t data-callbackés data-expired-callbackattribútumokat is használom g-recaptcha- ezek nem kötelezőek, és felhasználom őket arra, hogy a ReCaptcha együttműködjön a validátorral

Itt van az űrlap teljes kódja

3. PHP

A PHP-ben a Google ügyfélkönyvtárát fogjuk használni, amely gondoskodik az ellenőrzésről.

A Composer segítségével telepítheti a projektjébe, letöltheti a GitHub-ból, vagy egyszerűen használhatja azt a verziót, amelyet a Letöltési csomag tartalmaz.

A kód nagy része szintén az előző oktatóanyagomból származik, ezért megpróbálom röviden összefoglalni.

Nevezzük meg a fájlt, contact.phpés nézzük meg, mit fogunk tenni benne:

  • kezdetben szükségünk van a ReCaptcha PHP könyvtárra - require('recaptcha-master/src/autoload.php');
  • és végezzen el néhány konfigurációs dolgot, például írja be a titkos kulcsát - $recaptchaSecret = 'YOUR_SECRET_KEY';
  • Ezenkívül beállítottuk a további változókat, mint e-maileket, amelyekre az e-mailt, a tárgyat és a siker / hiba üzeneteket küldjük
  • akkor a titkos kulccsal inicializálnia kell az osztályt - $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret);
  • küldjön hívást a ReCaptcha érvényesítéséhez - $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  • dobj kivételt, ha az érvényesítés nem sikerül - if (!$response->isSuccess()) {...}
  • a szkript ezután összeállítja az e-mailt, elküldi és visszaküldi a JSON választ. (Az űrlapot alapértelmezés szerint az AJAX nyújtja be.)

4. JavaScript

JavaScript fájlunk contact.jsgondoskodik a következőkről:

  • a bemenetek ellenőrzése a Bootstrap érvényesítővel
  • a ReCaptcha JS visszahívásainak kezelése ( a ReCaptcha válasza alapján kitöltjük a rejtettet input[data-recaptcha]. Ha sikerül, kitöltjük ezt a bemenetet = az ellenőrző az űrlapot érvényesnek fogja tekinteni.)
  • AJAX az űrlap elküldése
  • és végül a siker vagy hibaüzenet megjelenítése és az űrlap kiürítése.

Itt van a kód:

5. Eredmény

Ez az!

Mostantól rendelkeznie kell egy működő kapcsolatfelvételi űrlappal ReCaptcha és PHP háttérrel.

Köszönöm az 50 tapsot? ha tetszett ez a cikk! A lso, nézd meg a többi Bootstrap útmutatók és én Bootstrap sablonokat.

Eredetileg a Bootstrapious blogon jelent meg.

A szerzőről

Ondrej Svestka Bootstrap és front-end rajongó, valamint a Boostrapious alapítója.