1

I set up a custom form template using Sprout Forms and added {{ craft.sproutInvisibleCaptcha.protect() }} inside the <form> tag.

I can see there are several captcha tags added by the plugin, but as I am using AJAX submission:

  • How can I make it works using this submission method?
  • How do I handle redirect to my 'redirect' location?

I did these tests:

  • Prevent a form from being submmitted if a user does not have JavaScript enabled ;
  • Block form submissions by robots who auto-fill all of your form fields ;
  • Require minimum time to fill out your form ;

All of these tests have failed, spam haven't been caught.


This is the captcha field inside custom Sprout Form template:

{{ craft.sproutInvisibleCaptcha.protect() }}
<input type="hidden" name="redirectOnFailure" value="{{ craft.request.getUrl() }}">

And this is the AJAX post inside JS script:

var postUrl  = 'sproutForms/entries/saveEntry',
    formData = {
    action: postUrl,
    handle: 'test',
    fields: {}
};

formData['fields[minPrice]'] = $scope.results.minPrice;
formData['fields[maxPrice]'] = $scope.results.maxPrice;

formData = $.param(formData);

$.ajax({
    type     : 'POST',
    url      : postUrl,
    data     : formData,
    dataType : 'json',
    encode   : true
});
  • I have not used the plugin yet but his spam protection does not seem to be too complex. Is creating your own protection no option for you? Do you use a custom controller or only craft logic? – Robin Schambach Oct 17 '17 at 6:29
  • Sprout Invislbe Captcha is a great plugin that combine a set of smart SPAMs protections out of the box. It works fine without AJAX, using Sprout Forms plugin, but perhaps I'm missing something to make it works with AJAX... Of course I'll investigate an home-made solution if I finally can't handle with this one. Thanks! – Romain Poirier Oct 17 '17 at 8:14
  • Could you provide more code? You should show us your AJAX request.. otherwise we can't know if you messed up your routing or something like that. Do you use a custom controller and link you request directly to it? Because you skip the validation process if you do that – Robin Schambach Oct 17 '17 at 8:52
  • Code example added. I'm not using a custom controller, following the Sprout Forms and Sprout Invisible Captcha documentations. – Romain Poirier Oct 17 '17 at 9:54
  • As I thought... it seems like your formData does not even contain all the required fields from sproutForms. The plugin injects your form with several fields -> it adds much content to the form but you only send 2 of them to the plugin -> the plugin does not recognize the protection. you'll need to send all fields in your ajax request. Make a $('#formId').serialize(); or look for every single field in your form manually. – Robin Schambach Oct 17 '17 at 12:51
3
+50

Based on your code - and our comments - you need something like this:

<form id="someFormId">
    <input type="hidden" name="action" value="sproutForms/entries/saveEntry">
    <input type="hidden" name="handle" value="test">
    <input type="hidden" name="redirectOnFailure" value="{{ craft.request.getUrl() }}">
    <!---some more fields-->
    <button type="button" id="sendRequest" value="send">
</form>

and your javascript like

$("#sendRequest").click(function(){
    var formData = $("#someFormId").serialize();
    //proceed with your ajax request 
});

reason: The Plugin checks all your variables in your $_POST request. Depending on the keys in this array it checks for spam. In your request you send none of those fields -> the plugin validation does not trigger. You can check which fields are injected with the {{ craft.sproutInvisibleCaptcha.protect() }} function and add them manually in your request as well but it's easier to just serialize the form. Maybe you have to play around with the action url. I'm used to craft 3 since two months and it could be I messed up the exact parameter in a serialize for craft2

  • Thank you! I refactored my AngularJS form, using jQuery serialize() and the same hidden fields as you suggested: now it works! I thought that if Sprout Invisible Captcha fields values were not sent, the form would not save. But as you explained, they have to be sent to enable the Sprout Invisible Captcha features. Regarding how to handle redirect, I simply add something like window.location.replace($('[name="redirectOnFailure"]').val()) if data.success is false inside the AJAX submission. – Romain Poirier Oct 17 '17 at 14:05
  • glad I could help you... btw you can use angular http instead of jquery too. If you are interested take a look at my code here: pastebin.com/T95umm2A this is just a quick example how to make sure craft will recognize the correct routing and put the request in $_POST instead of the regular way – Robin Schambach Oct 17 '17 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.