Antispam captcha with checkbox?

Publishing help General
1

Hi everyone,

Do you think this checkbox are enough to avoid spam?

http://africa54.webflow.com/contacto

Thanks

1 Like
2

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

3

Hi Sergie,

Radio buttons for any reason?

Cheers

4

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

5

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

6

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

7

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.

8

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.

9

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

10

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

11

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
12

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

13

Pasti you’re a beast! :thumbsup:

14

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.

15

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

Any other solution for captcha ? Definitely need this