Learn how to create a contact form with google recaptcha code in php

Learn how to create a Contact form with Google reCaptcha code in PHP

There are two parts to this video and tutorial, the first is just to create a simple form in html and then redirect the form to a PHP page.

Step 1: If you have your contact.html page ready, you would want to make a copy of the same and name it thankyou.php. Open your contact page in any html editor, in this tutorial, I have used Adobe Dreamweaver CS6 and I have named the page as Contact.html as shown below.

Step 2: Locate the position where you want to have your contact form in the contact page, go to the design view and place your cursor there.

Step 3: Go to the menu -> Insert -> Form -> Form and click on it, as shown below:

If you see the design view, you will see a red dotted box appearing.

Step 4: Your cursor will be inside the red dotted box by default, now go back to menu and click on Insert -> Table and create a table with 1 row and 2 column and click okay button as shown in below.

For this tutorial, I want to have four lines of information, like Name:, Email, Phone and Message and I have also given one line gap between each field, so I will go and left align to top for the left field and right align to top for the right side field from the properties panel at the bottom of dreamweaver.

You can also by hitting your tab button now will be able to create 9 rows with 2 columns, you can also put in your field names  and you will see something like this below:

Step 5: Let us go and create form fields, first place your cursor on the right box beside the Name: (first field) now click on Insert from the top menu and from the dropdown, click Form->Text Field and click on okay button.

It will prompt you to fill in the ID and Label, having put in the label, you will have to give the ID a variable, in this example, I have called it ‘name’ click on ok button and do the same process for the rest of the form fields.

Step 6: Finally after creating all the four form fields, you will now have to make a Submit button, so go to the top menu->Insert->Form-> Button and click it, after which a screen will pop up, call the button name there, for this example I have called it “Submit” and click on ok button.

We have done everything that needs to be done with the Contact.html except that we need to link the form with the thankyou.php once the thankyou.php is programed, we will have to write some PHP codes to link this contact form to the PHP page and have it executed, so as we have already done earlier in step #1, along with the contact.html we also created a thankyou.php document, now open thankyou.php in dreamweaver.

Step 7: Go to the place where you want the message to appear after submitting the contact form and copy these codes from below:

<?php

echo $name.”We will get back to you soon.”;

$name=$_REQUEST[‘name’] ;

$email=$_REQUEST[’email’];

$phone=$_REQUEST[‘phone’];

$message=$_REQUEST[‘message’];
$Message = ” Form Details \n\n”;

$Message .= ” Name : $name \n”;

$Message .= ” E-mail : $email \n”;

$Message .= ” Telphone : $phone \n”;

$Message .= ” Message : $message \n”;

mail(“clement@entheosweb.com”, “Website Visitors”, $Message , “From: $email\n”);

?>

You can also go to our URL and copy the codes from there: https://entheosweb.com/video_tutorials/Captcha/thankyou.txt

Kindly note that the variable you had mentioned inside the form fields in the contact form must match the variable you have nor programmed in PHP for example, the first form field says ‘name’ should be the same as in the 3rd and 7th line of the PHP codes above and do the same with others as well.

Step 8: Go back to your contact.html and click anywhere in the form and look for the form tag below and then from the action link the thankyou.php to this form.

You can upload this using Filezilla and then check your contact form.

The second part of this tutorial is you will learn how to program a contact form in PHP itself,

Step 1: As earlier, I have created a simple page template and I am calling it Contact.php, now at the place where you want this form to show up, you will have to place the cursor there and then copy these codes there:

<?php
$action=$_REQUEST[‘action’];
if ($action==””) /* display the contact form */
{
?>
<form action=”” method=”POST” enctype=”multipart/form-data”>
<input type=”hidden” name=”action” value=”submit”>
Your name:<br>
<input name=”name” type=”text” value=”” size=”30″/><br>
Your email:<br>
<input name=”email” type=”text” value=”” size=”30″/><br>
Your message:<br>
<textarea name=”message” rows=”7″ cols=”30″></textarea><br>
<input type=”submit” value=”Send email”/>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST[‘name’];
$email=$_REQUEST[’email’];
$message=$_REQUEST[‘message’];
if (($name==””)||($email==””)||($message==””))
{
echo “All fields are required, please fill <a href=\”\”>the form</a> again.”;
}
else{
$from=”From: $name<$email>\r\nReturn-path: $email”;
$subject=”Message from Entheos contact form”;
mail(“clement@entheosweb.com”, $subject, $message, $from);
echo “Your Email was successfully sent!”;
}
}
?>

You can also go to our URL here and copy the codes: 

https://entheosweb.com/video_tutorials/Captcha/PHPContactform.txt

You will have to probably change the email id from the last second line on the above codes. Once you do this you can test this form and it will go through without any problem.

Step 2: Now the third part is you will learn how to put in your Google reCaptcha codes in the form, now I will want these codes after the message box and above the send email button so for now just hold on to that thought.

Go to the google URL: https://www.google.com/recaptcha/intro/index.html and click on the blue button where it says get reCAPTCHA.

If you are not already a Registered member, fill in the required details from the above form and click on register.

Take a  note of the Site Key and Secret Key and keep it confidential, you will be required to use it later in the tutorial.

Step 3: Follow the steps as mentioned in the Step 1: client-side Integration

Copy and paste the snippet #1 before the closing </head> tag on your contact.php file.

Secondly, copy and paste the snippet #2 at the place where you want this captcha to show in your contact form.

Step 4: Thirdly, copy and paste the php programme shown below to the top of your contact.php page:

<?php
if(isset($PPOST[‘ContactButton’])){

$url = ‘https://www.google.com/recaptcha/api/siteverify’;
$privatekey = “6LeWbgsTAAAAAGNs8Cmjh5U-zET3rSH2EcFzjhod”;

$response = file_get_contents($url.”?secret=”.$privatekey.”&response=”.$_POST[‘g-recaptcha-response’].”&remoteip=”.$_SERVER[‘REMOTE_ADDR’]);

$data = json_decode($response);

if(isset($data->success) AND $data->success==true){

header(‘Location: Contact.php?CaptchaPass=True’);
}else{

header(‘Location: Contact.php?CaptchaFail=True’);

}
}

?>

You can also go to the URL here below and copy the codes: https://entheosweb.com/video_tutorials/Captcha/GooglereCaptcha.txt

Step 5: Make some space at the top of the contact.php page and paste these above codes there like this:

Step 6: Also go back to the contact form and paste these codes there:

<?php if(isset($_GET[‘CaptchaPass’])){ ?>

<div class=”FormElement”>Message Sent</div>

<?php } ?>

<?php if(isset($_GET[‘CaptchaFail’])){ ?>

<div class=”FormElement”>Captcha Failed. Please try again!</div>

<?php } ?>

Once you have done this, you can upload/FTP the contact.php to your server or hosting and test it, you can check your email account to see if you have received the form.

That’s it, you now know how to program a contact form in html and tag it to a php page. You also know how to program a contact form in php, attach Google recaptcha code, and program the recaptcha button.

Here is the video tutorial again for your reference:

Related Tutorials


Pinterest