Add reCAPTCHA to Prestashop Version 1.6.0.14 for FREE

May 17, 2015

Hey guys,

It took me a while to figure out a FREE way to easily Add Google reCAPTCHA to PS v1.6.0.14 as most of the posts in the forums are quite outdated. Most are now PAID solutions.

Therefore I have decided to start this thread to assist anyone else looking for a quick FREE solution.

Step 1) Setup your Google reCAPTCHA Account @ https://www.google.com/recaptcha/intro/index.html

Step 2) Download "EICAPTCHA-MASTER.ZIP" below. To install you will need to do this manually by uploading the ZIP file to your MODULES folder, Extracting it and Renaming it to EICAPTCHA. Bit of a pain I know.

Step 3) Configure your EICAPTCHA Module and enter your PUBLIC KEY and SECRET KEY, SAVE

Step 4) Make a Copy of your "contact-form.tpl" file at "/Themes/YourTheme/contact.tpl"

Step 5) Open "contact.tpl" and find:

<div style="text-align:right;" class="submit">
<button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>

For me it was on Line 141

Directly above this div place the following code:

{if $captcha}
<p>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>
</p>
{/if}

NOTE: Be sure to replace "YOUR_PUBLIC_KEY" with your Google Public Key

Step 6: Save "contact-form.tpl" and upload it to your "theme/yourtheme/" folder via your FTP Program

Final Step: Refresh your browser and test your RECAPTCHA

EDIT: 20/6/15 - Latest EiCaptcha Module 0.4.3 Added

eicaptcha-master.zip

Edited June 20, 2015 by motion2082 (see edit history)

June 4, 2015

Thanks for the awesome module, I have been looking for a free module which provides this facility. Thanks again for giving it for free.

Can you please guide how to implement this recaptcha in the user registration page.

June 4, 2015

sorry I got what I was asking for in the module configuration page. thanks

June 5, 2015

Can you please make this module available for prestashop 1.5

June 8, 2015

@ motion2082

Very nice module but there is a issue.

I have tested this on my test server and the installation with the module and adding the keys went all just fine i added the code and key in contact-form.tpl and the captcha is showing correct on FO.

The problem is that you can send a message without using the captcha so it just bypass the whole captcha module ( because the send button is not hidden ).

It should work like this i think,

The send button should be hidden and will become visible when captcha has verfied succesfully ( correct me if i m wrong )

Hope you can fix this issue.

Regards,

ysco..

Edited June 8, 2015 by ysco (see edit history)

June 20, 2015

@ motion2082

Very nice module but there is a issue.

I have tested this on my test server and the installation with the module and adding the keys went all just fine i added the code and key in contact-form.tpl and the captcha is showing correct on FO.

The problem is that you can send a message without using the captcha so it just bypass the whole captcha module ( because the send button is not hidden ).

It should work like this i think,

The send button should be hidden and will become visible when captcha has verfied succesfully ( correct me if i m wrong )

Hope you can fix this issue.

Regards,

ysco..

Hi ysco,

That's no good, try replacing module with the latest version 0.4.3

eicaptcha-master.zip

Edited June 20, 2015 by motion2082 (see edit history)

June 20, 2015

Can you please make this module available for prestashop 1.5

Give this a try first, download the module for V1.5 below

The eicaptcha-latest version of this module compatible with Prestashop <1.5 is the version 0.3.1 (2015-01-22)

If this fails, follow the instructions below:

In order to make this module work for PS 1.5 you will need to implement ajax calls in the configuration of a module Prestashop version 1.5.

The methods that work very well BUT with the latest version of PrestaShop did not work at all.

After analysis of the code, it appears that the management of ajax requests for prestashop modules such as we know it is not implemented for versions prior to version 1.6.0.3

To correct this, it is necessary to override the function postProcess class AdminController .

To do this properly it is necessary to create an override in the file: override / classes / controller / AdminController.php

with the following contents: (I just picked one of the last view)

<? Php  
class AdminController extends AdminControllerCore {
 
    / **
     *todo Uses redirectAdmin only if! $ This-> ajax
     * / 
    public  function postProcess ( )  { 
        if  ( $ this -> ajax )  {
 
            // Ajax-tab.php from 
            $ action  = Tools :: getValue ( 'action' ) ; 
            // no need to use displayConf () here 
            if  ( ! empty ( $action )  &&  method_exists ( $this ,  'ajaxProcess'  . Tools :: toCamelCase ( $action ) ) ) 
                return  $this -> { 'ajaxProcess'  . Tools :: toCamelCase ( $action ) } ( ) ;
 
            // Addition of code to handle the ajax actions    
                  Addition of code to manage the actions ajax modules   
                 
                      
                       
            
            
 
            elseif  ( method_exists ( $ this ,  'ajaxProcess' ) )  { 
                echo  'Calling the process modules finction ajax' ; 
                return  $ this -> ajaxProcess ( ) ; 
            } 
        }  else  {
 
            // Process list filtering 
            if  ( $ this -> filter ) 
                $ this -> processFilter ( ) ;
 
            // If the method named partner after the share exists, call "before" hooks, Then call action method, Then call "after" 
                  Hook before Call process $ return = $ this -> { 'process' . Tools :: toCamelCase ( $ this -> Action ) } ( ) ; // After Hook 
                                
                
                   
                                      
 
                return  $ return ; 
            } 
        } 
    }
 
}

Once the override in place you can make queries easily ajax in the administration of your module.

Here is a code that can serve as a canvas:

