フォームのチェックボックスやラジオボタンの項目を編集可能にする

このエントリーは 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を作成しておきます。

モジュール: モジュールフィールド
モジュールID: MF_form_know
モジュール名: フォームのknowチェックボックスのラベルと値
モジュール: モジュールフィールド
モジュールID: MF_form_enable_contact
モジュール名: フォームのenable_contactラジオボタンのラベルと値

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

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

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

グループのタイトル: フォームのknowチェックボックスのラベルと値
フィールド名(変数): group_know

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

入力欄の種類: テキスト
タイトル: ラベル
フィールド: string_1
入力欄の種類: テキスト
タイトル: 値
フィールド: string_2

その内容を 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 です。チェックボックスの部分を

<!-- BEGIN_MODULE Module_Field id="MF_form_know" -->
<div class="contact-form-control">
<!-- BEGIN group_know:loop -->
<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>
<!-- END group_know:loop -->
<input type="hidden" name="field[]" value="know" />
</div>
<!-- END_MODULE Module_Field -->

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

  • 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 の開始タグがあって、インクルード、という順になります。

<!-- BEGIN_MODULE Module_Field id="MF_form_know" -->  <!-- モジュールの開始タグ -->
<div class="contact-form-control">  <!-- div の開始タグ -->
@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 フォルダの中のソースも、参考にしてみてください。

まとめ

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


関連タグ

この記事をシェアする

この記事を書いた人

有限会社 アップルップル

admin

このブログでは a-blog cms の実装に関することを中心に、CSS、JavaScriptなどフロントエンド周辺のことを書いていきます。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

タグ一覧