Problem with custom anti spam code from cookbook section of help

I’ve been trying to set up this bit of code to hopefully reduce the number of unsolicited offers I receive.

My theme is bigpic

This is just cut and paste from help

- name: personality
      type: radio
      label: What is five times eight?
        alaska: 32
        oklahoma: 40
        california: 48
        required: true
        pattern: "^oklahoma$"
        message: Not quite, try that math again.

No errors but the output of that code is just


The rest of the form is ok.

Here is the whole form, which was supplied by bigpic

title: Contact
heading: 'Say Hello.'
    action: /home
    name: contact-form
            name: name
            label: Name
            placeholder: Name
            type: text
                required: true
            name: email
            label: Email
            placeholder: Email
            type: email
                required: true
            name: message
            label: Message
            placeholder: Message
            type: textarea
            rows: 6
                required: true
            name: personality
            type: radio
            label: 'What is five times eight?'
                alaska: 32
                oklahoma: 40
                california: 48
                required: true
                pattern: ^oklahoma$
                message: 'That is not correct'
            type: submit
            value: 'Send Message'
                from: '{{ }}'
                    - '{{ }}'
                subject: '[Contact] Message from {{|e }}'
                body: '{% include ''forms/data.html.twig'' %}'
                fileprefix: contact-
                dateformat: Ymd-His-u
                extension: txt
                body: '{% include ''forms/data.txt.twig'' %}'
            display: thank-you

@hsweet, Theme bigpic does not seem to exist…

Sorry, it’s Big Picture

To follow up on this.

This seems to be a big picture theme issue. It seems to apply to any radio button or checkbox. so It also disables google or turnstyle captchas. Basic captcha is ok since it uses a text box.

The same code works fine on my other grav site which uses the quark theme.

I reported it to the big-picture maintainers on github and was told that this was intentional. (I can’t think of a good reason to disable this basic html feature)

If I comment this bit out (in main.css) or override, it still does not display the label, but it does show the choices correctly.

The author of this HTML template doesn't show the input fields in purpose:

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;

The yaml…

            type: radio
            label: 'What is 2 times three?'
                sex: 24
                drugs: 6
                rock: 18
                roll: 3
                required: true
                pattern: ^drugs$
                message: nope

I don’t think radio and checkbox fields are intentionally disabled by the author of the HTML5UP template. The author used appearance: none to remove default styling and added custom styling for several input types. Unfortunately, not for radio and checkbox fields…

IMHO, the author of Big Picture is a bit too much on the pure end of the implementation.