<?php  
if  ( ! defined ( '_PS_VERSION_' ) )  	exit ;  
class adminajax extends Module {  	
        public  function __construct ( )  	{  		
               $this -> name  =  'adminajax' ; 
		$this -> tab  =  'others' ; 
		$this -> author  =  'hhennes' ; 
		$this -> version  =  '0.4.3' ; 
		$this -> need_instance  =  0 ;
 
		Parent :: __construct ( ) ;
 
		$ This -> displayName  =  $ this -> l ( Admin ajax ' ) ; 
		$ this -> description  =  $ this -> l ( 'Sample for admin package ajax' ) ; 
	}
 
	public  function install ( ) 
	{ 
		return a parent :: install ( ) ; 
	}
 
	public  function uninstall ( ) 
	{ 
		return Parent :: uninstall ( ) ; 
	}
 
	/ **
	 * Module Configuration
	 * / 
	public  function getContent ( ) 
	{
 
		$ Output  =  'admin ajax Test on different versions of PrestaShop' ;
 
		$ Output  . =  '<script>
         $ (Document) .ready (function () {
	 $ .ajax ({
            url: "' . $ this -> Context -> link -> getAdminLink ( 'AdminModules' ) . '& configures =' . $ this -> name . '"    
            data: {
                ajax: true,
                Action: "Test"
            },
            success: function (msg) {
                alert (msg);
            },
            error: function (msg) {
                console.log ("error");
                console.log (msg);
            }
         });
        });
        </ Script> ' ;
 
		return  $ output ; 
	} 
 / **
 * Actions Ajax modules 
 * /  
 public  function ajaxProcessTest ( ) 
 {  
 echo  'Action ajax done properly :-) ;  
 }  
}

eicaptcha-latest.zip

Edited June 20, 2015 by motion2082 (see edit history)

June 28, 2015

Give this a try first, download the module for V1.5 below

The eicaptcha-latest version of this module compatible with Prestashop <1.5 is the version 0.3.1 (2015-01-22)

If this fails, follow the instructions below:

In order to make this module work for PS 1.5 you will need to implement ajax calls in the configuration of a module Prestashop version 1.5.

The methods that work very well BUT with the latest version of PrestaShop did not work at all.

After analysis of the code, it appears that the management of ajax requests for prestashop modules such as we know it is not implemented for versions prior to version 1.6.0.3

To correct this, it is necessary to override the function postProcess class AdminController .

To do this properly it is necessary to create an override in the file: override / classes / controller / AdminController.php

with the following contents: (I just picked one of the last view)

<? Php  
class AdminController extends AdminControllerCore {
 
    / **
     *todo Uses redirectAdmin only if! $ This-> ajax
     * / 
    public  function postProcess ( )  { 
        if  ( $ this -> ajax )  {
 
            // Ajax-tab.php from 
            $ action  = Tools :: getValue ( 'action' ) ; 
            // no need to use displayConf () here 
            if  ( ! empty ( $action )  &&  method_exists ( $this ,  'ajaxProcess'  . Tools :: toCamelCase ( $action ) ) ) 
                return  $this -> { 'ajaxProcess'  . Tools :: toCamelCase ( $action ) } ( ) ;
 
            // Addition of code to handle the ajax actions    
                  Addition of code to manage the actions ajax modules   
                 
                      
                       
            
            
 
            elseif  ( method_exists ( $ this ,  'ajaxProcess' ) )  { 
                echo  'Calling the process modules finction ajax' ; 
                return  $ this -> ajaxProcess ( ) ; 
            } 
        }  else  {
 
            // Process list filtering 
            if  ( $ this -> filter ) 
                $ this -> processFilter ( ) ;
 
            // If the method named partner after the share exists, call "before" hooks, Then call action method, Then call "after" 
                  Hook before Call process $ return = $ this -> { 'process' . Tools :: toCamelCase ( $ this -> Action ) } ( ) ; // After Hook 
                                
                
                   
                                      
 
                return  $ return ; 
            } 
        } 
    }
 
}

Once the override in place you can make queries easily ajax in the administration of your module.

Here is a code that can serve as a canvas:

