Modular form blows up my contact page

Support Forms & Blueprints
1

I’ve been trying to use a simple form in a modular page, with no success.

With the form in modular.md, the page display is wrecked but there was a form. Putting the form in my _contact/form.md file also did not work. I was able to add cache_enable: true ok, it blows up whenever I add the form code.

  • email is working
  • Highlights is the theme
  • I had a working form with a different theme using standard pages
  • Once the page is messed up, it stays that way, even after undoing the change and clearing cache (Hurray for backups)!
title: 'Contact Us!'
media_order: 'pic03.jpg,johnny-automatic-cart-carrying-a-crate.svg'
display_title: true
next_label: Next
list_as_grid: false
cache_enable: true
form:
    action: /home/_contact/ 
    name: contact
    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

correction. I had cache_enabled set to true. setting it to false with no form code is enough to cause the problem.

3

@hsweet,

With the form in modular.md , the page display is wrecked but there was a form.

I cannot reproduce the issue. Adding a from as explained in How to: Forms in modular pages shows a form as expected.

However, the look and feel might not be to your liking…

The theme doesn’t come with a custom modular ‘form’ template and hence the default template from the form plugin is being used.

Next steps:

  • Add necessary classes and styling
  • You might need to add a new templates/modular/form.html.twig to your theme and design it to fit your needs.
4

Thanks. If I understand my issue is more css than anything else? Which makes sense, I still see the page content spilled all over the screen. If that is the case, I might have to dive deeper into grav… Or find another template with a modular form.twig

I tried what the how to suggests, copying from antimatter. There was no formdata.html.twig, but there is form.html.twig.

if your theme does not provide a templates/forms/form.html.twig file, it’s not set up to use forms, but no fear - just copy the form templates from Antimatter, the default Grav theme:

  • templates/form.html.twig
  • templates/formdata.html.twig
5

@hsweet,

Thanks. If I understand my issue is more css than anything else? Which makes sense, I still see the page content spilled all over the screen.

Again, I cannot reproduce this. The existing modules are not being effected by adding a new module /01.home/05._contact/form.md.

Only the layout of the form needs adaptation to the styling of the theme.