Problem with custom anti spam code from cookbook section of help

Support Forms & Blueprints
1

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?
      options:
        alaska: 32
        oklahoma: 40
        california: 48
      validate:
        required: true
        pattern: "^oklahoma$"
        message: Not quite, try that math again.

No errors but the output of that code is just

32
40
48

The rest of the form is ok.

Here is the whole form, which was supplied by bigpic

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

@hsweet, Theme bigpic does not seem to exist…

3

Sorry, it’s Big Picture https://github.com/tranduyhung/grav-theme-big-picture

4

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…

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

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.