<?php  
if  ( ! defined ( '_PS_VERSION_' ) )  	exit ;  
class adminajax extends Module {  	
        public  function __construct ( )  	{  		
               $this -> name  =  'adminajax' ; 
		$this -> tab  =  'others' ; 
		$this -> author  =  'hhennes' ; 
		$this -> version  =  '0.4.3' ; 
		$this -> need_instance  =  0 ;
 
		Parent :: __construct ( ) ;
 
		$ This -> displayName  =  $ this -> l ( Admin ajax ' ) ; 
		$ this -> description  =  $ this -> l ( 'Sample for admin package ajax' ) ; 
	}
 
	public  function install ( ) 
	{ 
		return a parent :: install ( ) ; 
	}
 
	public  function uninstall ( ) 
	{ 
		return Parent :: uninstall ( ) ; 
	}
 
	/ **
	 * Module Configuration
	 * / 
	public  function getContent ( ) 
	{
 
		$ Output  =  'admin ajax Test on different versions of PrestaShop' ;
 
		$ Output  . =  '<script>
         $ (Document) .ready (function () {
	 $ .ajax ({
            url: "' . $ this -> Context -> link -> getAdminLink ( 'AdminModules' ) . '& configures =' . $ this -> name . '"    
            data: {
                ajax: true,
                Action: "Test"
            },
            success: function (msg) {
                alert (msg);
            },
            error: function (msg) {
                console.log ("error");
                console.log (msg);
            }
         });
        });
        </ Script> ' ;
 
		return  $ output ; 
	} 
 / **
 * Actions Ajax modules 
 * /  
 public  function ajaxProcessTest ( ) 
 {  
 echo  'Action ajax done properly :-) ;  
 }  
}

Hi there

I have Installed module for prestashop 1.5

The eicaptcha-latest version of this module compatible with Prestashop <1.5 is the version 0.3.1 (2015-01-22)

and followed your instruction written by you in first post. The New I am not robot recaptcha which ask to match image showed up (Please note I have not done any coding till now as written in above just followed first post instruction)

BUT Problem is as stated by ysco two post above you can send a message without using the captcha so it just bypass the whole captcha module

How to fix this in prestashop 1.5

June 28, 2015

That's not good to hear, you could try contact the developer directly - http://www.h-hennes.fr/blog/

I'm currently working on my own reCAPTCHA module but it's going to be a paid module as there is quite a lot of coding going into it.

Let me know if your interested as I will post the link here when it's complete

Edited June 28, 2015 by motion2082 (see edit history)

June 28, 2015

Hi guys,

Can this module use in login user? How can i do that?

Thanks.

Edited June 28, 2015 by clicknshop (see edit history)

June 29, 2015

I am not robot worked on prestashop 1.5

Solution :- You have choose in back office in module config page Captcha Api Version 2.

June 29, 2015

I need only CAPTCHA challenge: I do not need other lines after that how can I edit them (remove) Since this a visual captcha with photos

CAPTCHA challenge: Please type the distorted words you see in the box, in order and separated by a space. Doing so helps prevent automated programs from abusing this service.

If you are not sure what the words are, either enter your best guess or click the reload button next to the distorted words.

Visually impaired users can click the audio button to hear a set of words that can be entered instead of the visual challenge.

June 29, 2015

I need only CAPTCHA challenge: I do not need other lines after that how can I edit them (remove) Since this a visual captcha with photos

CAPTCHA challenge: Please type the distorted words you see in the box, in order and separated by a space. Doing so helps prevent automated programs from abusing this service.

If you are not sure what the words are, either enter your best guess or click the reload button next to the distorted words.

Visually impaired users can click the audio button to hear a set of words that can be entered instead of the visual challenge.

line where in contact-form.tpl may inserted by this module or some other recaptha module as I have been trying differnet recapcha module from form anyway i have removed lines

June 29, 2015

@ motion2082

Very nice module but there is a issue.

I have tested this on my test server and the installation with the module and adding the keys went all just fine i added the code and key in contact-form.tpl and the captcha is showing correct on FO.

The problem is that you can send a message without using the captcha so it just bypass the whole captcha module ( because the send button is not hidden ).

It should work like this i think,

The send button should be hidden and will become visible when captcha has verfied succesfully ( correct me if i m wrong )

Hope you can fix this issue.

Regards,

ysco..

Hello,

Could you please give me a sample url ?

In the last version, it's not necessary to modify the contact-form.tpl as it's done automaticaly.

The submit button is still visible because, a new verification is added by the module when you click on it.

As you can see in the code : https://github.com/nenes25/eicaptcha/blob/master/eicaptcha.php#L284

On the last prestashop version, everything seems to work fine as you can check in my sample plateform :

http://web.h-hennes.fr/prestashop/prestashop_1-6-0-14/index.php?controller=contact&id_lang=1

Regards,

June 29, 2015

Hi guys,

Can this module use in login user? How can i do that?

Thanks.

Hello,

Unfortunately for now, this module is not working for user login.

It works only for the folowing cases :

Contact Form
Account Creation Form
Send to Friend Form
Product comments form

Everything about this module can be found on github, https://github.com/nenes25/eicaptcha or on my website ( in french ) : http://www.h-hennes.fr/blog/module-recaptcha-pour-le-formulaire-de-contact-prestashop/

Everyone is welcome for contributing on the developpement of this module ;-)

For your problem it shouldn't be too hard, the process will be aproximately the same as on the Account Creation Form.

I'll see if i can implement this fonctionnality in the next module version.

Regards,

June 29, 2015

Can please make your last module work for PS v 1.5 so it can work on

Send to Friend Form

Product comments form

or can you help us with code that need to added to 0.3.1 to make it work on above two forms

June 29, 2015

Hello,

The last version of the module is compatible with Prestashop 1.5
The version 0.3.1 is for version under Prestashop 1.5

In order to make Send to Friend Form or Product comments form working on your prestashop version, all you need to do is to adapt the folowing files with the Prestashop 1.5 datas ( or your specific design datas )

I've written 2 blog articles on how it works, but unfortunately only in french.
If you have face too much problems, i'll check if i can put default files for Prestashop 1.5

Regards,

June 30, 2015

Hello,

The last version of the module is compatible with Prestashop 1.5

The version 0.3.1 is for version under Prestashop 1.5

In order to make Send to Friend Form or Product comments form working on your prestashop version, all you need to do is to adapt the folowing files with the Prestashop 1.5 datas ( or your specific design datas )

https://github.com/nenes25/eicaptcha/blob/master/js/modules/productcomments/productcomments.js

https://github.com/nenes25/eicaptcha/blob/master/js/modules/sendtoafriend/sendtoafriend.js

https://github.com/nenes25/eicaptcha/blob/master/views/templates/modules/productcomments/productcomments.tpl

https://github.com/nenes25/eicaptcha/blob/master/views/templates/modules/sendtoafriend/sendtoafriend-extra.tpl

I've written 2 blog articles on how it works, but unfortunately only in french.

If you have face too much problems, i'll check if i can put default files for Prestashop 1.5

Regards,

Hi there,

Thanks for your help. I have downloaded V 0.4.3 from github and installed on prestashop 1.5.4.1 on localhost. Module was installed correct and captcha came up on contacts us and account creation form. But did not show up on send to friend. I looked at tpl file on github link provided by you and I inserted code (code copied from your file is in red colour )

* @author PrestaShop SA <[email protected]>

* @version Release: $Revision$

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

{capture name=path}{l s='Send to a friend' mod='sendtoafriend'}{/capture}

{include file="$tpl_dir./breadcrumb.tpl"}

<h1>{l s='Send to a friend' mod='sendtoafriend'}</h1>

<p class="bold"><strong>{l s='Send this page to a friend who might be interested in the item below.' mod='sendtoafriend'}.</strong></p>

{include file="$tpl_dir/errors.tpl"}

