このエントリーは、a-blog cms Advent Calendar 2017の16日目のエントリーです。
a-blog cmsのフォームはとても強力です。
フロントだけでここまでフォームを柔軟にカスタマイズ出来るCMSはなかなか無いのではないでしょうか？
最高ですね！
通常のフォームはテンプレートに記述することで自由に作成可能なのですが、
レイアウト機能を使ってるとフォームもテンプレートでなくレイアウト側で作りたくなります。
また、イベント情報のページなど毎回テンプレートをカスタマイズして作成するまでもないんだけど、手軽にフォームを作りたいという場合もあると思います。
そんな時は動的フォームというのがあり、エントリー編集画面から作成できますのでこちらを使うと便利です。
素晴らしいですね！
しかし、動的フォームをそのまま使うと先頭がメールアドレスになってしまいますので今回はこれを回避したいと思います。
なにをするかというと、動的フォームのテンプレートのデフォルト項目を追加します。
今回は「メールアドレス」となっている所を「お名前、電話番号、メールアドレス、住所」とします。
これで先頭がメールアドレスというのが回避出来そうです。
また、表示場所も変えてみたいと思います。
先に完成イメージを見てみましょう。
デフォルトで動的フォームを作成するとこのようになります。
これを、こうしたいイメージです。
動的フォームの設定
では、設定から、
まず、エントリーページを見てみます。
標準では動的フォームは表示されていません。
設定を変更します。
「コンフィグ → 機能設定 → 動的フォーム」のチェックをオンにします。
すると「フォーム」という項目が表示されます。
これで動的フォームがつかえます。
これで動的フォームを作成出来るようになりました。
試しに作成してみてください。ページ最初の画像のようにメールアドレスに続き任意の項目が表示されると思います。
テンプレートのカスタマイズ
動的フォームのテンプレートは
themes/system/include/form/以下
ですので自身のテーマに必要な物をコピーします。
今回はform/以下全てコピーしました。
基本的にはフォームのテンプレート記述と同じになります。
必要な物だけカスタムフィールドメーカーで作成すると早いかもしれません。
注意点として、変数とバリデーションの箇所をバックスラッシュでエスケープする必要があります。
<input id="email" name="email" type="email" value="\{email\}">
<!-- BEGIN\ email:validator -->
<p>正しいメールアドレスを入力してください。</p>
<!-- END\ email:validator -->
後は通常フォームと同じく必要なファイルに連動する値を追加します。
themes/my_themes/include/form/input.html
themes/my_themes/include/form/confirm.html
themes/my_themes/include/form/adminbody.txt
themes/my_themes/include/form/body.txt
また、今回はtableを2つに分けていますので構造的には次のように修正します。
themes/my_themes/include/form/input.html
<table>
メールアドレス （固定）
動的フォームのループ
</table>
↓
<h4>お問い合わせの内容をご入力ください。</h4>
<table>
動的フォームのループ
</table>
<h4>お客様情報をご入力ください。</h4>
<table>
お名前（固定）
電話番号（固定）
メールアドレス（固定）
住所（固定）
</table>
カスタマイズはこれで完了です。
動的フォームはメールアドレスが先頭に来るから使いにくいなあと思っている方は試してみてはいかがでしょう？
と、途中で気がつきましたが公式のマニュアルに書いていましたね。。
以上、「動的フォームのデフォルト項目をカスタマイズする」でした。