Adding the best ReCaptcha Tutorial :) - UPDATED 16/4/2009

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Adding the best ReCaptcha Tutorial :) - UPDATED 16/4/2009

Post by genieuk » Sat Mar 07, 2009 7:05 pm

Greetings! Everyone,

DEMO SITE & TUTORIALS

In This Tutorial You can:

Create a contact form with the best re-captcha
Create a Custom Error Page with Go Back & Try Again
Create a Form Success Page with auto re-direct
Change CAPTCHA Theme


Or use the template provided.


I notice allot of CAPTCHA extentions etc but after doing a search noticed nobody have done a tutorial on adding ReCaptcha to there sites. First of all ReCaptcha uses probably millions of different codes which makes it harder for spammers to use automated programs to try and guess the code.

TEMPLATE NOW INCLUDED FOR NOVICE USERS

If you are not confident in following the below tutorial or wish to test etc... you can download the template. The template contains the contact form, captcha image code and box, feedback page, custom error page and captcha theme changer.

You can use the template on your site or for testing etc, entirely up to you. I still recommend read the tutorial.

Included in the download is a READ ME Instructions Guide. Everything you need is included with the template(s) so you dont need to download anything else.

WWW6 Users

Download Template

WWW5 Users

Download Template

1) First of all go to http://recaptcha.net/ and signup for an API key. This is needed otherwise nothing will work. You will need to add you website address and a public and private key will be issued immediately.

2) Secondly download the zip file from http://code.google.com/p/recaptcha/down ... lib-Latest . The only file you need from the zip is 'recaptchalib.php' the others are samples etc.

3) If not already done create your form using web builder. The Image below is a sample form.

Image


Just above the submit button add a 'HTML' box and add the following code. The below code will display the reCAPTCHA image so just above the submit button is recommended.

Code: Select all

<?php
require_once('recaptchalib.php');
$publickey = "MYKEY"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
** IMPORTANT: where it says: $publickey = "MYKEY"; replace the MYKEY with your PUBLIC KEY. Make sure it is the public key not private key.

Now you should have something like the below:

Image

4) You will need to make sure the recaptchalib.php file is in the same directory as your form page file.

5) Now create a new page in web builder, name it what you want, it is going to be the page that confirms form was sent so i recommend naming it something like formsuccess.php

6) Go to your form page and double click the grid to bring up the form properties and do the following:

Form Name: Name it what you want

Action: Type your form success page here so in this example i would type:
formsuccess.php

Method: POST

Encoding Type: remove all text from this section

7) Now click 'ok'

Your form properties should look like below when you done the above.

Image

8) Now go to formsuccess.php and right click on the formsuccess in site manager and choose 'page HTML' . Add the below code to the 'Start of Page'.

Code: Select all

<?php
require_once('recaptchalib.php');
$privatekey = "PRIVATEKEY";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
die ("The reCAPTCHA wasn’t entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
}
?>

Now look at the code above you will see 3rd line down: $privatekey = "PRIVATEKEY";

replace PRIVATEKEY with your private key.

9) After the code above copy and paste the below after it: where it says:
$mailto = "MYEMAIL@MYWEBSITE.com"; replace MYEMAIL@MYWEBSITE.com with your email address. Also where it says:

$subject = "Query / Comments";
$message = "Query / Comments";

replace Query / Comments with your own text.

Code: Select all

<?php
  if ($_SERVER['REQUEST_METHOD'] != 'POST'){
    header('Refresh: 0; URL=/index.html');
    exit;
  }

  $mailto  = "my-email@mydomain.com";
  $subject = "Query / Comments";
  $message = "Query / Comments";
  $name    = Valid_Input($_POST['name']);
  $email   = Valid_Email($_POST['email']);
  foreach ($_POST as $key => $value){
    if (!is_array($value)){
      $message .= "\n".$key." : ".$value;
    }
    else{
      foreach ($_POST[$key] as $itemvalue){
        $message .= "\n".$key." : ".$itemvalue;
      }
    }
  }
  $header  = "From: ".$name." <".$email.">\n";
  $header .= "Reply-To: ".$email."\n";
  $header .= "MIME-Version: 1.0\n";
  $header .= "Content-Type: text/plain; charset=utf-8\n";
  $header .= "Content-Transfer-Encoding: 8bit\n";
  $header .= "X-Mailer: PHP v".phpversion();

  mail($mailto, $subject, stripslashes($message), $header) or exit('Fatal Mail Error!');

  function Valid_Input($data){
    list($data) = preg_split('/\r|\n|%0A|%0D|0x0A|0x0D/i',ltrim($data));
    return $data;
  }
  function Valid_Email($data){
    $pattern = '/^([0-9a-z]([-.\w]*[0-9a-z])*@(([0-9a-z])+([-\w]*[0-9a-z])*\.)+[a-z]{2,6})$/i';
    if (preg_match($pattern,$data)){
      return $data;
    }
    else{
      return $GLOBALS['mailto'];
    }
  }
