Substitute recaptcha in form

Support
1

I’d like to use something different from re-captcha in my form, adding a simple question, like “how much is 3+2 ?”
Is there a system to add this to the code displayed in grav tutorial for creating forms ?
Thanks!

2

Yes, see this cookbook entry on a custoom anti-spam field.

3

Thanks Ole, I’ve seen it, but I have no idea how to merge it in this code

    title:  'Contact Form'

form:
  fields:
    name:
      type: text
      label: Name
      validate:
        required: true
        message: Please enter your name!
    email:
      type: text
      label: Email
      validate:
        type: email
        required: true
        message: Please enter your email address!
    subject:
      type: text
      label: Subject
      validate:
        required: true
        message: Please enter a subject for your message!
    message:
      type: textarea
      label: Message
      validate:
        required: true
        min: 10
        message: Email message needs to be more than 10 characters long!
     

  buttons:
    submit:
      type: submit
      value: Send Email

  process:
    
    email:
      from: "{{ form.value.email }}"
      to: "{{ config.plugins.email.to }}"
      subject: "[Contact] {{ form.value.subject|raw }}"
      body: "{{ form.value.message }}<br /><br />{{ form.value.name }}<br />{{ form.value.email }}"
    message: 'Thank you from contacting us!'
    display: thankyou

At what point do I have to insert your code? And how can I validate it?

4

Here’s an example with it inserted into your form:

title: "Contact Form"
form:
  fields:
    name:
      type: text
      label: Name
      validate:
        required: true
        message: Please enter your name!
    email:
      type: text
      label: Email
      validate:
        type: email
        required: true
        message: Please enter your email address!
    subject:
      type: text
      label: Subject
      validate:
        required: true
        message: Please enter a subject for your message!
    message:
      type: textarea
      label: Message
      validate:
        required: true
        min: 10
        message: Email message needs to be more than 10 characters long!
    skyscraper:
      type: radio
      label: What is five times four?
      options:
        penguin: 12
        seagull: 16
        albatross: 20
      validate:
        required: true
        pattern: "^albatross$"
        message: Not quite, try that math again.
  buttons:
    submit:
      type: submit
      value: Send Email
  process:
    email:
      from: "{{ form.value.email }}"
      to: "{{ config.plugins.email.to }}"
      subject: "[Contact] {{ form.value.subject|raw }}"
      body: "{{ form.value.message }}<br /><br />{{ form.value.name }}<br />{{ form.value.email }}"
    message: "Thank you from contacting us!"
    display: thankyou

It’s used as a normal field, and the name doesn’t really matter - so I’ve just called it “skyscraper”. As explained in the docs, the labels and values should not match, so it now asks the question “What is five times four?”

The underlying values bear no relation to the question, so even though the correct answer is obviously 20 - the underlying value associated with that label is “albatross”. This is also what is validated against, by just checking if the chosen answer contains this string.

It’s very naive, but will generally fool most spambots because they are submitting forms with available values. None of the labels match the values, however, and so bots with naive matching-techniques can’t successfully submit with form with the given values in the form.

1 Like
5

Thanks a million Ole! I’ll definitely give it a try, and I think that a lot of people around here can take advantage from a form template like yours :wink:

1 Like
6

@OleVik
Hi Ole. I have another small problem. In the report of what the sender wrote, it is reported also the value inserted as reply to the test (in Bold in my example).
Example:
Here is the summary of what you wrote to us:

Name: john doe
Email: johndoe@example.com
Message: test message do not reply
What is five times eight?: oklahoma
Please accept our privacy policy: Yes

Is there a system to hide the chosen option?, perhaps using something like “test validated”?
Thanks!

7

Only by customizing the template that sends the email from within your theme, or form:fields:process:body in your FrontMatter. Does the latter still look like "{{ form.value.message }}<br /><br />{{ form.value.name }}<br />{{ form.value.email }}"?

8

This is the code I use after process:

process:
    -
        email:
            from: '{{ form.value.email }}'
            to: '{{ config.plugins.email.from }}'
            subject: '[Contact] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'

I forgot to say I use this form in Gantry 5 templates (zenith, koleti, helium). I don’t know if the problem can be related to |e, maybe it should be |raw

9

Your theme would need to override that template referenced, or use a custom template like it, to customize what is sent. I don’t think Gantry will affect that, but I don’t use Gantry myself.

10

Thanks for your help!