{if isset($smarty.get.submited)}

<p class="success">{l s='Your email has been sent successfully' mod='sendtoafriend'}</p>

{else}

<a href="{$productLink}" class="img_link"><img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'small_default')|escape:'html'}" alt="" title="{$cover.legend}" /></a>

<a href="{$productLink}" class="product_desc"><br />{$product->name}</a>

</div>

<label for="friend-name">{l s='Friend\'s name' mod='sendtoafriend'}</label>

</p>

<label for="friend-address">{l s='Friend\'s email' mod='sendtoafriend'}</label>

</p>

{* Div d'affichage du captcha( Module EiCaptcha ) *}

</div>

</p>

</div>

</fieldset>

</form>

{/if}

<li><a href="{$productLink}">« {l s='Back to product page' mod='sendtoafriend'}</a></li>

</ul>

</div>

{* Eicaptcha : Pour que le captcha soit bien visible on force la largeur du bloc à 700 px @ToDo : Gérer les cas responsives *}

{literal}

<style>

#send_friend_form {width:700px;}

</style>

{/literal}

{addJsDef stf_secure_key=$stf_secure_key}

{addJsDefL name=stf_msg_success}{l s='Your e-mail has been sent successfully' mod='sendtoafriend' js=1}{/addJsDefL}

{addJsDefL name=stf_msg_error}{l s='Your e-mail could not be sent. Please check the e-mail address and try again.' mod='sendtoafriend' js=1}{/addJsDefL}

{addJsDefL name=stf_msg_title}{l s='Send to a friend' mod='sendtoafriend' js=1}{/addJsDefL}

{addJsDefL name=stf_msg_required}{l s='You did not fill required fields' mod='sendtoafriend' js=1}{/addJsDefL}

For js file in sendtofriend folder it was emply so i copied everything from your js file on github saved But capcha did not show up how to make this worik

I did not test on product comment because I have disabled product comment on my site. I would like to have captcha on send to friend.

June 30, 2015

Hello,

I've check on prestashop 1.5.4.1, and it changes a bit from the current 1.6 version.
There is no js files for the module sendtofriend.

But it's not too complicated to add the captcha, you have to create a file in themes/default/modules/sendtoafriend/sendtoafriend-extra.tpl ( replace default by the theme your site is using )
Then juste paste the folowing content in this file.

<script text="javascript">
{literal}
$('document').ready(function(){
	$('#send_friend_button').fancybox({
		'hideOnContentClick': false
	});

	$('#sendEmail').click(function(){
		var datas = [];
		$('#fancybox-content').find('input').each(function(index){
			var o = {};
			o.key = $(this).attr('name');
			o.value = $(this).val();
			if (o.value != '')
				datas.push(o);
		});
		
	//Module Eicaptcha
        if (!grecaptcha.getResponse()) {
			$.ajax({
				method: "POST",
				url: checkCaptchaUrl,
				data: "action=display_captcha_error",
				success: function (msg) {
					$("#send_friend_form_error").html("").html(msg);
				}
				});

			return false;
		}
		if (datas.length >= 3)
		{
			$.ajax({
				{/literal}url: "{$module_dir}sendtoafriend_ajax.php",{literal}
				type: "POST",
				headers: {"cache-control": "no-cache"},
				data: {action: 'sendToMyFriend', secure_key: '{/literal}{$stf_secure_key}{literal}', friend: unescape(JSON.stringify(datas).replace(/u/g, '%u'))},{/literal}{literal}
				dataType: "json",
				success: function(result){
					$.fancybox.close();
				}
			});
		}
		else
			$('#send_friend_form_error').text("{/literal}{l s='You did not fill required fields' mod='sendtoafriend' js=1}{literal}");
	});
});
{/literal}
</script>
<li class="sendtofriend">
	<a id="send_friend_button" href="#send_friend_form">{l s='Send to a friend' mod='sendtoafriend'}</a>
</li>

<div style="display: none;">
	<div id="send_friend_form">
			<h2 class="title">{l s='Send to a friend' mod='sendtoafriend'}</h2>
			<div class="product clearfix">
				<img src="{$link->getImageLink($stf_product->link_rewrite, $stf_product_cover, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$stf_product->name|escape:html:'UTF-8'}" />
				<div class="product_desc">
					<p class="product_name"><strong>{$stf_product->name}</strong></p>
					{$stf_product->description_short}
				</div>
			</div>
			
			<div class="send_friend_form_content">
				<div id="send_friend_form_error"></div>
				<div class="form_container">
					<p class="intro_form">{l s='Recipient' mod='sendtoafriend'} :</p>
					<p class="text">
						<label for="friend_name">{l s='Name of your friend' mod='sendtoafriend'} <sup class="required">*</sup> :</label>
						<input id="friend_name" name="friend_name" type="text" value=""/>
					</p>
					<p class="text">
						<label for="friend_email">{l s='E-mail address of your friend' mod='sendtoafriend'} <sup class="required">*</sup> :</label>
						<input id="friend_email" name="friend_email" type="text" value=""/>
					</p>
					<!-- Module EiCaptcha -->
					<div id="recaptchaSendToAFriend"> </div>
					
					<p class="txt_required"><sup class="required">*</sup> {l s='Required fields' mod='sendtoafriend'}</p>
					
				</div>
				<p class="submit">
					<input id="id_product_comment_send" name="id_product" type="hidden" value="{$stf_product->id}" />
					<a href="#" onclick="$.fancybox.close();">{l s='Cancel' mod='sendtoafriend'}</a> {l s='or' mod='sendtoafriend'} 
					<input id="sendEmail" class="button" name="sendEmail" type="submit" value="{l s='Send' mod='sendtoafriend'}" />
				</p>
			</div>
	</div>
</div>

I've manage to get it works on a basic 1.5.4.1 version.

Regards,

June 30, 2015

Thank you so much. It works with default theme of ps 1.5.4.1

July 6, 2015

I have been fighting this thing for days now. V2 selected in the back-end and It works fine in the contact and registration pages. But no matter what I try, I can not get it to work on the send to a friend or the Product reviews. The pages show up just fine but the no captcha does not show.

I am using PS 1.6.014 and the latest of reCaptcha-0.4.3. I have done exactly everything that is required. I have a test on my machine (xampp) and on a test server and neither one work.

Please help.

Thanks,

Jeff

July 6, 2015

I have been fighting this thing for days now. V2 selected in the back-end and It works fine in the contact and registration pages. But no matter what I try, I can not get it to work on the send to a friend or the Product reviews. The pages show up just fine but the no captcha does not show.

I am using PS 1.6.014 and the latest of reCaptcha-0.4.3. I have done exactly everything that is required. I have a test on my machine (xampp) and on a test server and neither one work.

Please help.

Thanks,

Jeff

Hello,

You need to get the lastest module version ( in which API V2 is the only used )

https://github.com/nenes25/eicaptcha/archive/master.zip

Then you can read the following articles, which explain how to add the captcha on theses modules :

Unfortunalely they are in french ( i send you links with google translate ), i need to write them in english asap.

https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.h-hennes.fr%2Fblog%2F2015%2F06%2F17%2Fprestashop-captcha-commentaires-produit%2F&edit-text=

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.h-hennes.fr%2Fblog%2F2015%2F05%2F22%2Fprestashop-mettre-en-place-un-captcha-sur-le-formulaire-envoyer-a-un-ami%2F

July 6, 2015

Hello,

You need to get the lastest module version ( in which API V2 is the only used )

https://github.com/nenes25/eicaptcha/archive/master.zip

Then you can read the following articles, which explain how to add the captcha on theses modules :

Unfortunalely they are in french ( i send you links with google translate ), i need to write them in english asap.

https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.h-hennes.fr%2Fblog%2F2015%2F06%2F17%2Fprestashop-captcha-commentaires-produit%2F&edit-text=

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.h-hennes.fr%2Fblog%2F2015%2F05%2F22%2Fprestashop-mettre-en-place-un-captcha-sur-le-formulaire-envoyer-a-un-ami%2F

Hi and thanks much for your help and all that you do on this module!!

Ok that got me going but there is still a problem.

The "Send to a Friend" works just fine but the "Product Review" does not. It will let me send without checking the captcha, BUT only the first time. When I try it again it gives me the error that I need to check the captcha, so I check it and it turns green but then it will not send the review. I close it and try it again and all it does now is come up with a error and say that the captcha is not validated.

July 7, 2015

OK i've found the problem.

It only appears when you use captcha on both productcomments and sendtofriend module.
The version 0.4.4 should correct this issue.

https://github.com/n...hive/master.zip

Regards,

July 7, 2015

OK i've found the problem.

It only appears when you use captcha on both productcomments and sendtofriend module.

The version 0.4.4 should correct this issue.

https://github.com/n...hive/master.zip

Regards,

PERFECT!!!

Everything works like a champ now. Again I cant thank you enough for all of the work you are doing with this module and still putting it out there for free. To people like myself who are on a very very low start up budget, this means alot.

Thanks and have a great day!!,

Jeff

August 8, 2015

Many thanks for creating it and for offering it for free, Hervé. Unfortunately, I am able to send without verifying from Send to a Friend, and Product Comments.

I have added following files as per instructions above:

js/modules/productcomments/js/productcomments.js

js/modules/sendtoafriend/sendtoafriend.js

modules/productcomments/productcomments.tpl

modules/sendtoafriend/sendtoafriend-extra-15.tpl & sendtoafriend-extra.tpl

Edited August 8, 2015 by Walrus (see edit history)

August 8, 2015

Many thanks for creating it and for offering it for free, Hervé. Unfortunately, I am able to send without verifying from Send to a Friend, and Product Comments.

I have added following files as per instructions above:

js/modules/productcomments/js/productcomments.js

js/modules/sendtoafriend/sendtoafriend.js

modules/productcomments/productcomments.tpl

modules/sendtoafriend/sendtoafriend-extra-15.tpl & sendtoafriend-extra.tpl

Hello,

In order to let me help you could you please answer the folowing questions :

Could you please tell me the prestashop version ?

Which version of the module do you have ?

Do you use a specific theme ?

Regards,

August 9, 2015

I am using a custom theme. However, it's working today on all of the pages!

Not sure I will keep it though because some tests are too difficult.

I can see users just giving up, so have disabled it in account and product comments.

Is it possible to add a bottom margin? Currently, the Send button is butting against it (see attached).

SUGGESTION

This may involve too much work but having options in Admin after install would be good.

For example, Enable reCAPTCHA on:

[ ] Contact page

[ ] Create Account

[ ] Product Comments

[ ] Send to a Friend

Very minor but consider changing labels in Admin to same as on the Google page:

reCAPTCHA site key

reCAPTCHA secret key

And in above order.

August 10, 2015

Hello,

You can change margin usings css on div #captcha-box

Thanks for your returns, I will try to take your suggestions in consideration for the next module version.

Regards,

August 10, 2015

Thanks that only works in browser dev tools, but not when added to my custom template's CSS, or in eicaptcha.css.

I had asked the theme developer for help and he suggested same fix as you. I added following with no effect:

#captcha-box {

margin-bottom:12px;

margin-left: 6px;

}

