[typhoon] Ajax Submission using modular template

[lic0san]

I'm not sure if it's an actual Typhoon issue, or a misconfiguration form my side, but I have difficulties to use the new Ajax Submission mode on the contact form, using a pretty strandard Typhoon modular template. Adding the "xhr_submit: true" line into ./blueprints/modular/contact.yaml (according to documentation) seems to have no effect at all. Adding it to the form's frontmatter instead does have an effect, but the the validation process then replaces the whole modular page by the raw form only, hence with no theming :

In case it might be related, I am using theme inheritance to customize Typhoon (appears to work well beyond that).

[rhukster]

I was able to have a single modular form with out any issues in Typhoon. However, I did have an issue when i tried to add another modular form in the same page. I was able to replicate your issue. Are you doing this?

BTW, this appears to be an issue with Form plugin and is not specific to Typhoon.

[lic0san]

No, I actually only use one modular form in the page... Apart from that, I'm using two plugins - Antispam and LeafletAddress - that inject javascript into the page and might confuse the Form plugin ?

Here is the full frontmatter of my contact form if it helps :

title: Contact
form:
    xhr_submit: true
    name: contact
    action: '#contact'
    inline_errors: true
    fields:
        name:
            label: Name
            display_label: false
            placeholder: 'Votre nom *'
            autocomplete: 'on'
            type: text
            validate:
                required: true
        email:
            label: Email
            display_label: false
            placeholder: 'Votre adresse de courriel *'
            type: email
            validate:
                required: true
        phone:
            label: Phone
            display_label: false
            placeholder: 'Votre numéro de téléphone'
            type: text
        message:
            label: Message
            display_label: false
            placeholder: 'Votre message *'
            type: textarea
            rows: 4
            validate:
                required: true
        human:
            label: 'Êtes-vous humain ?'
            type: text
            placeholder: 'Votre réponse en trois lettres'
            validate:
                type: text
                required: true
                pattern: '(?i)oui'
                message: 'Les trois lettres attendues sont des voyelles.'
    buttons:
        submit:
            type: submit
            classes: 'no-default-style text-white bg-gray-700 hover:bg-primary'
            value: 'Envoyer le message'
    process:
        ip:
            value: 'User IP Address'
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
        email:
            metadata:
                Originating-IP: '{{ uri.ip() }}'
                Human: '{{ browser.ishuman() }}'
            from: '{{ form.value.name|e }} <{{ form.value.email }}>'
            subject: '[ACP] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
        message: 'Votre message est bien envoyé !'
        reset: true
section_classes: 'bg-gray-100 dark:bg-gray-800 py-8 md:py-24'

Side remark : I don't want to use Google or Cloudflare captchas, so I first tried to use the "Basic-Captcha" test... And I still received a lot off spam : robots apparently didn't break a sweat on it. Then, I downgraded it to a dead-simple human verification test with an obvious regexp (just asking "are you human?" and expecting the user to answer "yes" in french) : this is apparently a much greater challenge to the robots, and not a single spam broke through since that day !

[rhukster]

if you only have 1 form on the page, try clearing your cache manually. I found and have fixed a bug (not released yet) in form plugin that is not clearing the cached forms when you change page/frontmatter content. This addressed my issue of the form plugin sending back the wrong response.

[lic0san]

No change after clearing both browser and Grav's cache (using bin/grav cache).

[rhukster]

Can you send me a zip of your site? Might need to put it on some cloud storage and send a link. Send the link to devs@getgrav.org

[rhukster]

Well i tested your site 100% as you sent me:

Just as expected, also tested with invalid humanity check, and failed correctly.

I really think it's some caching issue going on. I suggest you also testing locally with your provided .tar.gz file..

[rhukster]

BTW feel free to try my latest version in Develop branch: https://github.com/getgrav/grav-plugin-form

Have a few modular form XHR fixes in there.. mainly for multiple forms, but could help?

[lic0san]

OK, I'll further investigate caching... Thank you for your time and thorough testing !

[rhukster]

BTW, i've released an updated version of Form plugin with several improvements for modular forms and also ajax submissions.