a-blog cmsのフォームをすぐに使いたい時の4つの実装パターン。


この記事は a-blog cms Advent Calendar 2017 の7日目の記事です。

a-blog cmsのフォームを実装する時に押さえておきたい4つのポイント。

今回初めてa-blog cmsのフォームを触ったので、レベルごとの実装の流れをまとめてみました。

a-blog cms のフォームの特徴

  • a-blog cmsのフォームは、プラグイン等で追加実装でなく最初から機能がある
  • 必須チェック等のバリデーターや、全角を半角に変換等のコンバーターがフォームオプションにある
  • 静的フォームはテーマのHTMLの調整のみ
  • 入力項目をエントリーページで変更できる、動的フォームも設定で実装可能(レイアウトにこだわるなら静的の方がオススメ)
  • フォームの送信内容をcsvダウンロードできる(拡張アプリを使うとGoogle SpreadSheetで管理も可)

詳しくは、a-blog cms開発者向け情報サイトで。

実装の難易度をレベル分けして、やりたい事の手順を説明します。

  1. レベル1 すぐにフォームを使いたい!
  2. レベル2 フォームの項目を変更したい
  3. レベル3 フォームのディレクトリ(「contact」から「inquiry」へ)を変更したい
  4. レベル4 項目の選択内容により、送信宛先を振り分けたい

レベル1 すぐにフォームを使いたい!

  • フォームディレクトリ「contact」のままで使用

実装内容

A.フォーム管理画面で以下項目を設定
フォーム > 該当のフォーム(初期時:お問い合わせフォーム)

▼一般メール設定
・From

▼管理者宛メール設定(管理者宛メールを送信したい場合)
・AdminTo
・AdminFrom

レベル1:管理画面での編集項目

レベル2 フォームの項目を変更したい

  • フォームディレクトリ「contact」のままで使用
  • フォームの項目を変更したい

実装内容

Aの処理 +
B.以下テーマファイルを修正
※バリデーター・コンバーター処理はinput.htmlに記述

  • /site2016/contact/form/input.html:入力ファイル
  • /site2016/contact/form/confirm.html:確認ファイル
  • /site2016/contact/form/adminbody.txt:管理者メール内容
  • /site2016/contact/form/body.txt:自動配信メール内容

レベル3 フォームのディレクトリ(「contact」から「inquiry」へ)を変更したい

  • フォームディレクトリ「inquiry」に変更

実装内容

Aの処理 +
C.ディレクトリを変更
/site2016/contact/ を /site2016/inquiry/ に変更

・/site2016/inquiry/form/main.html
<input type=”hidden” name=”id” value=”contactForm” />
を以下に変更(3箇所)
<input type=”hidden” name=”id” value=”inquiryForm” />
※フォームidにあまり注目していなかったため、この修正箇所に気づくのに時間がかかりました。

<!–#include file=”/contact/form/〜.html”–>
を以下に変更
<!–#include file=”/inquiry/form/〜.html”–>

▼基本情報
・フォームIDを「contactForm」から「inquiryForm」に変更

▼一般メール設定
・SubjectTpl
・BodyTpl

▼管理者宛メール設定
・AdminSubjectTpl
・AdminBodyTpl

レベル3:管理画面での編集項目

 

レベル4 項目の選択内容により、送信宛先を振り分けたい

  • フォーム項目:ご用件 の値が「ご要望」の場合、管理者の宛名を変更したい

レベル4:サンプルフォーム「ご用件」部分

実装内容

Aの処理 +
D.フォームステップ:確認画面部分に条件分岐処理を追加

・/site2016/contact/form/main.html
条件分岐とメールアドレスを追加

レベル4:main.htmlに条件分岐処理追加

条件分岐で使用するメールアドレスを管理画面から何とか制御できないかと思い、色々試してみました。
管理画面からメールアドレス登録まではできたのですが、確認画面部分の処理で画面登録したメールアドレスを呼び出す事ができませんでした。
もしよい方法をご存知の方がいらっしゃれば是非教えてほしいです!!

まとめ

フォーム作成時、テーマファイルを編集する必要がありますが、基本HTMLレベル(a-blog cmsの場合、フォーム問わず)なので、システムの部分を崩さずにカスタマイズできるは特徴だなと感じました。
きっともっと知らない機能があるかと思います。

数日前にあった、秋のa-blog cms合宿に参加出来ず、出席者のSNSをチラ見するたび気になるセッションがいっぱいで行けたらよかったなと思いました。
a-blog cmsの合宿はセッションのレベルが高く、セッション内容が幅広いため、プログラムを触らずに発想と機転で色々な事ができるCMSだなと感じました。
次回は参加したいと思いますっ!
a-blog cms Training Camp 2017 Autumn

それでは。