Antispam captcha with checkbox?

Hi everyone,

Do you think this checkbox are enough to avoid spam?

http://africa54.webflow.com/contacto

Thanks

1 Like

Hey not a bad idea! It’s worth checking. Although it seems like radio button would work better?

Hi Sergie,

Radio buttons for any reason?

Cheers

With the checkboxes you can select all of the options and pass the “test”. With radio buttons you have to choose the “right one”. Just a thought

You are rigth. It’s better.
Thanks for your comments.

Opss, I have have tested it now and doesn´t work. The right option is set as required but the form is submitted anyway. Any idea?
The public link is: https://webflow.com/design/africa54?preview=9a06112d99e34d2faeb0e201c228a8ec
Page: Contacto

What you set as required is your radiobutton (group), which means it will be enough if one is selected. It has nothing to do with its each label’s value.

Hi pastiwibawa, thats right, the attribute required works with any radio button in a group. Even if you change the group name for every radio button, choosing all the buttons the form is submitted.

Oh no my plan failed! I had a hunch it wouldn’t work. Maybe there’s a simple javascript captcha library you can embed into your form element… Any ideas @pastiwibawa

Hi @thesergie would be very nice too a slide to activate the submit button. It´s easy to use and could be very stylish

Hi @rafagama54, @thesergie. Things like this which done with client-side script, people can pass it easily, as I believe you knew that. But here is very simple solution that will push ‘human’ to chose right answer (radiobutton).

@rafagama54 delete your existing radiobutton and use this instead: copy-paste code below to Embed thingy in webflow.

<label class="humano">Are you human? Please check 20 + 5</label>
<div class="w-radio radio">
<input class="w-radio-input" id="radio" type="radio" name="radio" value="Radio" data-name="Radio" onClick="alert('wrong answer!');document.getElementById('radio').checked=false;">
<label class="w-form-label" for="radio">82</label>
</div>
<div class="w-radio radio">
<input class="w-radio-input" id="radio-2" type="radio" name="radio" value="Radio 2" data-name="Radio" onClick="alert('wrong answer!');document.getElementById('radio-2').checked=false;">
<label class="w-form-label" for="radio-2">53</label>
</div>
<div class="w-radio w-clearfix radio">
<input class="w-radio-input" id="radio-3" type="radio" name="radio" value="Radio 3" data-name="Radio" required="required" onClick="alert('right answer!');">
<label class="w-form-label" for="radio-3">25</label>
</div>

If you don’t like the alert box you can delete it or you may want to replace with something more fancy as you can find here jQuery Alert | How to use Alert box in jQuery with code and running example - Tutorial

Cheers

3 Likes

Hi @pastiwibawa works like a charm! Just I have to stylish better and simple…
Many thanks!

Pasti you’re a beast! :thumbsup:

So I added this to a site and it seems it did cut down on spam… even though a live user can easily by pass. Guess a spam bot can’t select the correct answer? Real captcha sure would be nice.

Seems this captcha doesn’t work on mobile, any idea why ?

Any other solution for captcha ? Definitely need this