Example for Twig Form

Hi all,
docs say “The easiest way to include a form is to simply include a Twig file”. After figuring out where to store the Twig File (it’s /user/plugins/form/templates/forms), I’m still unable to get it working :frowning: And I’ve also search docs, forum and internet with google but did not find any example of a Twig Forms file. Maybe anyone could supply example(s)? Many thanks

@Kai23, Whether or not using Twig to display a form depends on the use-case of the form. Please share your plans/requiremnt…

After figuring out where to store the Twig File (it’s /user/plugins/form/templates/forms )

By the way, you should never save anything inside a plugin or theme which is not yours. The moment a new release of the plugin/theme gets installed, all your changes will be lost. Only use your own theme, or child theme when using a theme from gpm…

Plan is to have more display options. It seems that the form is always ahown at the bottom of the page. And I did not find information how to have a better styling, e.g. positioning of the input elements not always in a new line etc.

I copied a theme and renamed it so it’s my own theme. But probably I did not understand correct: Frontend Forms | Grav Documentation says I should include “forms/form.html.twig”. I searched the folders and found this file in /user/plugins/form/templates/forms. Would “forms/form.html.twig”. Would “forms/form.html.twig” also search in parts of /user/themes/ ? If so, in which subfolder? Did not find any information in the docs. What do I miss?
Many thanks!

@Kai23, In case you are considering overriding forms/form.html.twig, you might first want to have a look at Reference: Form Field Index | Grav Documentation.

See if field attributes: classes, labelclasses and outerclasses may already fullfill your needs.

Hi @pamtbaau , thanks for all your replies, but I’m now more confused than before :pensive: I try to follow the official docs as much as possible. The recommendations are

  1. The easiest way to include a form is to simply include a Twig file in the template that renders the page where the form is defined.
  2. For example: include "forms/form.html.twig” "

So I am “considering overriding forms/form.html.twig” because as far as I understand that’s the official recommendation?

And as far as I understand, " classes, labelclasses and outerclasses" from your reference
are helpful if I do NOT use Twig for input forms, right? So I’m completely lost now :frowning:

As said in previous post, I just need to have more options for the styling: Form should not be at the end of the page, and styling should be possible (e.g. place label on same line as textbox).

I’m (hopefully) probably not the first one needing this for forms in Grav. Unfortunately I could not find any examples, not for Twig and not for Grav Forms where form is not at the end of the page and with a little style.

So if anyone has an example for such a form in Grav (either via grav properties or via Twig), I would be very grateful. Many thanks!

@Kai23,

thanks for all your replies, but I’m now more confused than before

Great! Confusion is a doorway to new insights… :wink:

So far I’ve mostly been asking questions for clarification because Grav provides a plethora of options with respect to forms. The best option to use depends on the goal/requirement. So far, you’ve mentioned the position of the form and positioning/styling of fields.

docs say “The easiest way to include a form is to simply include a Twig file ”.

That is correct if you really do need to display a form from Twig…

Frontmatter:
However by far the most used option is to create a form definition inside a page’s frontmatter and name the page ‘form.md’ as explained in section Create a simple single form. The form can be tweaked by adding extra classes to the form and form fields and use css to alter the display.
For example, you could use the form’s classes option to change the display of the form into a Grid with two columns and using the fields outerclasses to position each field in rows/columns.

This will adjust the display of a single form defined in a single page.

Twig:
The previous options does not provide the option as to where the form is to be displayed in the page. By default it is at the bottom of the page.

Twig solutions always impacts a single form type, or all forms/fields.

Also Twig can be used in several ways depending on the required solution:

  • For a single form type, eg. a contact form.
    In this case, one can create a new top-level template inside the theme and give it a unique name, eg. user/themes/quark/templates/contact.form.html. Then copy the content of file user/plugins/form/templates/form.html.twig into the new template and reorder the code.
    Every page named contact.md will use the new template.
  • For all form types/fields
    When all forms/fields need the same adjustment, one can override the templates from plugin Form. The overriding template inside the theme should be created inside the same folder hierarchy as the hierarchy in the Form plugin.
    In this case, all pages using form.md or all forms using an overridden field will have the same layout.

Frontmatter + Twig

  • Of course, Twig and Frontmatter do not exclude each other and can be used in concert.

The above are just a few examples of the possibilities and show possible options that can be used to fulfil your needs.

1 Like