Okay
  Public Ticket #736870
adding Google's reCAPTCHA not working
Closed

Comments

  • InfoMetric started the conversation

    Hi!

    I registered and test the Google's reCAPTCHA in the folder  http://infometric.ca/recaptchanew

    It's working!

    But when I put the code in the index.php form. It's not working.

    Is it because there's a problem with the <div class="g-recaptcha"  ????

    The Google's reCAPTCHA is showing in the form, but the data <div class="g-recaptcha"  is not sending any data to post.php.

    $reCaptcha = new ReCaptcha($secret_key); 
    if ($_POST["g-recaptcha-response"]) {
        $resp = $reCaptcha->verifyResponse(
            $_SERVER["REMOTE_ADDR"],
            $_POST["g-recaptcha-response"]
        );
    //print_r($resp); To See the response object uncomment this
    } else {
    echo '<div class="notification error clearfix"><p><strong>ERREUR!</strong> Recaptcha non rec!.</p></div>';
    exit;
    }

    This is my form in index.php

    <form method="post" action="post.php" name="contactform" id="contactform" class="container">
    <fieldset>
    <div class="form-field grid-half">
    <label form="name">Nom</label>
    <span><input type="text" name="name" id="name" /></span>
    </div>
    <div class="form-field grid-half">
    <label for="email">Courriel</label>
    <span><input type="email" name="email" id="email" /></span>
    </div>
    <div class="form-field grid-full">
    <label for="message">Message</label>
    <span><textarea name="message" id="message"></textarea></span>
    </div>

    <div class="g-recaptcha" data-sitekey="6Lf_8BwTAAAAAPHReC0GuYkpSmXRObn1hBEzgZou"></div>

    </fieldset>

    <div class="form-click grid-full">
    <span>
    <input type="submit" name="submit" value="Envoyer" id="submit" /></span>
    </div>
    <div id="alert" class="grid-full"></div>
    </form>

  • InfoMetric replied

    In my form, I try a SIMPLE test: 

    <div class="form-field grid-full">
    <label for="captcha">Captcha</label>
    <span><input type="text" name="captcha" id="captcha" /></span>
    <img src="captcha.php" />

    </div>

    In post.php, I try to retreive the Post value and it doesn't receive anything!!!

    if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

    $name     = $_POST['name'];
    $email    = $_POST['email'];
    $message = $_POST['message'];
    $captcha = $_POST['captcha'];

    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Post Captcah:'.$captcha.'</p></div>';
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Post name:'.$name.'</p></div>';

    It show the value for $name but not from $captcha

    What is the problem!?

  •  5
    Nick replied

    Hi,

    I can't see the recaptcha you added in your live site. Can you give me another link to your testing version, or just zip up the whole site and attach it here so I can have a look?

    Thanks,
    Nick


    aetherthemes

  • InfoMetric replied

    I tired several types of CAPTCHA. None worked.

    So I tried to return to basic by SIMPLY adding a tect form field called 'thecapt'

    <form method="post" action="post.php" name="contactform" id="contactform" class="container">
    <!--<div class="g-recaptcha" data-sitekey="6Lf_8BwTAAAAAPHReC0GuYkpSmXRObn1hBEzgZou"></div>-->

    <fieldset>
    <div class="form-field grid-half">
    <label form="name">Nom</label>
    <span><input type="text" name="name" id="name" /></span>
    </div>
    <div class="form-field grid-half">
    <label for="email">Courriel</label>
    <span><input type="email" name="email" id="email" /></span>
    </div>
    <div class="form-field grid-full">
    <label for="message">Message</label>
    <span><textarea name="message" id="message"></textarea></span>
    </div>
    <div class="form-field grid-full">
    <label for="thecapt">Entrez les chiffres <img src="captcha.php" /></label>
    <span><input type="text" id="thecapt" name="thecapt" /></span>
    </div>
    </fieldset>
    <div class="form-click grid-full">
    <span>
    <input type="submit" name="submit" value="Envoyer" id="submit" /></span>
    </div>
    <div id="alert" class="grid-full"></div>

    </form>

    After, I went to 'Post.php' to echo the new value from '$_POST['thecapt']'

    name     = $_POST['name'];
    $email     = $_POST['email'];
    $message = $_POST['message'];
    $thecapt = $_POST['thecapt'];

    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Post Captcah:'.$thecapt.'</p></div>';
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Post name:'.$name.'</p></div>';
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Post email:'.$email.'</p></div>';
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Post message:'.$message.'</p></div>';

    $name, $email and $message are receiving value from POST, but not $thecapt!!!

  • InfoMetric replied

    So, how can I add a simple text field in FORM so I could upgrade the FORM?

  • InfoMetric replied

    Or, can you write me the procedure to add Google's ReCAPTCHA or another good one? Thank you

  •  5
    Nick replied

    Have you modified the JS as well? You need to register the newly added fields there, not only in the 'post.php' file. You can find a section in your main.js file that is marked with a comment that it refers to the contact form.


    aetherthemes

  • InfoMetric replied

    So how can I make Google's ReCaptcha running?

    <form method="post" action="post.php" name="contactform" id="contactform" class="container">
    <!--<div class="g-recaptcha" data-sitekey="6Lf_8BwTAAAAAPHReC0GuYkpSmXRObn1hBEzgZou"></div>-->

    <fieldset>
    <div class="form-field grid-half">
    <label form="name">Nom</label>
    <span><input type="text" name="name" id="name" /></span>
    </div>
    <div class="form-field grid-half">
    <label for="email">Courriel</label>
    <span><input type="email" name="email" id="email" /></span>
    </div>
    <div class="form-field grid-full">
    <label for="message">Message</label>
    <span><textarea name="message" id="message"></textarea></span>
    </div>
    <!--<div class="form-field grid-full">
    <label for="thecapt">Entrez les chiffres <img src="captcha.php" /></label>
    <span><input type="text" id="thecapt" name="thecapt" /></span>
    </div>-->
    <div  class="g-recaptcha" data-sitekey="6Lf_8BwTAAAAAPHReC0GuYkpSmXRObn1hBEzgZou"></div>

    </fieldset>
    <div class="form-click grid-full">
    <span>
    <input type="submit" name="submit" value="Envoyer" id="submit" /></span>
    </div>
    <div id="alert" class="grid-full"></div>

    </form>

    The Recaptcha is showing and working on the page Form, but how do I modify the main.js so it could receive the value of the Captcha?

    In the post.php, the code is:

    $reCaptcha = new ReCaptcha($secret_key); 
    #if ($_POST["g-recaptcha-response"]) {
    if ($_POST["captcha"]) {

        $resp = $reCaptcha->verifyResponse(

            $_SERVER["REMOTE_ADDR"],
            $_POST["captcha"]
        );
    //print_r($resp); To See the response object uncomment this
    } else {
    #echo "Recaptcha Not submitted";
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Recaptcha Non envoyé</p></div>';
    #exit;
    }
    if ($resp != null && $resp->success) {
        #echo "Recaptcha Verification Success";
        echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Recaptcha Verification OK</p></div>';
    exit;
    //Write other FORM password and Email Validation Procedures
    } else {
    #echo "Recaptcha Verification Error";
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Recaptcha Verification Erreur</p></div>';
    exit;
    }

    But there is nothing in $_POST["g-recaptcha-response"]

  • InfoMetric replied

    I'm trying a simple Captcha:

    FORM:

    <?PHP $debug = 3;?>

    <form method="post" action="post.php" name="contactform" id="contactform" class="container">
    <!--<div class="g-recaptcha" data-sitekey="6Lf_8BwTAAAAAPHReC0GuYkpSmXRObn1hBEzgZou"></div>-->

    <fieldset>
    <div class="form-field grid-half">
    <label form="name">Nom</label>
    <span><input type="text" name="name" id="name" /></span>
    </div>
    <div class="form-field grid-half">
    <label for="email">Courriel</label>
    <span><input type="email" name="email" id="email" /></span>
    </div>
    <div class="form-field grid-full">
    <label for="message">Message</label>
    <span><textarea name="message" id="message"></textarea></span>
    </div>

    <?PHP if ($debug==1)
    {
    echo '<div  name="g-recaptcha-response" id="g-recaptcha-response" class="g-recaptcha" data-sitekey="6Lf_8BwTAAAAAPHReC0GuYkpSmXRObn1hBEzgZou"></div>';
    }

    if ($debug==2)
    {  echo $sweetcaptcha->get_html(); }

    if ($debug==3)
    {
    ?>
    <div class="form-field grid-full">
    <label for="tzecaptcha">Entrez ce que vous voyez <img src="captcha.php" /></label>
    <span><input type="text" id="tzecaptcha" name="tzecaptcha" /></span>
    </div>
    <?PHP
    }
    ?>
    </fieldset>
                 
    <div class="form-click grid-full">
    <span>
    <input type="submit" name="submit" value="Envoyer" id="submit" /></span>
    </div>
    <div id="alert" class="grid-full"></div>

    </form>

    POST.PHP

    ### VALIDATION SIMPLE-CAPTCHA #####
    if ($debug==3)
    {
    ##session_start();
    if(isset($_POST["tzecaptcha"])&&$_POST["tzecaptcha"]!=""&&$_SESSION["code"]==$_POST["tzecaptcha"])
    {
    #echo "Correct Code Entered";
    //Do you stuff
    }
    else
    {
    echo '<div class="notification error clearfix"><p><strong>Attention!</strong> Recaptcha Verification Erreur</p></div>';
    exit;
    }
    }
    ### FIN VALIDATION SIMPLE-CAPTCHA #####

    Main.js:

    jQuery('#contactform').submit(function(){

    var action = jQuery(this).attr('action');

    jQuery("#alert").slideUp(750,function() {
    jQuery('#alert').hide();

      jQuery('#submit')
    .after('<img src="images/ajax-loader.gif" class="loader" />')
    .attr('disabled','disabled');

    jQuery.post(action, {
    name: jQuery('#name').val(),
    email: jQuery('#email').val(),
    message: jQuery('#message').val()
    tzecaptcha: jQuery('#tzecaptcha').val() //I entered this...

    },
    function(data){
    document.getElementById('alert').innerHTML = data;
    jQuery('#alert').slideDown('slow');
    jQuery('#contactform img.loader').fadeOut('slow',function(){jQuery(this).remove()});
    jQuery('#submit').removeAttr('disabled');
    if(data.match('success') != null) {
    jQuery('#name').val('');
    jQuery('#email').val('');
    jQuery('#message').val('');
    jQuery('#tzecaptcha').val(); //I entered this
    }
    }
    );

    });

    return false;

    });

    When I enter tzecaptcha: jQuery('#tzecaptcha').val() in main.js, the Web site goes all wrong. No menu...

  •  5
    Nick replied

    You have a typo, you need to have quotes in your brackets where you changed the JS:

    jQuery('#tzecaptcha').val("");
    

    Also in your previous entry in the JS you need to put a coma after:

    message: jQuery('#message').val()

    And also I would love to see the code for myself somewhere live, so I can check out what errors you get in the console, I can't be of much help with this copy/paste.

    Thanks,
    Nick


    aetherthemes

  • InfoMetric replied

    Do you have the code and procedure to add Google's reCAPTCHA code to the FORM?

    When I use the Google's test file, it's working, but when I put it in the form, it doesn't send the value to POST.PHP

    I corrected the last thing you said in MAIN.JS but doen't work. The form is not sending anything when I click the sumit button...

  •  5
    Nick replied

    I don't have the procedure, this is not a feature that is supported in the original template, rather a 3rd party feature you are trying to add.

    If you wish, just zip up the whole site and send me the archive here, I'd be happy to take a look and help you.

    Thanks,
    Nick


    aetherthemes