Jump to content

Captcha in newsletter module


Recommended Posts

Hello!

I am looking for any solution to integrate recaptcha with default prestashop block_newsletter module.

I am using Prestashop 1.6.1.2.

Now the module is  hooked to my front page and is sending a lot of spam and many uncorrect emials are added to database!

 

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 3 weeks later...

As i understand you want to add recaptcha to your Newsletter registration? Whenever someone inputs an email address before registering it you want recaptcha to appear?

Share this post


Link to post
Share on other sites

I ran slidecaptcha on newsletter module on my site after few modifications.

 

I am sure that is not a clean solution but it's work!

 

At first I add manual code in top of my theme footer.tpl file

 

<link rel="stylesheet" href="http://mydomainname/modules/slidecaptcha/views/css/QapTcha.jquery.css" type="text/css" />
<script type="text/javascript" src="http://mydomainname/modules/slidecaptcha/views/js/jquery-ui.js"></script>
<script type="text/javascript" src="http://mydomainname/modules/slidecaptcha/views/js/jquery.ui.touch.js"></script>
<script type="text/javascript" src="http://mydomainname/modules/slidecaptcha/views/js/QapTcha.jquery.js"></script> 

 

 

next I copied slidecaptcha module code to bottom of my footer.tpl file

<script type="text/javascript">
$(document).ready(function(){
    // Simple call
    {if $submitsc =='true'}
        $('.submitMessage, #submitMessage,.contact-form-box .submit').css('display','none');
        {/if}
    // More complex call
    $('.QapTcha').QapTcha({
    autoSubmit : {$submitsc},        
        disabledSubmit : true,
    autoRevert : true,
txtLock    : "{l s='Form Locked, slide to unlock' mod='slidecaptcha'|strip_tags:'UTF-8'}",
txtUnlock  : "{l s='Form Unlocked' mod='slidecaptcha'|strip_tags:'UTF-8'}",
    PHPfile    : "/modules/slidecaptcha/php/Qaptcha.jquery.php"
    });
  });
</script>

The slidecaptcha module is hooked to footer!

 

And finally I add this code to blocknewsletter.tpl


 {include file="$tpl_dir./../../modules/slidecaptcha/views/templates/front/slidecaptcha.tpl"}

I know that this solution is weak  but i can't find other solution! 

Edited by tomputer (see edit history)

Share this post


Link to post
Share on other sites
  • 2 years later...

There are many module on the addons for the reCaptcha. You can contact the module developer to check if they have covered the newsletter as well in the recaptcha. 

(I believe most the recaptcha covers login/registration/contact us page so you need to check the developer to newsletter section).

 

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 2 weeks later...
En 2/4/2020 a las 5:13 PM, Knowband Plugins dijo:

There are many module on the addons for the reCaptcha. You can contact the module developer to check if they have covered the newsletter as well in the recaptcha. 

(I believe most the recaptcha covers login/registration/contact us page so you need to check the developer to newsletter section).

 

 

