Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I have added the google recaptcha in contact us form but value is also submitting without captcha. I have used in my contact page following codes for captcha:
<div class="g-recaptcha" data-sitekey="XXXXXXXXXX"></div>
<script src='https://www.google.com/recaptcha/api.js'></script>
These two code i have used. please tell me how can i validate captcha.
You should try this code: I have been using this on my site.
<script>
window.onload = function() {
var recaptcha = document.forms["contactForm"]["g-recaptcha-response"];
recaptcha.required = true;
recaptcha.oninvalid = function(e) {
alert("Please complete the captcha");
}
}
</script>
This script use for validation google reCaptcha like a default validation of magento. please use it.
<form name="freeeventForm" id="freeeventForm">
<div id="RecaptchaField"></div>
<input type="hidden" class="validate-reCAPTCHA">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
<script type="text/javascript">
//< ![CDATA[
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField', {'sitekey' : '6LeuiDwUAAAAALByt-xxxxxxxxxxx-xUsZHFkeEP'});
};
var customForm = new VarienForm('freeeventForm');
Validation.add('validate-reCAPTCHA','reCAPTCHA is mandatory',function(){
var response = grecaptcha.getResponse();
if (response.length === 0) {
return false;
}
return true;
});
//]]>
</script>
The accepted JavaScript solution above is definitely NOT the way to go in my opinion. Any bot that's not using JS (which is most of them) will simply bypass your validation and you'll get all that spam you're trying to block. Always always always validate on the server. JS validation is just a UX first step.
Anyway, there are multiple solutions, but here's what worked for me in Magento 1.9 after many hours of research. This originally built upon Mike's answer above, but swaps out file_get_contents for cURL since the previous function will usually give you http wrapper errors depending on your server config.
Create your own module by Creating a folder /app/code/local/YourVendorName/ValidateCaptcha/
In your new ValidateCaptcha folder, add a Model folder with a Customer.php file. This will be used to override the core Customer.php file provided by Magento.
Copy & Paste this code:
<?php
class YourVendorName_ValidateCaptcha_Model_Customer extends Mage_Customer_Model_Customer {
/**
* Validate customer attribute values.
*
* @return bool
*/
public function validate()
{
// This section is from the core file
$errors = array();
if (!Zend_Validate::is( trim($this->getFirstname()) , 'NotEmpty')) {
$errors[] = Mage::helper('customer')->__('The first name cannot be empty.');
}
if (!Zend_Validate::is( trim($this->getLastname()) , 'NotEmpty')) {
$errors[] = Mage::helper('customer')->__('The last name cannot be empty.');
}
if (!Zend_Validate::is($this->getEmail(), 'EmailAddress')) {
$errors[] = Mage::helper('customer')->__('Invalid email address "%s".', $this->getEmail());
}
$password = $this->getPassword();
if (!$this->getId() && !Zend_Validate::is($password , 'NotEmpty')) {
$errors[] = Mage::helper('customer')->__('The password cannot be empty.');
}
if (strlen($password) && !Zend_Validate::is($password, 'StringLength', array(6))) {
$errors[] = Mage::helper('customer')->__('The minimum password length is %s', 6);
}
$confirmation = $this->getPasswordConfirmation();
if ($password != $confirmation) {
$errors[] = Mage::helper('customer')->__('Please make sure your passwords match.');
}
$entityType = Mage::getSingleton('eav/config')->getEntityType('customer');
$attribute = Mage::getModel('customer/attribute')->loadByCode($entityType, 'dob');
if ($attribute->getIsRequired() && '' == trim($this->getDob())) {
$errors[] = Mage::helper('customer')->__('The Date of Birth is required.');
}
$attribute = Mage::getModel('customer/attribute')->loadByCode($entityType, 'taxvat');
if ($attribute->getIsRequired() && '' == trim($this->getTaxvat())) {
$errors[] = Mage::helper('customer')->__('The TAX/VAT number is required.');
}
$attribute = Mage::getModel('customer/attribute')->loadByCode($entityType, 'gender');
if ($attribute->getIsRequired() && '' == trim($this->getGender())) {
$errors[] = Mage::helper('customer')->__('Gender is required.');
}
// additional reCAPTCHA validation
// this should actually be in it's own function, but I've added
// it here for simplicity
// Magento uses this method for a few different requests, so make
// sure it's limited only to the 'createpost' action
$action = Mage::app()->getRequest()->getActionName();
if ( $action == 'createpost' ) { // restrict to the registration page only
$captcha = Mage::app()->getRequest()->getPost('g-recaptcha-response', 1);
if ( $captcha == '' ) {
// if the field is empty, add an error which will be
// displayed at the top of the page
$errors[] = Mage::helper('customer')->__('Please check the reCAPTCHA field to continue.');
} else {
$secret = 'your-secret-key-goes-here';
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $captcha . '&remoteip=' . $_SERVER["REMOTE_ADDR"];
$ch = curl_init();
// if you're testing this locally, you'll likely need to
// add your own CURLOPT_CAINFO parameter or you'll get
// SSL errors
curl_setopt( $ch, CURLOPT_URL, $url );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec( $ch );
$result = json_decode( $response, true );
if ( trim( $result['success'] ) != true ) {
// Add reCAPTCHA error
// This will be shown at the top of the registration page
$errors[] = Mage::helper('customer')->__('reCAPTCHA unable to verify.');
}
}
}
// now return the errors with your reCAPTCHA validation as well
if (empty($errors)) {
return true;
}
return $errors;
}
}
Now add an etc folder to your module and create a config.xml with the following:
<?xml version="1.0"?>
<config>
<modules>
<YourVendorName_ValidateCaptcha>
<version>1.0</version>
</YourVendorName_ValidateCaptcha>
</modules>
<global>
<models>
<customer>
<rewrite>
<customer>YourVendorName_ValidateCaptcha_Model_Customer</customer>
</rewrite>
</customer>
</models>
</global>
</config>
Next you'll need to add the JS to your theme head. Under app/design/frontend/default/YOURTHEME/template/page/html/head.phtml add this right at the end. If you don't have this file, copy it from the base files. Don't overwrite base files, though. Always make your own!
<?php
/* reCAPTCHA */
if ( strpos( Mage::helper('core/url')->getCurrentUrl(), 'account/create') != false ) { ?>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php } ?>
Now in app/design/frontend/default/YOURTHEME/template/persistent/customer/form/register.phtml add this right before the button-set div near the bottom:
<div class="g-recaptcha" data-sitekey="your-site-key-goes-here"></div>
<span id="captcha-required" style='display:none; color:#ff0000'><?php echo $this->__('Please Fill Recaptcha To Continue'); ?></span>
Almost done! Now just register your new module by creating a app/etc/modules/YourVendorName/ValidateCaptcha.xml with the following:
<?xml version="1.0"?>
<config>
<modules>
<YourVendorName_ValidateCaptcha>
<active>true</active>
<codePool>local</codePool>
</YourVendorName_ValidateCaptcha>
</modules>
</config>
Replace YourVendorName throughout with whatever you'd like. Your final structure should be something like:
- app
- code
- local
- YourVendorName
- ValidateCaptcha
- etc
config.xml
- Model
Customer.php
- design
- frontend
- default
- YOURTHEME
- template
- customer
- form
register.phtml
- page
- html
head.phtml
- persistent
- customer
- form
register.phtml
- etc
- modules
YourVendorName_ValidateCaptcha.xml
I used recaptcha in contact form..
<form action="<?php echo Mage::getUrl('mcrecaptcha/index/save'); ?>" id="contactForm" method="post" onSubmit="return checkcaptcha() ;">
<ul class="form-list">
<li class="fields">
<div class="field">
<div class="input-box">
<input placeholder="Name" name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
</div>
</div>
<div class="field">
<div class="input-box">
<input placeholder="Email" name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email contact_us_margin_top" type="text" />
</div>
</div>
</li>
<li>
<div class="input-box">
<input placeholder="Telephone" name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text contact_us_margin_top" type="text" />
</div>
</li>
<li class="wide">
<div class="input-box">
<textarea placeholder="Comment" name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text contact_us_margin_top" cols="5" rows="3" style="width:100%;"></textarea>
</div>
</li>
<li id="rcode">
<div class="captcha">
<div class="g-recaptcha contact_us_margin_top" data-sitekey="6Ldi8xsUAAAAAHsK15YxKsdhIn6lGk-RUIk222-f"> </div>
</div>
<div class="buttons-set contact_us_margin_top">
<input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
<button type="submit" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button" onClick="_gaq.push(['_trackEvent', 'Submit', 'contacts click','Contact Us'])"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button>
</div>
<span class='captcha-error'><?php echo Mage::helper('contacts')->__('Please check the the captcha form.') ?></span>
</li>
</ul>
</form>
<script>
function checkcaptcha()
{
if((jQuery('#g-recaptcha-response').val())=='')
{
jQuery('.captcha-error').css('display','block');
return false;
}
else
{
jQuery('.captcha-error').css('display','none');
}
}
</script>
To validate captcha, create a save controller for saving your form values and also the validation.
namespace Mike\SampleModule\Controller;
class Save extends \Magento\Framework\App\Action\Action
{
/**
* @var Google reCaptcha Options
*/
private static $_siteVerifyUrl = "https://www.google.com/recaptcha/api/siteverify?";
private $_secret;
private static $_version = "php_1.0";
/**
* Save Form Data
*
* @return array
*/
public function execute()
{
$captcha = $this->getRequest()->getParam('g-recaptcha-response');
$secret = "<--your secret key-->"; //Replace with your secret key
$response = null;
$path = self::$_siteVerifyUrl;
$dataC = array (
'secret' => $secret,
'remoteip' => $_SERVER["REMOTE_ADDR"],
'v' => self::$_version,
'response' => $captcha
);
$req = "";
foreach ($dataC as $key => $value) {
$req .= $key . '=' . urlencode(stripslashes($value)) . '&';
}
// Cut the last '&'
$req = substr($req, 0, strlen($req)-1);
$response = file_get_contents($path . $req);
$answers = json_decode($response, true);
if(trim($answers ['success']) == true) {
// Captcha Validated
// Save Form Data
}else{
// Display Captcha Error
}
}
}
Make sure you have replaced the site key and secret key in the above sample codes.
NID,
Your reCaptcha script snippit looks like it will work but clarify is it entered into the Magento's source head.phtml ? (or the form.phtml ?) to be placed Right below outside of Magento default pre PHP in green type because its a .
Question when entering especially php is it regular practice to enter it after that immediate php comments section that Magento places in the top for most of their template source pages like this example below?
Magento Disclaimer code here in php tags. PLACE THE RECAPTCHA HERE snippit script here ?
Also what makes this reCaptcha response verification code in this video below more catered for Magento's structure of methods: This tutorial uses on the first line the $reCaptcha = $_POST line ?
Last Question alternative: What if i use the php version to do this reCaptcha response verification would php code snippit be entered after the top magento default template green comments section of php like this
Some code i dont want messages appearing on front end because default contactForm already gives its red alerts if user doesnt enter all info it will say below each field, I just want to get reCaptcha to work for this contactForm. But in a way that I will understand for future use too. Your way is created by yourself as a developer or programmer?
