ハウツー:モジュラーページ中のフォーム
モジュラーページでのフォームの使用
テーマに templates/forms/form.html.twig
ファイルが提供されていないときは、フォームが利用できるようにセットアップされていませんが、心配無用です。 - Grav デフォルトテーマの Antimatter からテンプレートをコピーするだけです:
templates/form.html.twig
templates/formdata.html.twig
次に、 form.md
というページタイプを持つモジュラーフォルダを作ります。
例えば: 01.your-modular-page/_contact/form.md
この form.md
ページは、フォームの定義を含みません。これは、フォームを出力する部分であることを示すだけのものです。
重要:次のように設定してください
---
cache_enable: false
---
モジュラーページの仕組み上、ページのフロントマターヘッダーに、この設定を忘れると、12時間ごとに生成される nonce と一緒に、フォームがキャッシュされます。12時間が経過すると、キャッシュが更新されるまで、フォームは機能を停止します。この設定は、独立したページのフォームでは不要な設定です。
次に、メインのモジュラーページに、フォームヘッダーを追加します、 modular.md
modular.md ページには、 “フルページの” form.md ファイルに書くのと同じように、フォーム定義の全体(fields などを含む)を書いてください。 form.action
フィールドとして、独自のページ path を使用します。
[!Tip]
Form v2.0 では、他のフォームと同様に、モジュラー サブページ内で直接フォームを定義できるようになりました。ただし、フォームが見つからない場合、フォームプラグインは、 ‘現在のページ’ (例えば、フォームのトップレベルのモジュラーページ)を探します。よって、 1.0 の実装方法と完全に下位互換性があります。
例えば:
---
content:
items: '@self.modular'
form:
action: /your-modular-page
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!'
---
フォームヘッダーで、 action
パラメータに、モジュラーページのルーティングを忘れずに追加してください。
上記例のように。
このステップが必要なのは、明示的に form.action
を追加しないと、コードは、通常ページのルーティングを検索しますが、フォームは実際のページではなく、モジュラーのサブページにあるため、 path が間違えており、フォーム送信が失敗するためです。
よって、モジュラーページが、たとえば site.com/my-page
にあるときは、 modular.md
ファイルに form: action: /my-page
を追記してください。
たとえモジュラーページがホームページであっても、ページルーティングを使ってください。たとえば: form: action: /home
実行できる具体例
Deliver スケルトンには、子のチュートリアルを読みながら確認できるモジュラーフォームページが用意されています。
モジュラーページのフォームのトラブルシューティング
フォームのトラブルシューティングする最善の方法は、まず根本に戻って、カスタマイズを1つずつ追加し、何が問題になっているのかを確認することです。
- “通常のフォーム” を作り、それが機能することを確認してから、それをモジュラーフォームに組み込んでみることをおすすめします。
- 必要なファイルがすべて提供されている Antimatter ベースのスケルトンでフォームを動作させてみましょう。
- フォームフィールドが表示されない場合、Assets プラグインがインストールされているなら、それを無効化 / アンインストールしてください。Assets プラグインがモジュラーフォームを動作させなくなるという問題が知られていますが、まもなく修正される予定です。