?>
Now save everything and publish, make sure you upload recaptchalib.php to same directory as your form page.

Now you will have a fully working reCAPTCHA. You should have something like the the picture below.

Image

There is something else you may want to do is download the 'redirect after time' web builder extenstion and have the formsuccess.php page to auto redirect after xx mount of seconds back to homepage or whichever page you want. Also i recommend including a text link so your members can click it if they don't want to wait xx mount of seconds or incase there browser does not support auto redirect.

Create your own Custom Error Page (Optional) 11/04/2009

To use your own custom error page do this.

on formsuccess.php page rightclick webpage and choose HTML.

at start of page find:

Code: Select all

if (!$resp->is_valid) {
die ("The reCAPTCHA wasn’t entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
}
and replace with:

Code: Select all

if(!$resp->is_valid) {
header("location:captcha_error.php");
die();
}

Now if you look at the new code it asks to display a webpage captcha_error.php if code entered is incorrect. Basically make a webpage called captcha_error.php, create page as you wish upload edited files and now when code is entered incorrect it will display the captcha_error.php page.

Once the user lands on the error page if the code they entered is incorrect you could type some text something like Go Back & Try Again, hyperlink it but use event: OnClick Action: Javascript Function Javascript: history.back(): this javascript that is built into WWW5/WWW6 will take user back to previous page and remember everything they type in on the form, this saves user having to retype all details etc back into form.

Example Error Page I use on my site.

Image

Change Re-Captcha Theme (Optional) 15/04/2009

By adding a little piece of Java Script code you can change the theme of the recaptcha.

Re-Captcha comes with 4 themes to choose from.

Red - Default

Image

Clean -

Image

White -

Image

Black Glass -

Image

On your form page that contains the form and CAPTCHA Image right-click on the webpage in WW5/6 choose 'Page HTML', now click on the Between Head Tab and insert the following code

Code: Select all

<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'blackglass'
};
</script>
where you see blackglass replace that with any of the above (clean / white / blackglass / red)

Simply save and upload and your new re-captcha image theme will show.

Example with theme change:

Before: (default red)

Image

After With Theme Change (White theme)

Image
Last edited by genieuk on Fri Jun 26, 2009 11:34 am, edited 27 times in total.

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Sun Mar 08, 2009 10:23 am

Did anyone find this tutorial useful?

Hope i explained enough and hope you enjoy it. :D

Mat

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Sun Mar 08, 2009 10:47 am

I am no genie lol, maybe you saying it in a take the micky way lol

It sounds complicated yet it relatively easy when you follow each instructions carefully.

Mat
Last edited by genieuk on Sat Jun 05, 2010 1:39 pm, edited 1 time in total.

User avatar
Eddy
 
 
Posts: 477
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy » Sun Mar 08, 2009 2:12 pm

Its a nice tutorial ,I did move it to the tutorial section.
This is a nice example if u use the feedback.php code from Kees or any other prosess code.

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Sun Mar 08, 2009 2:29 pm

Thanks for comments. Glad people like it. :)

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Mon Mar 09, 2009 12:13 am

Thanks for pointing out spelling mistake did not notice that. My site is not live yet and before it does i will be doing a spelling check, but thanks anyway.

Mat

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Sat Apr 11, 2009 11:46 am

IR_Baboon wrote:Nice tutorial! Thanks for it.

I have one doubt here using this script. It is working on my website but when i fill,for example, the field "name" with my first name the script works well and I recieve the e-mail with all the information that was filled in the boxes.

When I fill the box "name" with my full name I receive a empty e-mail only with the e-mail of the sender and with the subject. When I open the e-mail, there is nothing to be seen.

Can you help me with this? I think is related with the "space" between names or perhaps with the lenght of the name, but i don't know nothing abour php so any help will be greatfull.

Thanks
Hi,

I have no problems with this. Check your name box properties. Click on the 'name' box and right-click and select 'properties' then select the validate tab and check to make sure you have nothing setup there that is stopping a white space etc.

Mat

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Sat Apr 11, 2009 11:54 am

WillyNanita wrote:Hello!
Thanks for this tutorial.
How do I add a fromerror page instead of the one used?
To use your own custom error page do this.

on formsuccess.php page rightclick webpage and choose HTML.

at start of page find:

Code: Select all