Above might work on the create account page but I have disabled it there as I don't want customers to be put off. I don't think it's needed there as there are lots of required fields, which bots will have problems filling (I may be wrong about this).

How are you adding the box to the contact us page? It's not been modified, so there is no div with captcha-box ID to control position. Is that why the above code has no effect?

Thanks.

August 10, 2015

If you add width and height to the div #captcha box on the contact-page, then the margins should be applied.

#contact #captcha box { width:305px; height:80px; margin-top:15px; ...}

August 10, 2015

Do you mean add to contact-form.tpl following:

That doesn't work. I think something is being lost in translation.

It looks to me (not CSS or PHP expert) as if the captcha-box is being added "magically" to the Contact Us page.

With another captcha, which works but didn't stop spammers, I had to add some code to the contact-form.tpl page, and then control it with CSS but there is nothing from eiCaptcha in contact-form.tpl to control.

August 10, 2015

Yes the div is dynamicaly added to the content with jquery ( https://github.com/nenes25/eicaptcha/blob/master/eicaptcha.php#L281 )
But if you add css instructions in your global css file, it shoud works.

August 10, 2015

The rule is ignored if I add to global.css (this is what theme developer also suggested, as I said above). Something unexplainable is preventing it from "sticking."

I just added following to global.css:

#captcha-box {

border: 2px solid red;

}

