a-blog cmsの動的フォームの項目を固定にする

Published

a-blog cmsの動的フォームの項目がデフォルトで固定になっているのはメールアドレスのみで、あとの項目はブラウザ側から更新できるようになっています。

ですが、項目を使い回したいときは固定の項目があったほうがフォームを増やすときに手間が減ります。今回はa-blog cmsの動的フォームの項目を固定にする方法を記事にまとめました。

ちなみにこの内容は8/22に開催した a-blog cms DAYでもお話しした内容です。



動的フォームのフォルダ構成

まずは、動的フォームのフォルダ構成です。



system/include/form/の中に実際のテンプレートが入っています。

  • adminbody.txt
  • adminsubjext.txt
  • body.txt
  • confirm.html
  • input.html
  • subject.txt
  • unit.html

通常のフォームのテンプレートとは違ってunit.htmlが入っています。このunit.htmlは中身的にはsite2014テーマで言うmain.htmlのコードと同じで、確認画面や結果画面をブロックごとに分けてあり、input.htmlやconfirm.htmlを読み込んでいる親元のテンプレートです。

複製して、フォルダの名前を変更する

固定の項目があるということで、他のテンプレートでは使いたくないこともあるかもしれませんので、使用するテーマ内にincludeディレクトリを作り、複製します。

動的フォームのフォルダのパスが/include/form/となっていますが、そのテーマ内でも使う動的フォームを分けたい場合は、formフォルダをdynamicFormなどに名前を変えます。

このとき、動的フォームを読み込んでいるincludeなどを変えなくてはいけません。

フォルダ名を変えたときに修正するべき場所

  • entry.htmlの中のEntryBodyの <!-- include/form/unit.html -->
  • include/dynamicForm/unit.htmlの <!-- include/form/input.html --><!-- include/form/confirm.html -->

固定にするときの変数・BEGINブロックの注意点

  • input.html、confirm.html、adminbody.txtにはバックスラッシュつきで変数を記述する。
  • body.txtはそのままの変数を
  • バックスラッシュつきは、変数にveilするとき、BEGINブロックもエスケープする

BEGINブロックもエスケープする方法

<!-- BEGIN\ email:veil -->メールアドレス  : \{email\}<!-- END\ email:veil -->

adminbody.txtの例なのですが、<!-- BEGINのあとにバックスラッシュをいれます。スペースに対してエスケープしているわけではなく、CMSの機能として<!-- BEGIN -->ブロックをエスケープしています。

ちなみに

adminbody.txtでバックスラッシュを使わなくても普通の変数で実装できます。

バックスラッシュをつけている理由としては、動的フォームのモジュールの中に変数を書いていることが挙げられます。

つまり、以下のようなモジュールの始まりの記述を動的フォームが始まる<!-- BEGIN column:loop -->の前に書くとバックスラッシュなしでも動くようになります。

<!-- BEGIN_MODULE Form2_Unit -->


以上になります。動的フォームは詳細ページで作成できるので、同時に記事を作成することもできます。例えば、営業職の採用ページの下に、「この職種への応募は下のフォームから!」というような使い方もできます。

エントリーによって少し質問項目を変えたいときや、お客さんが質問の項目を変更したいときにも便利な動的フォームのカスタマイズ方法のご紹介でした。

関連している記事

著者について

森田 かすみ

有限会社アップルップル所属。マークアップエンジニア→インハウスデザイナーの経歴を経て、今はUI/UX/サービスデザインを勉強中。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。