if (!$resp->is_valid) {
die ("The reCAPTCHA wasn’t entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
}
and replace with:

Code: Select all

if(!$resp->is_valid) {
header("location:captcha_error.php");
die();
}
Now if you look at the new code it asks to display a webpage captcha_error.php if code is incorrect. Basically make a webpage called captcha_error.php, create page as you wish upload edited files and now when code is entered incorrect it will display the captcha_error.php page.

Once the user lands on the error page if the code they entered is incorrect you could type some text something like Go Back & Try Again, hyperlink it but use event: OnClick Action: Javascript Function Javascript: history.back(): this javascript that is built into WWW5/WWW6 will take user back to previous page and remember everything they type in on the form, this saves user having to retype all details etc back into form.

User avatar
me.prosenjeet
 
 
Posts: 1248
Joined: Mon Dec 24, 2007 1:50 pm
Location: Lucknow
Contact:

Post by me.prosenjeet » Sat Apr 11, 2009 12:50 pm

Nice one indeed!! :lol:
.
Click here to check my Pro WB Extensions
Click here to check my Pro WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
---------------------------------------------------------

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Change Recaptcha Theme

Post by genieuk » Wed Apr 15, 2009 8:40 pm

Main Post Also Been Updated with changes.

By adding a little piece of Java Script code you can change the theme of the recaptcha.

Re-Captcha comes with 4 themes to choose from.

Red - Default

Image

Clean -

Image

White -

Image

Black Glass -

Image

On your form page that contains the form and CAPTCHA Image right-click on the webpage in WW5/6 choose 'Page HTML', now click on the Between Head Tab and insert the following code

Code: Select all

<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'blackglass'
};
</script>
where you see blackglass replace that with any of the above (clean / white / blackglass / red)

Simply save and upload and your new re-captcha image theme will show.

Example with theme change:

Before: (default red)

Image

After With Theme Change (White theme)

Image
Last edited by genieuk on Wed Apr 15, 2009 9:15 pm, edited 2 times in total.

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Wed Apr 15, 2009 10:09 pm

dazomatic wrote:UNBELIEVABLE !
YOUR A GENIE !

Thank you,

Glad you like it. :)

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Re: Good Job!

Post by genieuk » Wed Apr 15, 2009 10:21 pm

Sandyfishgirl wrote:I think even I can follow these instructions :) I'll have to look into the "key" thing & then I'll probably use it.

I came on the board tonight, looking for form related spam issues. Sometimes, I get a form returned with the selections made in the combo box - but in the text boxes, the information looks like this: Yhtt5#eNbZ.

Sometimes the reply includes a hyperlink - to who knows where - I do NOT click on them. I'm sure it's a spam return. I don't get many only a couple a day - but I guess the captcha would eliminate it.

I think it's GREAT that you advanced members post these threads for the rest of us :)
THANKS!!
The key is free and is only used to connect the recaptcha to your domain only.

What i like about re-captcha is it creates probably millions of different combinations and for a spammer to bypass such a powerful captcha that is constantly changing the captcha the image using millions of different combinations makes it very hard or impossible for a spammer to send junk email via your form.

I have never in my life have been spammed once using re-captcha.

Hope it solves your spam problems.

Mathew
Last edited by genieuk on Thu Apr 16, 2009 1:30 am, edited 1 time in total.

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Thu Apr 16, 2009 1:22 am

UPDATE:

Template now provided for both WWW6 and WWW5 Users.

Check main post for link to templates.

Enjoy!

Mathew

genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk » Tue Apr 21, 2009 9:29 pm

Well your welcome to try it if you wish to do so.

Re-Captcha is much stronger are harder for spam bots thou. Reason why all the big companies use Re-Captcha. Commercial Sites have to pay for a license i beleive or something along those lines.

I have never in my life had spam using re-captcha. I have used simple custom built ones before and i attend to get spam on occasions.

Everyone can choose what they prefer. If you want to blow out on the best captcha then go ahead if not stay with the built in one.

As you probably already saw there are templates etc aswell to help you along the way.

If you do try and have problems, concerns, questions basically anything then your welcome to post back.

Regards,
Mat

User avatar
neo_webbuilder
 
 
Posts: 82
Joined: Wed Jan 31, 2007 11:05 am

Post by neo_webbuilder » Thu May 21, 2009 12:11 pm

The top of the page should start with
<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST'){
header('Refresh: 0; URL=/index.html');
exit;
}
After which the captcha code should start...... Otherwise the header cannot be excuted.

Also it is nice to give the entry field a tabindex. this way the entry field is accessible for people who cannot use a mouse.

<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'blackglass',
tabindex: 15
};
</script>
Please modify the overal instructions so it is complete !!!

Post Reply