Sådan oprettes en Bootstrap-e-mail-formular med ReCaptcha og PHP på 30 minutter

I denne vejledning vil jeg vise dig, hvordan du nemt og hurtigt kan tilføje en captcha til din Bootstrap-formular for at forhindre spam . Vi bruger Googles ReCaptcha, den mest populære Captcha-løsning i dag.

Som base bruger jeg en HTML-kontaktformular med PHP-backend fra en af ​​mine tidligere tutorials. Y ou kan bruge den med en hvilken som helst anden Bootstrap form, du har.

Vores formular bruger HTML5- syntaks drysset med noget Bootstrap stillads og en JavaScript-validator .

Vi sender det via AJAX (siden genindlæses ikke) og behandler derefter formularværdierne med PHP.

Og endelig sender vi en e-mail med PHP og returnerer et svar til den originale side, der vises i en statusmeddelelse over formularen.

Som jeg nævnte før, vil jeg mest fokusere på at arbejde med ReCaptcha i dag og ikke på Bootstrap-formen selv for meget. Så hvis du har gået glip af det, skal du i det mindste kigge hurtigt på min Bootstrap-formularvejledning.

Demo & Links

  • Se demoen
  • eller download filerne til vejledningen

Ok, lad os gøre det!

1. Registrer dit websted

For at kunne bruge ReCaptcha skal du først registrere dit websted på ReCaptchas websted.

Efter en vellykket registrering får du et par nøgler til brug med din ReCaptcha. Lad siden være åben, eller kopier nøglerne til en tekstfil, vi har brug for dem snart.

2. HTML

Vi bruger kontaktformularens skabelon fra den foregående tutorial + vi tilføjer et reCAPTCHA-element og et skjult input ved siden af ​​det for at hjælpe os med JavaScript-validering.

Lad os forklare HTML-koden lidt:

  • Vi har en HTML-kontaktformular klar skrevet med Bootstrap-markeringen
  • de vigtigste tredjeparts-scripts og typografiark, der vil blive brugt, er: jQuery, Bootstrap 4, CSS og JavaScript

For at tilføje en ReCaptcha til din formular behøver du bare:

  • at medtage et sted, du har brug for det i din formular (udskift webstedsnøglen med din egen nøgle fra første trin)
  • Inkluder ReCaptcha JS for at initialisere ReCaptcha på siden - <; / script>
  • Jeg bruger også data-callbackog data-expired-callbackattributter på g-recaptchadiv - disse er valgfri, og jeg vil bruge dem til at få ReCaptcha til at samarbejde med validatoren

Her er formularens fulde kode

3. PHP

I PHP bruger vi Googles klientbibliotek, der tager sig af verifikationen.

Du kan bruge Composer til at installere det i dit projekt, downloade det fra GitHub eller blot bruge den version, jeg inkluderede i downloadpakken.

Hovedparten af ​​koden er også fra min tidligere tutorial, så jeg vil forsøge at sammenfatte den bare kort.

Lad os navngive filen contact.phpog se, hvad vi vil gøre i den:

  • i starten er vi nødt til at kræve ReCaptcha PHP-biblioteket - require('recaptcha-master/src/autoload.php');
  • og gør nogle konfigurations ting, for eksempel at indtaste din hemmelige nøgle - $recaptchaSecret = 'YOUR_SECRET_KEY';
  • Vi indstiller også de ekstra variabler som e-mails, som e-mailen skal sendes til, emne og succes / fejlmeddelelser
  • derefter skal du initialisere klassen med din hemmelige nøgle - $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret);
  • send et opkald for at validere ReCaptcha - $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  • smid en undtagelse, hvis valideringen mislykkes - if (!$response->isSuccess()) {...}
  • scriptet komponerer derefter e-mail-beskeden, sender den og returnerer et JSON-svar. (Formularen indsendes som standard af AJAX.)

4. JavaScript

Vores JavaScript-fil contact.jstager sig af:

  • validering af input med Bootstrap validator
  • håndtering af JS-tilbagekald fra ReCaptcha (vi udfylder det skjulte input[data-recaptcha]baseret på ReCaptchas svar. Hvis det lykkes, udfylder vi dette input = validatoren betragter formularen som gyldig.)
  • AJAX sender formularen
  • og til sidst at vise succes- eller fejlmeddelelsen og også tømme formularen.

Her er koden:

5. Resultat

Dette er det!

Du skal have en fungerende kontakt Bootstrap kontaktformular med ReCaptcha og PHP baggrund nu.

Tak for 50 klapp? hvis du nød denne artikel! Og så tjek mine andre Bootstrap-tutorials eller mine Bootstrap-skabeloner.

Oprindeligt offentliggjort på Bootstrapious blog.

Om forfatteren

Ondrej Svestka er en Bootstrap og front-end entusiast og grundlægger af Boostrapious.