Result: I see a thin red line but below the captcha box.

August 10, 2015

This problem should be linked to your custom theme, I've done what i've told you, and it works as expected as you can see on the folowing link :

http://web.h-hennes.fr/prestashop/prestashop_1-6-0-14/index.php?controller=contact

#captcha-box { width:305px; height:80px; margin-top:15px; margin-left:10px; border:1px solid #FF0000;}

August 10, 2015

I installed module on another site that uses default theme and the rules stick, so has to be a custom theme problem. Will follow it up with developer. Thanks.

August 12, 2015

Please consider hashing the private key, or both, in Config. For example:

Captcha private key [•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••w1le]

September 8, 2015

Even Prestashop 1.6.1.1 still has no built in CAPTCHA ... ?!

I must retire for the evening with some heavy sedative to consider whether the prestashop architects are worthy of my custom ... really, YHGTBFJ ... no BOT protection what so ever.

October 7, 2015

Hello,

It is working on my prestashop 1.6.1.1 with default theme and V0.4.5 Module Version.
The only thing is that product comment still keep the default prestashop captcha… I do not know why.

One other strange thing is that the captcha is correctly installed and displayed on the contact form on my computer

The problem is that it is not displayed when I visit the contact form from a mobile phone (iPhone).

I have make a test and I have been able to send a message…

It is also impossible for me to have it displayed on the "Send to a Friend Form"

Captcha is diplayed correctly on registration form on booth devices…

Someone have the same problem?

Some help on these issues?

Edited October 7, 2015 by StefArts (see edit history)

October 8, 2015

Hello,

The only thing is that product comment still keep the default prestashop captcha… I do not know why.

As far as i know there is no Prestashop default captcha, so i don't know from where it comes

To add the captcha on both produt comments and send to a friend have you folow the inscrtuctions ?

https://github.com/nenes25/eicaptcha/blob/master/install-productcomments.md

https://github.com/nenes25/eicaptcha/blob/master/install-sendtoafriend.md

Unfortunately i'm not able to test the captcha with an iphone device, but it works with an andoid one :-)

Regards,

October 8, 2015

Thank you very much for your answer.

Yes I have followed the instruction in installing the module.

Please find attached files.

I also join to this answer pictures from mobile and from computer.

In the case you need more files, please let me know

The thing that I'm not understanding is that the register form is showing reCaptcha on both devices (Mobile & Computer) and the contact form is only displaying it on the Computer.

You can see it on the attached pictures

The last picture is the admin panel of ProductComments.

As you can see there is a Captcha activation button for a...

Thank again.

Regards

productcomments.js.txt productcomments.tpl.txt sendtoafriend.js.txt sendtoafriend-extra.tpl.txt

Edited October 8, 2015 by StefArts (see edit history)

October 8, 2015

I have solved Product Comments.

You were right... I was not using standard Product Comment but the module Okom More Info which have an integrated captcha.

Resuming:

Contact form

Computer: Yes

Mobile No

Registration Form:

Computer: Yes

Mobile: Yes

Product Comment:

Computer: Yes

Mobile Yes

Send to a friend:

Computer: No

Mobile: No

Thank you

October 8, 2015

I have solved Send to a Friend Form

Resuming:

Contact form

Computer: Yes

Mobile No

Registration Form:

Computer: Yes

Mobile: Yes

Product Comment:

Computer: Yes

Mobile Yes

Send to a friend:

Computer: Yes

Mobile: Yes

The Mobile contact form issue still here.

I have no idea of how to solve it.

Thank you.

October 8, 2015

OK could you please send me an url so i can check

( in pm if you want )

Regards,

October 8, 2015

Thank you for your fast reply.

I have sent you a PM

Thanks again

October 8, 2015

Solved,

It is now working on all the devices.

Thank you for your help.

Regards.

October 12, 2015

Hello motion2082, herve25, StefArts and Everyone,

I have read this topic starting from Page 1. I understand that there were issues along the way and have since been resolved. Please advise:

(1) What is the latest version of the reCAPTCHA that is workable on Contact form, Registration Form, Product Comment & Send to a Friend, for Desktop, iPad and Andriod Mobile devices?

(2) Where can we find the download link for this latest reCAPTCHA version workable for Desktop, iPad and Andriod Mobile devicces?

(3) Does the latest reCAPTCHA version work for all browsers including IE11 and Microsoft Edge?

I am using 1.6.1.0 and default-bootstrap theme.

Thank you in advance for all your great help!

October 12, 2015

Hello,

You can dowload the latest version on github. Everything works fine.

Juste remember to read how to apply the captcha on the send to à friend and product comments forms.

Regards,

October 13, 2015

Hi herve25,

I have installed it in the path themes/default-bootstrap/modules. I have also gotten the SITE KEY and SECRET KEY.

Pardon me, I am stuck at Step (3): "Configure your EICAPTCHA Module and enter your PUBLIC KEY and SECRET KEY, SAVE"

