Adding a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) to your HTML forms can help prevent automated bots from submitting malicious or spammy data. Below, I'll provide a step-by-step guide on how to add a simple CAPTCHA to an HTML form using Google reCAPTCHA, one of the most popular CAPTCHA services available:
Step 1: Sign up for reCAPTCHA
Step 2: Register your site
Step 3: Get your reCAPTCHA keys
Step 4: Integrate reCAPTCHA into your HTML form
```html
```
```html
```
Make sure to replace "YOUR_RECAPTCHA_SITE_KEY" with the site key you obtained in Step 3.
Step 5: Validate the CAPTCHA on the server-side
For example, in PHP:
```php
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
$response = $_POST['g-recaptcha-response'];
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => 'https://www.google.com/recaptcha/api/siteverify',
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => [
'secret' => $recaptcha_secret,
'response' => $response,
],
CURLOPT_RETURNTRANSFER => true,
]);
$api_response = json_decode(curl_exec($curl), true);
curl_close($curl);
if ($api_response['success']) {
// CAPTCHA validation successful, process the form data
} else {
// CAPTCHA validation failed, handle the error (e.g., display an error message)
}
?>
```
Remember to replace "YOUR_RECAPTCHA_SECRET_KEY" with your secret key obtained in Step 3.
That's it! By following these steps, you'll have successfully added a CAPTCHA to your HTML form, helping to protect it from automated spam submissions.
Step 1: Sign up for reCAPTCHA
- Go to the Google reCAPTCHA website (https://www.google.com/recaptcha) and sign in using your Google account.
- Click on the "Admin Console" button at the top right corner to create a new site.
Step 2: Register your site
- Enter a label or name for your website in the "Label" field. This can be anything to help you identify your site in the future.
- Select the type of reCAPTCHA you want to use. "reCAPTCHA v2" is a user-friendly checkbox style, while "reCAPTCHA v3" is invisible and relies on behavioral analysis to determine if the user is human or not. For this guide, we'll use reCAPTCHA v2.
- Add the domain(s) where you'll be using the CAPTCHA. For local development, you can use "localhost" or your IP address with port (e.g., 127.0.0.1:3000).
- Accept the terms of service.
- Click the "Submit" button to get your reCAPTCHA keys.
Step 3: Get your reCAPTCHA keys
- After submitting, you'll be redirected to a page displaying your site key and secret key. Keep these keys safe as they'll be required in the next step.
Step 4: Integrate reCAPTCHA into your HTML form
- Open the HTML file where you want to add the CAPTCHA.
- Locate the `
- Add the following script tag just before the closing `` tag to load the reCAPTCHA API:
```html
```
- Within your form, add the following code to include the CAPTCHA widget:
```html
```
Make sure to replace "YOUR_RECAPTCHA_SITE_KEY" with the site key you obtained in Step 3.
Step 5: Validate the CAPTCHA on the server-side
- When the user submits the form, the CAPTCHA response will be sent along with the other form data to your server-side script (e.g., PHP, Node.js, etc.).
- On the server-side, you need to validate the CAPTCHA response using the secret key you obtained in Step 3. You can do this by making a request to the reCAPTCHA API.
For example, in PHP:
```php
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
$response = $_POST['g-recaptcha-response'];
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => 'https://www.google.com/recaptcha/api/siteverify',
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => [
'secret' => $recaptcha_secret,
'response' => $response,
],
CURLOPT_RETURNTRANSFER => true,
]);
$api_response = json_decode(curl_exec($curl), true);
curl_close($curl);
if ($api_response['success']) {
// CAPTCHA validation successful, process the form data
} else {
// CAPTCHA validation failed, handle the error (e.g., display an error message)
}
?>
```
Remember to replace "YOUR_RECAPTCHA_SECRET_KEY" with your secret key obtained in Step 3.
That's it! By following these steps, you'll have successfully added a CAPTCHA to your HTML form, helping to protect it from automated spam submissions.
