grav-plugin-form icon indicating copy to clipboard operation
grav-plugin-form copied to clipboard

Form submit without action/redirect/display

Open VincentFericelli opened this issue 5 years ago • 5 comments

I have a form embedded in my custom sidebar and I want the user to stay on the same page after the validation. The problem is that the validation cause the form to display itself replacing the whole page.

Here is the markdown 'pages/modules/subscribe/form.fr.md'

---
title: My contact Form
process:
    markdown: true
    twig: true
form:
    name: contact-form
    fields:
        - name: email
          label: Recevoir toutes les nouveautés directement
          autocomplete: on
          placeholder: Votre e-mail
          type: email

    buttons:
        - type: submit
          value: Valider

    process:
        - save:
            filename: newsLetterFR.csv
            extension: csv
            body: "{{ form.value.email|e }}\n"
            operation: add
---

Maybe the problem is how I integrated the form in 'myThemeDerivatedFromQuark/templates/partials/sidebar.html.twig

<div id="sidebar-subscribe">
{% include "embedded_form.html.twig" with { form: forms('contact-form') } %}
</div>

I tried action: "." , action: "" , action: . , action: without success.

I think the problem comes from 'plugins/form/templates/forms/default/form.html.twig' line 20 '{% set action = form.action ?: page.route ~ uri.params %}'

"form.action" is defaulted to "modules/subscribe" by the calling code. I tried to backtrace the problem but failed miserably...

VincentFericelli avatar Aug 19 '19 19:08 VincentFericelli

You might want to ask this on the forum, since it is not really an issue with Grav. Also it is probably more related to the form plugin that has its own repository.

That said, perhaps the How to: Forms in modular pages might help?

I don't have much experience with forms, but have you tried adding a page parameter to the with part of the include, since form.html.twig sets the default action based on the page.route?

ulab avatar Aug 21 '19 07:08 ulab

You should set the action to the route of the page that contains the sidebar as that is the page you want to end up on.

rhukster avatar Aug 21 '19 20:08 rhukster

I don't know how to get that url, the form is located in a partial template integrated in all the pages of my site.

I tried page.url, but it returns the adress of the generic .md file containing the form.

VincentFericelli avatar Aug 22 '19 18:08 VincentFericelli

That is a little tricky, actions are tied to forms so having different actions on the same form is not currently possible.

Couple of workaround approaches:

  • Use an Ajax form submission (see learn.getgrav.org for example)
  • Submit to a single page, then redirect back to the origin page.

rhukster avatar Aug 30 '19 18:08 rhukster

You could try the redirect action, with this patch applied: https://github.com/getgrav/grav-plugin-form/pull/466 I guess the issue is the modular here, as modular templates set page to the modular child, not the parent. But that is just a guess, I am not sure if I understand the issue correct.

NicoHood avatar Jan 09 '21 16:01 NicoHood