Dear Reader, let us know that, “How to create a contact form in PHP using google recaptcha“. So in this Tutorial, We Learn Step By Step “How to create a contact form in PHP using google recaptcha Process”.
The reCAPTCHA PHP Library provides a simple way to place a CAPTCHA on your PHP website. So, reCAPTCHA will protect your website from spam with the better user experience.Using reCAPTCHA users can prove they are human without solving a CAPTCHA. They need just a single click to confirm they are not a robot.
First, we see Snapshot for Contact Us form
And you can also see Live “Demo” by click on below Demo button
Step 1:- At First, we need to Register our website and get “reCAPTCHA” Key by click here
Step 2:- In Registration form of the website we need to Fill the below details
i) Label
ii) Choose the type of reCAPTCHA
iii)
as we can see in below snapshot after fill details click on “Register” Button
Step 3:- After Registration, we see “Site Key” and “Secret Key” as we can see in below snapshot
Step 4:- At First, We need to Create Database to Contact Details in the database for future use, So let’s create a database like “php_test”
Step 5:- After Creation of database copy below SQL code and run SQL Query.
1 2 3 4 5 6 7 8 |
CREATE TABLE `contactus` ( `id` int(11) NOT NULL, `name` varchar(40) NOT NULL, `email` varchar(40) NOT NULL, `mobile` bigint(10) NOT NULL, `message` text NOT NULL, `created_date` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
Step 6:- Now we need to Create “config.php” file for Database Configuraion in our project’s root directory like “htdocs/webpreprations/demo/contact-form-in-php-using-google-recaptcha/config.php” and paste below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php define('HOSTNAME','localhost'); define('USERNAME','root'); define('PASSWORD',''); define('DBNAME','php_demo'); $conn = mysqli_connect(HOSTNAME,USERNAME,PASSWORD,DBNAME); if(!$conn) // Check connection { die("Connection failed: " . mysqli_connect_error()); } else { //echo 'Connection Established'; } |
Step 7:- Now we need to Create “index.php” file in our project’s root directory like “htdocs/webpreprations/demo/contact-form-in-php-using-google-recaptcha/index.php” and paste below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<?php include '../header.php'; include 'config.php'; /*------------- for save enquiry details start --------------*/ if (isset($_POST['contactus'])) { $name = trim($_POST['name']); $email = trim($_POST['email']); $mobile = trim($_POST['mobile']); $message = trim($_POST['message']); $created_date = date('Y-m-d H:i:s'); $insert_query = "INSERT INTO contactus(name,email,mobile,message,created_date) VALUES('$name','$email','$mobile','$message','$created_date') "; //echo $insert_query; $result_insert = mysqli_query($conn,$insert_query); if($result_insert == 1) { echo '<div class="alert alert-success">Enquiry Submited Successfully!</div>'; } else { echo '<div class="alert alert-danger">Some Error Occur, Please Try Again!</div>'; } } /*------------- for save enquiry details close --------------*/ ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Registration Module using MySQL, PHP</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .err_msg{ font-weight: bold; color: #F00; } </style> </head> <body> <div class="container"> <div id="login-form"> <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off"> <h2 class="alert alert-info">Contact Us</h2> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" name="name" id="name" class="form-control" placeholder="Please Enter *" maxlength="50"> </div> <span class="err_msg" id="name_err" style="display: none">Please Enter Name</span> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <input type="email" name="email" id="email" class="form-control" placeholder="Please Enter Email *" maxlength="40"> </div> <span class="err_msg" id="email_err" style="display: none">Please Enter Email</span> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span> <input type="text" name="mobile" id="mobile" class="form-control" placeholder="Please Enter Mobile No *" maxlength="10"/> </div> <span class="err_msg" id="mobile_err" maxlength="10" style="display: none">Please Enter Mobile</span> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-comment"></span></span> <textarea name="message" id="message" cols="5" rows="8" class="form-control" placeholder="Please Enter Message *"></textarea> </div> <span class="err_msg" id="message_err" style="display: none">Please Enter Message</span> </div> <div class="input-group"> <div class="g-recaptcha" data-sitekey="6Lf9sEcUAAAAAEpUQJrMpTYE0H_Ru_8NdJSzl5Ts"></div> </div> <br> <div class="input-group"> <div class="form-group"> <button type="reset" class="btn btn-danger" name="reset">Reset</button> <button type="submit" class="btn btn-success" name="contactus" onclick="return validate()">Contact Us</button> </div> </div> </div> </form> </div> </div> </body> </html> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script type="text/javascript"> /*---------- for validate form start ------------*/ function validate() { //alert('welcome'); var name = $('#name').val(); if(name.trim() == '') { $('#name_err').show(); $('#name').focus(); return false; } else { $('#name_err').hide(); } var email = $('#email').val(); if(email.trim() == '') { $('#email_err').show(); $('#email').focus(); return false; } else { $('#email_err').hide(); } var mobile = $('#mobile').val(); if(mobile.trim() == '') { $('#mobile_err').show(); $('#mobile').focus(); return false; } else { $('#mobile_err').hide(); } var message = $('#message').val(); if(message.trim() == '') { $('#message_err').show(); $('#message').focus(); return false; } else { $('#message_err').hide(); } } /*---------- for validate form close ------------*/ </script> |
Step 8:- After Creation of “index.php” file we need to change our “site key” as we can see in below snapshot
Step 9:- Now run your project, so you need to type in browser localhost/your_project_name/index.php like
http://localhost/webpreprations/demo/contact-form-in-php-using-google-recaptcha/index.php then you can see the result as in below snapshot
Congratulations you have successfully Completed “How to create a contact form in PHP using google recaptcha Process“, if you like this post and was helpful for you then share this post on social media and if you have any query then please contact us or comment below, Thanks.
2 Comments:
Rukhsad September 27, 2018
Very interesting tutorial, I love that
Keep it up, All the best 🙂
Webpreparations Team September 28, 2018
Thank you so much dear Reader.