このエントリーは a-blog cms Advent Calendar 2023 1日目の記事です。

お問い合わせフォームのチェックボックスやラジオボタンの項目を簡単に編集したいという要望は多いと思います。このエントリーでは、そのやり方を初心者向けに説明します。例として site テーマの「簡単なアンケート」の部分のチェックボックスとラジオボタンを例に話を進めますが、他のテーマを使っていてもやり方は同じです。

ソースコードを用意したので、ダウンロードして参考にしてみてください。

カスタマイズの順番は下記のとおりです。

1. モジュールIDを作成する
2. 管理画面用のテンプレートを用意する
3. モジュールIDにラベルと値を登録する
4. 表示画面用のテンプレートに値を反映する
5. 表示画面から管理画面のダイアログを表示するボタンをインクルードする
6. ふたつの「テキスト」入力欄を持つカスタムフィールドグループ用のテンプレートを共通化する

モジュールIDを作成する

まずはモジュールIDを作成します。siteテーマの「簡単なアンケート」は
themes/site/contact/form/input.html
にあります。変数名は「弊社を何をきっかけに知りましたか？」が know、「弊社製品について、将来弊社からご連絡を差し上げてもよろしいですか？」が enable_contact となっています。変数名をモジュールIDを呼応させておくと分かりやすいので、ここでは次のふたつのモジュールIDを作成しておきます。

管理画面用のテンプレートを用意する

themes/site/admin/module/ ディレクトリに id-MF_form_know.html というファイルを用意してください。siteテーマでは themes/site/admin/module/field.html からモジュールID別のテンプレートを読み込むようになっています。

id-MF_form_know.html でまずはチェックボックス用のモジュールフィールドを作っていきます。と言ってもやり方は簡単で、カスタムフィールドメーカーで「カスタムフィールドグループ」を選び、

と入力して「グループ生成」をクリックした後に次のふたつのフィールドを生成します。

その内容を id-MF_form_know.html にコピペすると、管理画面の MF_form_know モジュールIDの「カスタム設定」に反映されます。

モジュールIDにラベルと値を登録する

管理画面の MF_form_know モジュールIDの「カスタム設定」から値を次のように登録します。これは、themes/site/contact/form/input.html の 「弊社を何をきっかけに知りましたか？」の4つのチェックボックスのラベルと値です。

表示画面用のテンプレートに値を反映する

次に、表示画面のテンプレートに、今登録したモジュールフィールドの内容を反映してみましょう。テンプレートファイルは themes/site/contact/form/input.html です。チェックボックスの部分を

<div class="contact-form-control">

<div class="acms-admin-form-checkbox">
<input type="checkbox" name="know[]" value="{string_2}" \{know:checked#{string_2}\} id="input-checkbox-know-{string_2}" />
<label for="input-checkbox-know-{string_2}">
<i class="acms-admin-ico-checkbox"></i>{string_1}</label>
</div>

<input type="hidden" name="field[]" value="know" />
</div>

と、書き換えます。ポイントは、

• div.contact-form-control 全体をモジュールフィールドの開始タグと終了タグで囲み、モジュールIDを指定する
• 繰り返したい部分を group_know:loop の開始タグと終了タグで囲む
• ラベルを表示したい部分を {string_1} に、値を表示したい部分を {string_2} に置き換える
• \{know:checked#{string_2}\} の部分はエスケープが必要

ということです。

表示画面から管理画面のダイアログを表示するボタンをインクルードする

他のモジュールのようにマウスオーバーで管理画面のダイアログが表示できると便利ですね。クライアントさんがご自身で変更したい場合等にも分かりやすいです。そのためには、module-custom.html をインクルードして hash として #acms_box3（カスタム設定のタブ）を指定します。module-custom.html は公式テーマでは Site, UTSUWA, Member, Develop に入っています。他のテーマを使っていても、このファイルを持ってくるだけで同様に使えます！ JavaScript を利用している関係上、インクルードを書く場所にはちょっとだけ注意が必要で、モジュールの開始タグがあって、なんらかの div の開始タグがあって、インクルード、という順になります。

  
<div class="contact-form-control">  
@include("/include/edit/module-custom.html", {"hash":"#acms_box3"})  

ふたつの「テキスト」入力欄を持つカスタムフィールドグループ用のテンプレートを共通化する

MF_form_enable_contact の方も同じ手順でカスタマイズができるのでトライしてみてください。このようにふたつの「テキスト」入力欄を使うカスタムフィールドグループはモジュールフィールドに限らず、さまざまな他のフィールドにも使い回せるので、私は共通化してしまうことが多いです。（string_1、string_2 と汎用的なフィールド名にしてあるのはそのためです。）このエントリーに用意した site.zip では、 site/admin/module/ フォルダが共通化していないソース、 site/admin/_module/ が共通化してあるソースです。共通化について気になる方は、 _module フォルダの中のソースも、参考にしてみてください。

まとめ

このように、モジュールフィールドはフォームのラジオボタンやチェックボックスの項目を編集することにも使えます。他にもいろいろ使い道があるので、ダイアログの出し方等、おぼえておくととても便利です！