code-boxx/0-PHP-RECAPTCHA.MD

## 0-PHP-RECAPTCHA.MD

      
    Raw
  

              0-PHP-RECAPTCHA.MD
            
          
    PHP CONTACT FORM WITH GOOGLE RECAPTCHA

https://code-boxx.com/php-contactform-recaptcha/
NOTES


Register your websites with Google reCaptcha first.
Insert the site key into 2-form.php and secret key into 3-process.php.
Change $mailTo to your own in 3-process.php.
That’s all. Launch 2-form.php in the browser.

LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-google-recaptcha.txt
1) Sign up at https://www.google.com/recaptcha/admin
2) Register your site, remember to add all the applicable domains, including localhost for testing
3) Copy the site key into 2-form.php
4) Copy the secret key into 3-process.php

## 2-form.php
<!DOCTYPE html>
<html>
  <head>
    <title>Simple PHP Contact Form</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="x-cosmetics.css">

    <!-- (A) GOOGLE RECAPTCHA API -->
    <script src="https://www.google.com/recaptcha/api.js"></script>
  </head>
  <body>
    <!-- (B) PROCESS + NOTIFICATIONS -->
    <?php
    if (isset($_POST["name"])) {
      require "3-process.php";
      echo "<div id='notify'>$status</div>";
    }
    ?>

    <!-- (C) CONTACT FORM -->
    <form id="cform" method="post">
      <label>Name</label>
      <input type="text" name="name" required>

      <label>Email</label>
      <input type="email" name="email" required>

      <label>Message</label>
      <textarea name="message" required></textarea>

      <!-- (D) CAPTCHA - CHANGE SITE KEY! -->
      <div class="g-recaptcha" data-sitekey="SITE KEY"></div>

      <input type="submit" value="Submit">
    </form>
  </body>
</html>

## 3-process.php
<?php
// (A) PROCESS STATUS
$status = "";

// (B) VERIFY CAPTCHA
$secret = "SECRET KEY"; // CHANGE TO YOUR OWN!
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=".$_POST["g-recaptcha-response"];
$verify = json_decode(file_get_contents($url));
if (!$verify->success) { $status = "Invalid captcha"; }

// (C) SEND MAIL
if ($status=="") {
  $mailTo = "admin@site.com"; // CHANGE TO YOUR OWN!
  $mailSubject = "Contact Form";
  $mailBody = "";
  foreach ($_POST as $k=>$v) {
    if ($k!="g-recaptcha-response") { $mailBody .= "$k: $v\r\n"; }
  }
  if (@mail($mailTo, $mailSubject, $mailBody)) { $status = "OK"; }
  else { $status = "Failed to send mail"; }
}
echo $status;

## 4-ajax.php
<!DOCTYPE html>
<html>
  <head>
    <title>Simple PHP Contact Form</title>
    <link rel="stylesheet" href="x-cosmetics.css">
    <!-- (A) GOOGLE RECAPTCHA API -->
    <script src="https://www.google.com/recaptcha/api.js"></script>

    <!-- (B) AJAX SUBMISSION -->
    <script>
    function doajax () {
      // (B1) GET FORM DATA - APPEND RECAPTCHA RESPONSE
      var data = new FormData(document.getElementById("cform"));
      data.append("g-recaptcha-response", grecaptcha.getResponse());

      // (B2) AJAX FETCH
      fetch("3-process.php", { method: "POST", body: data })
      .then(res => res.text())
      .then(txt => {
        // DO SOMETHING AFTER FORM SUBMISSION
        console.log(txt);
      });
      return false;
    }
    </script>
  </head>
  <body>
    <!-- (C) CONTACT FORM -->
    <form id="cform" method="post" onsubmit="return doajax();">
      <label>Name</label>
      <input type="text" name="name" required>

      <label>Email</label>
      <input type="email" name="email" required>

      <label>Message</label>
      <textarea name="message" required></textarea>

      <!-- (D) CAPTCHA - CHANGE SITE KEY! -->
      <div class="g-recaptcha" data-sitekey="SITE KEY"></div>

      <input type="submit" value="Submit">
    </form>
  </body>
</html>

## x-cosmetics.css
/* (A) SHARED */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#notify, #cform { max-width: 400px; }

/* (B) NOTIFICATION */
#notify {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ffc8c8;
  background: #ffe9e9;
}

/* (C) FORM */
#cform {
  padding: 20px;
  border: 1px solid #dfdfdf;
  background: #f5f5f5;
}
#cform label, #cform input, #cform textarea {
  display: block;
  width: 100%;
  resize: none;
}
#cform label { margin: 10px 0; }
#cform label:first-child { margin-top: 0; }
#cform input, #cform textarea {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #c7c7c7;
}
.g-recaptcha { margin: 20px 0; }
#cform input[type=submit] {
  border: 0;
  color: #fff;
  background: #3f44e1;
  cursor: pointer;
}
	1) Sign up at https://www.google.com/recaptcha/admin
	2) Register your site, remember to add all the applicable domains, including localhost for testing
	3) Copy the site key into 2-form.php
	4) Copy the secret key into 3-process.php
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple PHP Contact Form</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="x-cosmetics.css">

	<!-- (A) GOOGLE RECAPTCHA API -->
	<script src="https://www.google.com/recaptcha/api.js"></script>
	</head>
	<body>
	<!-- (B) PROCESS + NOTIFICATIONS -->
	<?php
	if (isset($_POST["name"])) {
	require "3-process.php";
	echo "<div id='notify'>$status</div>";
	}
	?>

	<!-- (C) CONTACT FORM -->
	<form id="cform" method="post">
	<label>Name</label>
	<input type="text" name="name" required>

	<label>Email</label>
	<input type="email" name="email" required>

	<label>Message</label>
	<textarea name="message" required></textarea>

	<!-- (D) CAPTCHA - CHANGE SITE KEY! -->
	<div class="g-recaptcha" data-sitekey="SITE KEY"></div>

	<input type="submit" value="Submit">
	</form>
	</body>
	</html>
	<?php
	// (A) PROCESS STATUS
	$status = "";

	// (B) VERIFY CAPTCHA
	$secret = "SECRET KEY"; // CHANGE TO YOUR OWN!
	$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=".$_POST["g-recaptcha-response"];
	$verify = json_decode(file_get_contents($url));
	if (!$verify->success) { $status = "Invalid captcha"; }

	// (C) SEND MAIL
	if ($status=="") {
	$mailTo = "admin@site.com"; // CHANGE TO YOUR OWN!
	$mailSubject = "Contact Form";
	$mailBody = "";
	foreach ($_POST as $k=>$v) {
	if ($k!="g-recaptcha-response") { $mailBody .= "$k: $v\r\n"; }
	}
	if (@mail($mailTo, $mailSubject, $mailBody)) { $status = "OK"; }
	else { $status = "Failed to send mail"; }
	}
	echo $status;
	/* (A) SHARED */
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	#notify, #cform { max-width: 400px; }

	/* (B) NOTIFICATION */
	#notify {
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ffc8c8;
	background: #ffe9e9;
	}

	/* (C) FORM */
	#cform {
	padding: 20px;
	border: 1px solid #dfdfdf;
	background: #f5f5f5;
	}
	#cform label, #cform input, #cform textarea {
	display: block;
	width: 100%;
	resize: none;
	}
	#cform label { margin: 10px 0; }
	#cform label:first-child { margin-top: 0; }
	#cform input, #cform textarea {
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #c7c7c7;
	}
	.g-recaptcha { margin: 20px 0; }
	#cform input[type=submit] {
	border: 0;
	color: #fff;
	background: #3f44e1;
	cursor: pointer;
	}