Can't get form to display on modular page

Support
1

I was following this page (https://learn.getgrav.org/16/forms/forms/how-to-forms-in-modular-pages) and some other forum posts on the internet to add a simple form to my modular page, but I can’t seem to figure out how to make it work.

I would expect the “subscribe” page to be shown below the “about” page

This is my current setup:

My “pages” folder:
.
└── 01.home
├── 01._home
│ └── text.md
├── 02._about
│ └── text.md
├── 03.subscribe
│ └── form.md
└── modular.md

And this is what’s inside “modular.md” and “form.md” respectively:

 ---
 title: Home
 body_classes: modular
 content:
   items: '@self.modular'
---

---
title: Subscribe
cache_enable: false
form:
action: /home
name: my-nice-form
fields:
    -
        name: name
        label: Name
        placeholder: 'Enter your name'
        autofocus: 'on'
        autocomplete: 'on'
        type: text
        default: test
buttons:
    -
        type: submit
        value: Submit
process:
    -
        message: 'Thank you for your feedback!'
---
2

Hi @Ders

I don’t use modular pages in my work, but I see an issue with the form definition in the front matter not being properly indented. Make sure everything after form: is indented:

---
title: Subscribe
cache_enable: false
form:
    action: /home
    name: my-nice-form
    fields:
        -
            name: name
...
3

I got it working after testing out some more ideas.

This is the SOLUTION:

  • The documentation tells you that you can just copy-paste the form.twig.html file from another theme. This isn’t enough information to make it work for modular pages.

  • I copied the form.twig.html file from the main theme (antimatter) and copied it to the /templates/modular/ folder of the theme that I’m using (quark).

  • Then, edit the form file and add some section elements around the current content with AT LEAST the class “section modular-text”. This results in the following file for me (with some other layout fixes):

<section class="container grid-lg">
    <div class="columns {{ page.header.image_align|default('align-right') }}">
        <div class="column col-12">
            {% block content %}

                {{ content }}
                {% include "forms/form.html.twig" %}

            {% endblock %}
        </div>
    </div>
</section>

These changes are made based on the predefined modular pages for the Quark theme. If you’re using another theme, open up one of its modular pages and compare to see what you might need for the correct styling.

  • When you’ve edited this, you can use the “Add Modular” button on the admin page and select “Form” as the Modular Template.

  • Also pretty important:

In Form v2.0, you can now define the form directly in the modular sub-page just like any other form. However, if not found, the form plugin will look in the ‘current page’, i.e. the top-level modular page for a form, so it’s fully backwards compatible with the 1.0 way of doing things. !!!

I first started by putting the form content in the modular.md page content, but that isn’t necessary anymore, and makes it a lot easier to think about.

1 Like
4

very helpful thanks; my form was spanning the entire page. I don’t quite know how it works yet (applies the col-12 format to the form I assume), but it does…