I think the recaptcha must be active for default in prestashop to avoid spam problems. We have to pay for basic things :-(

  • Like 1

Share this post


Link to post
Share on other sites

No problem and add recaptcha to templates and modules.
Always put before the button code:

<div class="g-recaptcha" data-sitekey="you google key" style="margin-bottom: 10px; margin-top: 12px;"></div>
<button .....

And add the code to the ./themes/your theme name/templates/_partials/head.tpl file at the very bottom:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

 

Share this post


Link to post
Share on other sites
  • 1 month later...
On 4/15/2020 at 5:23 PM, D. Tengler said:

No problem and add recaptcha to templates and modules.
Always put before the button code:


<div class="g-recaptcha" data-sitekey="you google key" style="margin-bottom: 10px; margin-top: 12px;"></div>
<button .....

And add the code to the ./themes/your theme name/templates/_partials/head.tpl file at the very bottom:


<script src="https://www.google.com/recaptcha/api.js" async defer></script>

 

 

On 4/15/2020 at 5:29 PM, D. Tengler said:

You can create multiple keys on Google.
And to give each module or page a different key.

Could you kindly give me a few more pointers on how to do this?

I'm setting up my self-taught shop, I like to learn and get by, I also think it would be useful for everyone :)

For example, when you say to put the first code before the button, do you mean (referring to the newsletter form) to put it before the newsletter subscription button?

Thanks

Share this post


Link to post
Share on other sites
On 4/15/2020 at 10:23 AM, D. Tengler said:

No problem and add recaptcha to templates and modules.
Always put before the button code:


<div class="g-recaptcha" data-sitekey="you google key" style="margin-bottom: 10px; margin-top: 12px;"></div>
<button .....

And add the code to the ./themes/your theme name/templates/_partials/head.tpl file at the very bottom:


<script src="https://www.google.com/recaptcha/api.js" async defer></script>

 

Hello,

I am trying to implement this solution, I already pasted the recaptcha script in the head section, that's a no brainer. But when I tried pasting the above class into the button, it's not working as expected.

Here's what I'm trying so far. Lines 9-11 and 18-20.

<div class="block_newsletter">
  <div class="row">
    <h4 class="sub_heading title"><span class="news1">{l s='Get our latest news and special sales' d='Shop.Theme'}</span></h4>
    <div class="block_content">
      <form action="{$urls.pages.index}#footer" method="post">
          <div class="newsletter-form">
            <input
              class="btn btn-primary pull-xs-right hidden-xs-down"
              class="g-recaptcha"
              data-sitekey="mypublickey"
              data-callback='onSubmit'
              name="submitNewsletter"
              type="submit"
              value="{l s='Subscribe' d='Shop.Theme.Actions'}"
            >
            <input
              class="btn btn-primary pull-xs-right hidden-sm-up"
              class="g-recaptcha"
              data-sitekey="mypublickey"
              data-callback='onSubmit'
              name="submitNewsletter"
              type="submit"
              value="{l s='OK' d='Shop.Theme.Actions'}"
            >
            <div class="input-wrapper">
              <input
                name="email"
                type="text"
                value="{$value}"
                placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
              >
            </div>
            <input type="hidden" name="action" value="0">
            <div class="clearfix"></div>
          </div>
          {if $msg}
			<p class="alert {if $nw_error}alert-danger{else}alert-success{/if}">
			  {$msg}
			</p>
		  {/if}
		  <div class="newsletter-message">
              {if $conditions}
                <p>{$conditions}</p>
              {/if}
          </div>
      </form>
    </div>
  </div>
</div>

** 'mypublickey' was replaced.

I believe my template has two inputs because it's one for mobile and one for desktop. But besides that, is the above solution correct? Can you give some pointers?

Edited by Isaul
gammar and typos (see edit history)

Share this post


Link to post
Share on other sites

Can't you even copy the text?

Always insert <div !!! 

!!! <div class="g-recaptcha" data-sitekey="you google key" style="margin-bottom: 10px; margin-top: 12px;"></div> !!!

 

and not to input etc.

??? input .....class="g-recaptcha" data-sitekey="mypublickey" ???

<div class="block_newsletter">
  <div class="row">
    <h4 class="sub_heading title"><span class="news1">{l s='Get our latest news and special sales' d='Shop.Theme'}</span></h4>
    <div class="block_content">
      <form action="{$urls.pages.index}#footer" method="post">
          <div class="newsletter-form">
            <div class="g-recaptcha" data-sitekey="you google key" style="margin-bottom: 10px; margin-top: 12px;"></div>
            <input
              class="btn btn-primary pull-xs-right hidden-xs-down"
              data-callback='onSubmit'
              name="submitNewsletter"
              type="submit"
              value="{l s='Subscribe' d='Shop.Theme.Actions'}"
            >
            <input
              class="btn btn-primary pull-xs-right hidden-sm-up"
              data-callback='onSubmit'
              name="submitNewsletter"
              type="submit"
              value="{l s='OK' d='Shop.Theme.Actions'}"
            >
            <div class="input-wrapper">
              <input
                name="email"
                type="text"
                value="{$value}"
                placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
              >
            </div>
            <input type="hidden" name="action" value="0">
            <div class="clearfix"></div>
          </div>
          {if $msg}
			<p class="alert {if $nw_error}alert-danger{else}alert-success{/if}">
			  {$msg}
			</p>
		  {/if}
		  <div class="newsletter-message">
              {if $conditions}
                <p>{$conditions}</p>
              {/if}
          </div>
      </form>
    </div>
  </div>
</div>

 

Edited by D. Tengler (see edit history)

Share this post


Link to post
Share on other sites

Thank you for responding.

I already tried that, but still it didn't stop me from hitting the subscribe button and getting the 'verification email has been sent'. It shouldn't let me hit the 'Subscribe' button unless I pass the 'I'm not a robot' check. No?

image.png.20fb550e26e7c98f6b0294123f98fd06.png

I was looking at Google documentation, and as far as I can understand, I'm still not getting the user’s response token.

This is how it is implemented.

		<form action="{$urls.pages.index}#footer" method="post">
          <div class="newsletter-form">
          	<div class="g-recaptcha" data-sitekey="*********-************" style="margin-bottom: 10px; margin-top: 12px;"></div>
            <input
              class="btn btn-primary pull-xs-right hidden-xs-down"
              name="submitNewsletter"
              type="submit"
              value="{l s='Subscribe' d='Shop.Theme.Actions'}"
            >
            <input
              class="btn btn-primary pull-xs-right hidden-sm-up"
              name="submitNewsletter"
              type="submit"
              value="{l s='OK' d='Shop.Theme.Actions'}"
            >
            <div class="input-wrapper">
              <input
                name="email"
                type="text"
                value="{$value}"
                placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
              >
            </div>
            <input type="hidden" name="action" value="0">
            <div class="clearfix"></div>
          </div>
          {if $msg}
			<p class="alert {if $nw_error}alert-danger{else}alert-success{/if}">
			  {$msg}
			</p>
		  {/if}
		  <div class="newsletter-message">
              {if $conditions}
                <p>{$conditions}</p>
              {/if}
          </div>
		</form>

And this is how it was implemented on the end of 'head.tpl' file.

<head>
  ......
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("newsletter-form").submit();
       }
     </script>    
  </head>

 

Share this post


Link to post
Share on other sites

Thanks for the help, I was able to add the box and it seems to work, only I have a problem.

It's not blocking my newsletter subscription button.
It doesn't matter if you tick the captcha box or not.

 

 

shop.jpg

  • Like 1

Share this post


Link to post
Share on other sites
  • 6 months later...

Anyone got any solution yet? This is really vital because hackers can easily target this. And, yes, this feature should be default to any kind of eCommerce software. Protection from hacking is very basic now a days. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More