Please advise how do I configure the EICAPTCHA Module? I cannot find the module at the BO.

Thank you in advance for your great help!

October 13, 2015

Hello,

If you can't find the module in administration you should try to upload the module by FTP.

I guess you have try to install it with ZIP file ?

October 13, 2015

Thank for great sharing
i'm downloading, hope it's works for my site

October 13, 2015

Hello,

If you can't find the module in administration you should try to upload the module by FTP.

I guess you have try to install it with ZIP file ?

Hi,

I follow the steps written in page one of the topic. It said: Step (2) Download "EICAPTCHA-MASTER.ZIP" below. To install you will need to do this manually by uploading the ZIP file to your MODULES folder, Extracting it and Renaming it to EICAPTCHA. Bit of a pain I know.

This is exactly what I did: I upload the zip file to the path themes/default-bootstrap/modules; extract the zip file and rename it to "eicaptcha". Thought I can see the folder "eicaptcha" at the cPanel , but I cannot find the module "eicaptcha" at the BO.

Is there something I did wrongly? Please advise?

Thank you.

October 13, 2015

Hello,

Yes you have done a mistake.
The module should be uploaded in the "modules" directory not in "themes/default-bootstrap/modules"

Regards,

October 13, 2015

Hello,

Yes you have done a mistake.

The module should be uploaded in the "modules" directory not in "themes/default-bootstrap/modules"

Regards,

Hello herve25,

It works perfectly! Thank you for your awesome help!

On a separate note, I tested the "Send to a Friend" but the email landed into the receiver's Spam Folder. How do we prevent the "Send to a Friend" email from being treated as a Spam?

Thank you in advance again!

October 14, 2015

Hello,

If your email arrive in spam it's not linked to the module.
It can depend of various factor ( server reputation, domain name , ect.. )

October 26, 2015

Hi herve25,

I found and installed your module after we started receiving about one spam message per day via our contact form. Thank you very much for making this available!

It seems to be working fine in that the captcha appears everywhere it's supposed to.

At first the spam stopped, but now it's coming back.

I've verified that "I am not a robot" is still appearing on my contact form, on the web and on my Android device (in Chrome). So can the "I am not a robot" be bypassed by a clever spammer?

thanks,

glen

October 26, 2015

Hello Buzzworm,

As far as i know the google recaptcha cannot be bypassed by robots for now.
It may be a real person which is sending spam.

You can watch in your log files from where it comes

Regards,

January 2, 2016

i uploaded that module but nothing happen neither shows any new module in modules of my back office.

January 9, 2016

Para prestahop 1.5.6 la versión que da motion2082 en el post #7 es la que ha funcionado, añadiendo correctamente el no-capcha de google en el formulario y sin necesidad de hacer el override por diversas modificaciones, pero eso sí, seleccionanado la opcion de API v2, como dive Zen_j1.

En este caso, se trata de una web donde hay varios formularios de contacto, con sus controllers especificos para distintas secciones de la web (ya que no se queria la opción desplegable para escoger departamento) y para que el captcha funcione en todos ellos, lo que hay que hacer es duplicar en el archivo eicaptcha.php las lineas

if ($this->context->controller instanceof ContactController)
$contact_form_controller = true;

Cambiando ContactController por el nombre del archivo controller que gestione cada formulario duplicado y el nombre de la variable$ por otra.

Por ejemplo:

else if ($this->context->controller instanceof ContactPdfController)
$contactpdf_form_controller = true;

nosotros hemos cambiado ContactController por ContactPdfController (que el controller que hemos crado para gestionar un segundo formulario de contacto independiente del que vien por defecto en prestashop) y $contact_form_controller por $contactpdf_form_controller

