Form PLugin は、あらゆるタイプのフォームを作成する能力を提供します。これは、フォーム作成キットであり、あなたのページで使用することができます。先に進む前に、Form Plugin まだインストールされていない場合は、bin/gpm installform でインストールすることを忘れないでください。
Form Plugin の動作を理解するために、まず簡単なフォームを作成する方法を説明します。
Form 2.0 より、フォーム名を hidden フィールドとして渡すことが必須になりました。フォームプラグインが提供する forms.html.twig を使っている場合は自動的に処理されますが、テーマやプラグインでデフォルトの forms.html.twig をオーバーライドしている場合は、フォームレンダリングの Twig ファイルに {% include "forms/fields/formname/formname.html.twig" %}を手動で追加する必要があります。
ページにフォームを追加するには、ページを "Form" に設定します。これは管理パネルから行うこともできますし、form.md というページ・ファイル名を付けてることでも設定できます。
例えば、 user/pages/03.your-form/form.md のように作成します。
ファイルの中身は、以下のような内容なります。
---
title: A Page with an Example Form
form:
name: contact-form
fields:
name:
label: Name
placeholder: Enter your name
autofocus: on
autocomplete: on
type: text
validate:
required: true
email:
label: Email
placeholder: Enter your email address
type: email
validate:
required: true
buttons:
submit:
type: submit
value: Submit
reset:
type: reset
value: Reset
process:
email:
from: "{{ config.plugins.email.from }}"
to:
- "{{ config.plugins.email.to }}"
- "{{ form.value.email }}"
subject: "[Feedback] {{ form.value.name|e }}"
body: "{% include 'forms/data.html.twig' %}"
save:
fileprefix: feedback-
dateformat: Ymd-His-u
extension: txt
body: "{% include 'forms/data.txt.twig' %}"
message: Thank you for your feedback!
display: thankyou
---
# My Form
Regular **markdown** content goes here...これは、form.md ファイルの内容を表示したものです。Admin Plugin でこれを行うには、エキスパートモードでページを開き、--- の間の部分をコピーして、Frontmatter フィールドに貼り付けます。
これだけで、ページ内にフォームが表示されます。これは「名前」、「Eメール」、「2つのボタン（投稿ボタンとリセットボタン）からなるシンプルなフォームです。Form プラグインによって提供される利用可能なフィールドに関する詳細な情報は、fields-available をご覧ください。
投稿ボタンをクリックすると以下のプロセスが実行されます。他のアクションを知るには、利用可能なオプションを確認するか、独自のアクションを作成してください。
入力されたメールアドレスに、件名を [Feedback] [name entered] とするメールが送信されます。メールの本文は、使用中のテーマの forms/data.html.twig ファイルに定義されています。
フォームの入力データは、user/data フォルダ内のファイルに作成されます。テンプレートは使用中のテーマの forms/data.txt.twig に定義されています。
渡された情報とともに、サンキューのサブページが表示されます。お礼のページは、フォームを含むページのサブページである必要があります。
メールを正常に送信するために、Email プラグインの設定が正しいかどうか確認ください。
With the release of Form Plugin v2.0, you are now able to define multiple forms in a single page. The syntax is similar but each form is differentiated by the name of the form, in this case contact-form and newsletter-form:
forms:
contact-form:
fields:
...
buttons:
...
process:
...
newsletter-form:
fields:
...
buttons:
...
process:
...You can even use this format for single forms, by just providing one form under forms::
forms:
contact-form:
fields:
...
buttons:
...
process:
...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. For example:
{% include "forms/form.html.twig" %}This will use the Twig template provided by the Form plugin itself. In turn, it will render the form as you have defined in the page, and handle displaying a success message, or errors, when the form is submitted.
There is however a more powerful method of displaying forms that can take advantage of the new multi-forms support. With this method you actually pass a form: parameter to the Twig template specifying the form you wish to display:
{% include "forms/form.html.twig" with { form: forms('contact-form') } %}Using this method, you can choose a specific name of a form to display. You can even provide the name of a form defined in other pages. As long as all your form names are unique throughout your site, Grav will find and render the correct form!
You can even display multiple forms in one page:
# Contact Form
{% include "forms/form.html.twig" with { form: forms('contact-form') } %}
# Newsletter Signup
{% include "forms/form.html.twig" with { form: forms('newsletter-form') } %}An alternative way to display a form is to reference the page route rather than the form name using an array, for example:
# Contact Form
{% include "forms/form.html.twig" with { form: forms( {route:'/forms/contact'} ) } %}This will find the first form from the page with route /forms/contact
You can also display a form from within your page content (for example default.md) directly without that page even having a form defined within it. Simply pass the name or route to the form.
Twig processing should be enabled and page cache should be disabled to ensure the form is dynamically processed on the page and not statically cached and form handling can occur.
---
title: Page with Forms
process:
twig: true
cache_enable: false
---
# Contact Form
{% include "forms/form.html.twig" with {form: forms('contact-form')} %}
# Newsletter Signup
{% include "forms/form.html.twig" with {form: forms( {route: '/newsletter-signup'} ) } %}With previous versions of the Form plugin, to get a form to display in a modular sub-page of your overall modular page, you had to define the form in the top-level modular page. This way the form would be processed and available to display in the modular sub-page.
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.
You can also configure your Modular sub-page's Twig template to use a form from another page, like the examples above.
When using a form defined in a modular sub-page you should set the action: to the parent modular page and configure your form with a redirect: or display: action, as this modular sub-page is not a suitable page to load on form submission because it is not routable, and therefore not reachable by a browser.
Here's an example that exists at form/modular/_form/form.md:
---
title: Modular Form
form:
action: '/form/modular'
inline_errors: true
fields:
person.name:
type: text
label: Name
validate:
required: true
buttons:
submit:
type: submit
value: Submit
process:
message: "Thank you from your submission <b>{{ form.value('person.name') }}</b>!"
reset: true
display: '/form/modular'
---
## Modular Form