Google recaptcha on forms

  • I had honeypot and askimet but just ended up getting a lot of spam.


    Personally I avoid Google Recaptcha. No need to invite Google into your form submissions.


    It's possible to make your own anti-spam, using combinations of the honeypot field, javascript and other methods.


    I solved spam submissions on one client's contact form by pre-filling the honeypot field with a value, then looking for the string "http" in the textarea field on blur. Only if the string is not found does the honeypot field get cleared via javascript. Pretty much all spam contains links, and the client was never expecting or wanting people to add links to this field.


    This is a highly effective but brutal approach. No spam-bot will clear the honeypot field but populate others. So it's a reverse approach to the intended use of honeypot, but I found it works extremely well if you don't mind culling all messages containing "http".


    But on another site, I used an different approach for member sign-ups. Splitting the form into two pages. The first page uses a standard Perch form, with basic question or two, and javascript-only submit button. The form's action points to second page containing the actual member sign-up form. On the second page, in PHP you examine the POST data, and determine if you trust the submission. You can look for all kinds of things, or ask the user anything on first page, such as "are you a robot?", asking the user to type "no". Or you can ask them any kind of question that is relevant to the purpose of the form, or some easy maths question or anything. I used "what country are you in" for a form expecting submissions from one country only. On the second page, examine the POST data and go from there in how you handle things. You could for example re-direct to a third form for "somewhat untrusted" so they require manual approval for sign-ups.


    So many possibilities to make your own anti-spam methods without using third part services. Spam bots are dumb. It's not hard to out-smart them with very simple questions.

  • I've used the google Recaptcha plugin and while it does work it's not a perfect implementation. The main issue I have with it is the input ID g-recaptcha-response is changed to form1_g-recaptcha-response by Perch. What this means is there's no user feedback to tell a genuine user that they need to complete the recaptcha. I also have warning in my Google dashboard saying that the recaptcha isn't implemented properly, I assume this is caused by the same issue.


    Does anyone know why Perch changes the IDs on forms? I thought maybe it was to identify which forms are which, but even when I have more than one form set up they're all have form1_ added to the IDs. I suppose if there's more than one form on a page? I don't think I've ever tried that.

  • Hi Byron. I just followed the instructions here: https://github.com/ryangittings/mbk-forms for the V2 installation so the only Javascript I've added to the page for the reCapatcha is <script src="https://www.google.com/recaptcha/api.js" defer></script> which brings in https://www.gstatic.com/recapt…uYJ_3zSP/recaptcha__en.js in the head of the page.


    Like I say the reCapatcha works as far as if you don't complete it the message goes to spam and if you do it doesn't and it gets sent. But there's no warning about not filling it in, if a user just ignores it and submits the form as far as they know the message has been sent, where's in reality it's been flagged as spam.


    The g-recaptcha-response element which is supposed to be filled in when the captcha is completed never gets filled in as the ID isn't called g-recaptcha-response as Perch changes it to form1_g-recaptcha-response. I tested this by making this input a normal input not a perch:input and it then got completed when the captcha was completed. But of course it doesn't work as Perch doesn't know it exists and so the Perch honeypot field is never filled in and the form submits and and email is sent even if the captcha isn't completed.


    I've tried before to get the form1_ bit removed somehow while still keeping it a perch:input but can't figure out a way to do it.


    Unless there's something else I'm missing and the ID being changed has nothing to do with it. This is the page it's on: https://anderson-brown.co.uk/contact/

  • I haven't used the v2 captcha in quite a while, but I think you need to use a callback for it to actually update the input value. You could try something like this (Untested though)

    Code
    1. <perch:input type="hidden" id="g-recaptcha-response" class="g-recaptcha-response"/>
    2. <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY" data-callback="renderCallback"></div>
    3. <script>
    4. var renderCallback = function(response) {
    5. var $response = document.querySelector('.g-recaptcha-response');
    6. $response.value = response;
    7. }
    8. </script>
  • I added required="true" to the g-recaptcha-response which seems to have worked.


    When the user clicks submit without ticking the box the field gets shown as required and from there they need to fill it in for it to submit properly.


    What I've found is that the form actually submits when the recaptcha isn't ticked and the message goes straight to spam however once they tick the recaptcha and hit send again the message is sent and they are shown a success message. Not ideal but works ok.


    Code
    1. <perch:input type="hidden" id="g-recaptcha-response" class="g-recaptcha-response" required="true"/>