y un poquito más abajo

        if ($page_name == 'contact-form' || $contact_form_controller) {
                    if ( Configuration::get('CAPTCHA_API_VERSION') == 1 )
           return $this->displayCaptchaContactForm();
                    else
                        return $this->displayCaptachContactFormApiV2

Cambiando aquí también $contact_form_controller por el nombre la variable, que hallamos dado anteriormente, en nuestro caso $contactpdf_form_controller.

February 3, 2016

Hi all,

How to make the box responsive??

March 8, 2016

Hi

is it works on multistore? and presta 1.6.1.4? in my shop I can configure module - looks ok. but I don't have it on the front

Edited March 9, 2016 by Marshalc (see edit history)

April 6, 2016

Unfortunately, it doesnt work for my custom theme (Black Hawk), at least when it comes to contact-form. Everything is fine on create account page, though.

Any idea how to fix it? I used latest version of this module with "enable captcha on contact form" option in back office. After turning it on nothing happens.

http://rdwtest1.cba.pl/pl/kontakt

Prestashop 1.6.1.4

Edited April 6, 2016 by sekwoja (see edit history)

April 6, 2016

I believe that there is some problem with controller, because eicaptcha.php in reference to contact form adds only couple of lines written in Javascript (jQuery). And above-mentioned code does nothing more than inputting recaptcha google api by means of JS/jQuery:

$(document).ready(function(){
            
               //Add div where the captcha will be displayed
               $(".submit").before("<div id=\"captcha-box\"></div>");
               
               //Manage form submit
                $("#submitMessage").click(function(){
                    //If no response we display an error
                    if ( ! grecaptcha.getResponse() ) {
                        $.ajax({
                                method : "POST",
                                url : "'._MODULE_DIR_.$this->name.'/eicaptcha-ajax.php",
                                data : "action=display_captcha_error",
                                success : function(msg){
                                    $(".'.$error_class.'").remove();    
                                    $("form.'.$form_class.'").before(msg);
                                }
                            });
                       
                        return false;
                    }
                });
            });

This solution may be helpful for some other users having issues with reCaptcha on Prestashop. So, after hours of tries I gave up and took code delivered by google (this one below) and put it inside my header.tpl.

<script src='https://www.google.com/recaptcha/api.js'></script>

Than I copied and pasted this:

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

into contact-form.tpl in my theme. After couple of tries it turned out that it still doesnt work so I opened contactController.php and added:

else   if   ( ! ( $gcaptcha   =   ( int ) ( Tools:: getValue ( 'g-recaptcha-response' ) ) ) )

$this -> errors [ ]   =   Tools:: displayError ( 'Captcha nie zweryfikowana' ) ;

before last else in line 50 in public function postProccess.

Now it works. I am still wondering what is wrong with EiCaptcha module, because when it comes to create account page it works like a charm. The only one problem is on contact form page.

Edited April 6, 2016 by sekwoja (see edit history)

April 7, 2016

Hello,

I guess that your problem should be linked with your theme.
As I've tested the module on the last prestashop version ( 1.6.1.4 ) et it works well.

You've well analyse it, an html div is dynamicaly added with jquery just before the submit button of the contact form.

Then the folowing code initialize recaptcha.

//Recaptcha CallBack Function
var onloadCallback = function() {grecaptcha.render("captcha-box", {"theme" : "'.$this->themes[Configuration::get('CAPTCHA_THEME')].'", "sitekey" : "'.Configuration::get('CAPTCHA_PUBLIC_KEY').'"});};
</script>';
$js .= '<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl='.Configuration::get('CAPTCHA_FORCE_LANG').'" async defer></script>';

It's almost the same as the one your suggest in your post ;-)

In fact to make it works with another theme, i guess that you just have to change to folowing line :

//Add div where the captcha will be displayed
$(".submit").before("<div id=\"captcha-box\"></div>");

And replace ".submit", with the class of your submit button.

Regards,
Hervé

Edited April 7, 2016 by herve25 (see edit history)

April 27, 2016

Is it just me or this plugin sux ?

I have ps 1.6.0.11

When sending msg it redirect me to thank You msg and when You press f5 it will send the same message You sended before. You can spam someone mail box...

April 30, 2016

Hey guys,

It took me a while to figure out a FREE way to easily Add Google reCAPTCHA to PS v1.6.0.14 as most of the posts in the forums are quite outdated. Most are now PAID solutions.

Therefore I have decided to start this thread to assist anyone else looking for a quick FREE solution.

Step 1) Setup your Google reCAPTCHA Account @ https://www.google.com/recaptcha/intro/index.html

Step 2) Download "EICAPTCHA-MASTER.ZIP" below. To install you will need to do this manually by uploading the ZIP file to your MODULES folder, Extracting it and Renaming it to EICAPTCHA. Bit of a pain I know.

Step 3) Configure your EICAPTCHA Module and enter your PUBLIC KEY and SECRET KEY, SAVE

Step 4) Make a Copy of your "contact-form.tpl" file at "/Themes/YourTheme/contact.tpl"

Step 5) Open "contact.tpl" and find:
<div style="text-align:right;" class="submit">
<button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>
For me it was on Line 141

Directly above this div place the following code:
{if $captcha}
<p>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>
</p>
{/if}
NOTE: Be sure to replace "YOUR_PUBLIC_KEY" with your Google Public Key

Step 6: Save "contact-form.tpl" and upload it to your "theme/yourtheme/" folder via your FTP Program

Final Step: Refresh your browser and test your RECAPTCHA

EDIT: 20/6/15 - Latest EiCaptcha Module 0.4.3 Added

Hi, first of all Thank you for great Module, i have installed successfully. I want to ask you if its possible of course, I also want to place Recaptcha under my Sign in form, where should i paste the code please?

Thank you

Dilshod

April 30, 2016

Hey guys,

It took me a while to figure out a FREE way to easily Add Google reCAPTCHA to PS v1.6.0.14 as most of the posts in the forums are quite outdated. Most are now PAID solutions.

Therefore I have decided to start this thread to assist anyone else looking for a quick FREE solution.

Step 1) Setup your Google reCAPTCHA Account @ https://www.google.com/recaptcha/intro/index.html

Step 2) Download "EICAPTCHA-MASTER.ZIP" below. To install you will need to do this manually by uploading the ZIP file to your MODULES folder, Extracting it and Renaming it to EICAPTCHA. Bit of a pain I know.

Step 3) Configure your EICAPTCHA Module and enter your PUBLIC KEY and SECRET KEY, SAVE

Step 4) Make a Copy of your "contact-form.tpl" file at "/Themes/YourTheme/contact.tpl"

Step 5) Open "contact.tpl" and find:
<div style="text-align:right;" class="submit">
<button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>
For me it was on Line 141

Directly above this div place the following code:
{if $captcha}
<p>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>
</p>
{/if}
NOTE: Be sure to replace "YOUR_PUBLIC_KEY" with your Google Public Key

Step 6: Save "contact-form.tpl" and upload it to your "theme/yourtheme/" folder via your FTP Program

Final Step: Refresh your browser and test your RECAPTCHA

EDIT: 20/6/15 - Latest EiCaptcha Module 0.4.3 Added

Hi, first of all Thank you for great Module, i have installed successfully. I want to ask you if its possible of course, I also want to place Recaptcha under my Sign in form, where should i paste the code please?

Thank you

Dilshod

May 2, 2016

Hello,

If you means in the registration form, you just have to enable the option in the module configuration.
If it's related to the login form it's not yet managed by the module.

Regards,

May 23, 2016

Hi,

I want to add your reCaptcha module to the 'check out' page of the shopping cart? Is that possible?

How would I do it?

Thanks for sharing the code

Cheers,

Michael

Add reCAPTCHA to Prestashop Version 1.6.0.14 for FREE

Recommended Posts

Share this post

Link to post

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

motion2082

sekwoja

herve25

Posted Images

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites