フォーム

目次

フォームの基本

a-blog cms では標準でフォーム機能も搭載しております。お問い合わせにフォームなどで利用されています。機能としては、以下のようなものが上げられます。

  • サイトのどこにでも設置が可能
  • フォームの入力内容は管理者と一般にメールが送られてきます
  • 入力項目のチェック機能(必須入力やメールアドレスが一致しているか、数字判定など)
  • 入力項目のコンバート機能(大文字を小文字に変換など)
  • 複数ステップのフォームを作る事ができる
  • フォームの送信内容を蓄積してCSVのダウンロードする

フォームモジュール

フォームについても、モジュールとして提供しております。フォームの基本ステップとしては、新規・修正・確認・完了の4つのステップに分かれており、このステップを増やす事で複数ステップのフォームを用意できる事になります。

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step-->
<!-- 新規 -->
<!--#include file="/include/form/input.html"-->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!--#include file="/include/form/update.html"-->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!--#include file="/include/form/confirm.html"-->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!--#include file="/include/form/result.html"-->
<!-- END step#result -->

<!-- END_MODULE Form -->

フォームの基本

入力フォームは、基本的にカスタムフィールドと同じ書き方で増やしていく事ができます。(HTMLのみで追加可能)

<input type="text" name="address" value="" />
<input type="hidden" name="field[]" value="address" />

<input type="hidden" name="address:validator#required" /> <!-- 必須項目 -->

フォームの管理ページ

フォーム > フォーム管理 の[変更]ボタンを押すとフォームを管理するページに移動します。こちらに、フォームIDを設定し、そのフォームIDをテンプレート上に設定する事で、データベース上にフォームの入力情報を保存し、CSVダウンロードを可能にしています。また、メールのテンプレートの設定や、From, To等の設定も管理ページ上で設定します。


フォーム管理画面

フォーム管理画面

stepブロックを知ろう

基本のブロック構成

テンプレートを上から順に読むと、大きく分けて下のようなブロック構成になっていることが分かります。フォームが、どのステップにいるかに合わせて、それぞれのブロックの中身が表示されます。表示中のステップ以外の内容は一切表示されません。

はじめの入力画面( step )で、エラーがあれば再入力画面( step#reapply )に遷移し、エラーがなければ確認画面( step#confirm )が遷移します。そして、確認画面から送信したあとに、完了画面( step#result )へ遷移します。

Formモジュールにおけるstepブロックの構成

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step -->
(中略:はじめの入力画面)
<!-- END step -->

<!-- BEGIN step#reapply -->
(中略:エラーがあったときの再入力画面)
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
(中略:送信前の内容確認)
<!-- END step#confirm -->

<!-- BEGIN step#result -->
(中略:送信後の完了通知)
<!-- END step#result -->

<!-- END_MODULE Form -->

次に表示するステップ操作の仕組み

基本的に、サンプルテンプレートを元に編集を加えるだけで利用することができます。そのため、以下の内容について編集する事はあまり多くはありませんが、どこでその記述をしているかについて説明します。


再入力画面( step#reapply )のHTMLソース

再入力画面( step#reapply )のHTMLソース


エラー時に表示されるstepの指定

GET, POSTの2通りの方法で指定が可能です。

  • form要素のaction属性に?step=reapplyを指定(GET)
  • input要素のname属性にerror、value属性にreapplyを指定(POST)

どちらか一方の指定だけで大丈夫です。エラーなどがあった場合は、ここで指定されたstepが表示されます。

次に表示したいstepの指定

HTMLのinput要素のname属性にstepvalue属性にconfirmと記述しています。ここに次に表示したいstepの名前を入力します。エラーなどがなければ、ここで指定されたstepが表示されます。

例の場合では再入力の内容にエラーがあれば再入力画面( step#reapply )に戻ってきて、エラーがなければ確認画面( step#confirm )に遷移するという記述になります。

フォームIDの設定

フォームを設置するときフォームIDをテンプレートとフォーム管理画面に設定しています。フォームIDがあることでフォームの管理画面に送信データをデータベースに蓄積したり、メールのテンプレートやメールアドレスを指定することができます。

FormモジュールにフォームIDを指定する

フォームの各ステップにフォームIDを記述します。IDの英数字で指定してください。記述方法は以下のような記述になります。

<input type="hidden" name="id" value="(フォームID)" />

例えば、フォームIDが contactForm のときは以下のように記述します。

<!-- BEGIN_MODULE Form -->
 
<!-- BEGIN step-->
<!-- 新規 -->
<!--#include file="/include/form/insert.html"-->
<input type="hidden" name="id" value="contactForm" />
<!-- END step -->
 
<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!--#include file="/include/form/update.html"-->
<input type="hidden" name="id" value="contactForm" />
<!-- END step#reapply -->
 
<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!--#include file="/include/form/confirm.html"-->
<input type="hidden" name="id" value="contactForm" />
<!-- END step#confirm -->
 
<!-- BEGIN step#result -->
<!-- 完了 -->
<!--#include file="/include/form/result.html"-->
<input type="hidden" name="id" value="contactForm" />
<!-- END step#result -->
 
<!-- END_MODULE Form -->

フォーム管理にフォームIDを指定する

管理画面 > フォームの [フォームIDを作成]ボタンを押してフォームIDを作成します。フォーム管理ではフォームの送信データのログを閲覧したり、メールアドレスやテンプレートを指定ができます。

メールのテンプレートを指定する

フォームID画面ではメールのテンプレートや管理者のメールアドレスを指定することができます。

  • SubjectTpl :一般に届くメールの件名
  • BodyTpl :一般に届くメールの本文
  • BodyHTMLTpl : 一般に届くHTMLメールの本文(※Ver.2.5以降より追加)
  • AdminSubjectTpl:管理者に届くメールの件名
  • AdminBodyTpl:管理者に届くメールの本文
  • AdminBodyHTMLTpl:管理者に届くHTMLメールの本文(※Ver.2.5以降より追加)

メールのテンプレートはフォームのテンプレートが置いてあるテーマフォルダに置いてください。 例えば メールテンプレートが /themes/site2015/contact/form/subject.txt に置いてあった場合のパスは /contact/form/subject.txt になります。

テキストメール or HTMLメール

HTMLメールの本文のテンプレートがない場合は、テキストメールとして送信されます。HTMLメールとして送りたい場合は、テキストとHTML両方のテンプレートを指定ください。

メールアドレスを指定する

以下のようなメールアドレスを指定する箇所があります。

  • To
  • From
  • Cc
  • Bcc
  • Reply-To
  • AdminTo
  • AdminFrom
  • AdminCc
  • AdminBcc
  • AdminReply-To

最初にAdminがつく設定が管理者宛の設定で、つかないものが、自動返信の一般宛の設定になります。 これらの値は、ここでの設定以外にフォームのテンプレートで指定ができます。

通常は、Toにはお問い合わせした人に送信するので、毎回変わりますので、テンプレートで動的に設定します。 Fromは管理者のメールアドレスを設定すればよいでしょう。

逆に管理者宛のAdminToは、管理者のメールアドレスを固定で設定し、Fromを動的にテンプレートで指定します。


フォーム管理でのメール設定

フォーム管理でのメール設定


テンプレートでのメール設定

テンプレートでのメール設定

メールテンプレート

メールテンプレートにはフォームの項目で使用したカスタムフィールドの変数やグローバル変数などが記述されてします。
例えば /themes/site2015/contact/form/adminbody.txt では以下のような記述をしています。

{name} 様 よりお問い合わせがありました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

受付日時:%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}

■お問い合わせ情報

ご用件    : {description}[raw]
お問い合わせ内容:
{inquiry}[raw]


■お客様情報

会社名    : {company}[raw]
お名前    : {name}[raw]
メールアドレス: {email}
お電話番号  : {phone}
ご住所    : 〒{zip} {pref_code} {address}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

site2015テーマのフォームのメールテンプレートはテキストファイルのためHTMLは記述していません。Ver.2.5よりHTMLメールにも対応となりましたので、HTMLメールをご利用になる際はVer.2.5以降のバージョンをお使いください。

また、校正オプションを記述することができます。校正オプションについてはリファレンスをご覧ください。 例えばお問い合わせ内容のテキストを改行するには以下のような校正オプションを記述します。

{inquiry}[escape|nl2br]

送信データの確認

投稿データを確認する

フォームから送信された内容はフォーム管理に蓄積されます。フォーム管理の[投稿データ]ボタンを押してください。フォームに投稿された内容の一覧が表示されます。メールの内容を見たい場合は[本文を表示]ボタンを押すと本文を見ることができます。


本文を表示

本文を表示

投稿内容を絞り込む

投稿データを投稿された期間、連番などから絞り込めます。また、チェックした投稿データだけ削除することもできます。

管理者宛のメール内容を閲覧する

フォームログで表示されているのは一般宛に送信されたメールの内容が表示されています。管理者宛のメール内容を見るには絞り込むの「管理者宛(件名/本文) 」にチェックをして[表示]ボタンを押すと管理者宛のメール一覧が表示されます。


投稿内容を絞り込む

投稿内容を絞り込む

CSVデータでダウンロードする

投稿データはダウンロードする文字コードを選択してCSV形式でダンロードすることができます。


入力項目の追加

入力側に追加するときの記述について

フォームの入力フォームはフォームステップ:初期(step)とフォームステップ:修正・エラー(step#reapply)の2カ所に記述されています。フォームの項目を追加するにはこの2つのステップに追加してください。フォームの項目はカスタムフィールドで作られています。カスタムフィールドについてはカスタムフィールドのページをご覧ください。

例えばsite2014テーマでは /themes/site2014/contact/form/input.html にフォームの項目が記述されています。site2014テーマのフォームステップ:初期(step)とフォームステップ:修正・エラー(step#reapply)は input.html とインクルードしているため項目を追加するときはこのファイルを編集すれば2ステップに反映されます。
以下は site2014テーマが /themes/site2014/contact/form/input.html を読み込んでいるソースの一部です。

<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<!-- フォームステップ:初期 -->
<form action="?step=reapply" method="post" class="acms-form">		
	<!--#include file="/contact/form/input.html"-->

	<input type="hidden" name="step" value="confirm" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" class="acms-btn" />
</form>
<!-- END step -->
	

<!-- BEGIN step#reapply -->
<!-- フォームステップ:修正・エラー -->
<form action="?step=reapply" method="post" class="acms-form">	
	<!--#include file="/contact/form/input.html"-->
	
	<input type="hidden" name="step" value="confirm" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" class="acms-btn" />

</form>
<!-- END step#reapply -->

site2014テーマを使ってフォームの項目を追加してみましょう。 /themes/site2014/contact/form/input.html に資料請求するかどうかの項目を追加します。以下のソースを追加してください。

<tr>
	<th>資料請求</th>
	<td>
		<label class="acms-form-radio">
		<input type="radio" name="request" value="資料請求する"{request:checked#資料請求する} /><i class="acms-ico-radio"></i>資料請求する</label>
		<label class="acms-form-radio">
		<input type="radio" name="request" value="資料請求しない"{request:checked#資料請求しない} /><i class="acms-ico-radio"></i>資料請求しない</label>
		<input type="hidden" name="field[]" value="request" />
	</td>
</tr>

site2014テーマのお問い合わせフォームに資料請求を追加するかどうかのフォームを追加できました。


a-blog cmsのフォームでは修正画面に戻っても入力したデータが保持されています。inputタグにカスタムフィールドの変数が書いてないとデータは保持されません。

<!-- ○ データが保持される -->
<input type="radio" name="request" value="on"{request:checked#on} /><i class="acms-ico-radio"></i>資料請求する</label>

<!-- × データが保持されない -->
<input type="radio" name="request" value="on" /><i class="acms-ico-radio"></i>資料請求する</label>

出力側に追加するときの記述について

確認画面(step#confirm)と完了画面(step#result)で追加した項目を出力する用のソースを追加します。
今度はsite2014テーマのお問い合わせフォームの /themes/site2014/contact/form/confirm.html に以下のHTMLを追加してください。

<tr>
	<th>資料請求</th>
	<td>
		{request}
	</td>
</tr>

確認画面にいくと資料請求の項目が追加されています。


メールのテンプレートに追加

項目を追加したらメールのテンプレートにも追加が必要です。フォームには管理者宛と一般宛の本文のメールテンプレートが2つあります。この2つに項目を追加してください。

site2014テーマでは以下が管理者宛と一般宛の本文のメールテンプレートになります。
/themes/site2014/contact/form/body.txt
/themes/site2014/contact/form/adminbody.txt

adminbody.txtのテンプレートに資料請求の項目を追加した例になります。

{name} 様 よりお問い合わせがありました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

受付日時:%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}

■お問い合わせ

会社名    : {company}
お名前    : {name}
メールアドレス: {email}
お電話番号  : {phone}
ご住所    : 〒{zip} {pref_code} {address}

資料請求: {request}

お問い合わせ種類: {description}
お問い合わせ内容:
{inquiry}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

バリデーター&コンバーター

入力された値のチェックと変換

a-blog cmsのフォームには、入力された値のチェックや変換といった、フォームオプションと呼ばれる機能があります。

バリデーター入力された値を指定した条件でチェックします(必須チェックなど)
コンバーター入力された値を指定した形式に変換します(全角→半角など)

バリデーター

[年代]の項目を必須入力にしてみましょう。

チェック機能の実装

まず、その項目が必須入力であるというチェック機能を実装します。
必須入力(required)の設定を加えたサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" />
</dd>

7行目が必須項目のチェックとして、追加された記述です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。

<input type="hidden" name="[対象の項目名]:validator#[オプション名]" />

チェック対象のフォーム項目のname属性を指定し、最後にオプション名を指定します。チェック用のオプションは複数用意されています。ここでは、サンプルテンプレートに使用されているものだけ、ご紹介します。

required必須項目が入力されているかチェックするオプションです
maxLength文字数の上限を設定するオプションです
emailメールアドレスの書式として正しいかをチェックするオプションです

他のオプションについては、リファレンス:フォームオプションをご覧ください。

画像、ファイルの場合の必須チェック

フォームにおけるファイル、画像アップの入力項目に対して、チェック機能(バリデーション)の必須チェックを使う場合の記述方法を補足します。

<input type="hidden" name="photo:v#required" />

上記の方法では、ファイルを添付していても、エラーになってしまいます。そこで下記のように記述してください。この記述方法で必須チェックが有効になります。

<input type="hidden" name="photo@path:v#required" />

エラー表示の実装

チェック機能を実装したら、今度はエラーが返ってきた時の表示を実装します。
エラー表示のブロックを加えたサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" />
<!-- BEGIN age:validator --><p>この項目は必須入力です</p><!-- END age:validator -->
</dd>

8行目にサンプルテンプレートの他の項目と同じようにエラー表示のブロックが加わりました。このブロック内は、指定された項目についてのエラーがあったときだけ表示されます。

<!-- BEGIN [対象の項目名]:validator --><p>[エラーメッセージ]</p><!-- END [対象の項目名]:validator -->

エラーメッセージは自由に設定できるので、他の項目のエラーメッセージも、その項目につけられたバリデーターの内容に合わせて書き換えてみましょう。また、実際に入力をしてエラー表示の動作を確認してみましょう。

コンバーター

それでは次に、メールアドレスの欄に入力された値に全角英数字が含まれていた場合に、半角英数字に変換する機能を実装します。

コンバーターを実装する前に、メールアドレスの欄に全角英数字を含めてメールアドレスを入力してみましょう。バリデーターのエラーが表示されたのではないでしょうか? これは、全角英数字が含まれている時点で、メールアドレスとして不適合であるためにエラーが表示されている状態です。

全角英数字を半角英数字に変換するサンプルコード

<dt>メールアドレス</dt>
<dd>
<input type="text" name="address" value="{address}" />
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:validator#email" />
<input type="hidden" name="address:converter" value="a" />
</dd>

6行目がコンバーターの記述です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。

<input type="hidden" name="[対象の項目名]:converter" value="[変換オプション]" />

変換オプションはPHPのmb_convert_kana関数に準拠します。

記述し終わったら、改めてメールアドレスの欄に全角英数字を含めてメールアドレスを入力して動作を確認してみましょう。正しく実装できていれば、今度はエラーが表示されず、全角で入力した部分も半角に変換されているのではないでしょうか?

この機能を利用すれば、郵便番号や電話番号はもちろん、住所などの数字も半角、または全角に統一することができます。エンドユーザーに半角や全角といった入力の指定を求めずに、適切な形で情報を得ることができます。

ファイル、画像の必須チェック

フォームにおけるファイル、画像アップの入力項目に対して、チェック機能(バリデーション)の必須チェックを使う場合の記述方法を補足します。

通常の書き方で必須チェックを記述すると下記のようになります。

<input type="hidden" name="photo:v#required" />

上記の方法では、ファイルを添付していても、必須チェックを行ってくれません。そこで下記のように記述してください。この記述方法で必須チェックが有効になります。

<input type="hidden" name="photo@path:v#required" />

エラーメッセージの分岐

一つのフィールドで複数のエラーを検知したい場合があります。例えば以下のように、必須だけではなく、数値のみ許可したり、最大数値を設定したりです。

  • 必須
  • 数値のみ許可
  • 100以下の数値を許可

今ままでのエラー表記

ここまでで紹介したエラー表記の仕方は、以下のようなコードでした。

<input type="text" name="age" value="{age}">
<input type="hidden" name="field[]" value="age">
<input type="hidden" name="age:validator#required"> <!-- 必須チェック -->
<input type="hidden" name="age:validator#digits"> <!-- 数値チェック -->
<input type="hidden" name="age:validator#max" value="100"> <!-- 最大数チェック -->

<!-- BEGIN age:validator --><p class="notice">年齢が入力されていないか、数値(100以下)が入力されていません。</p><!-- END age:validator -->

間違ってはいませんが、どのエラーにひっかかっているのか判りにくいです。

エラーにあわせてメッセージを変える

<input type="text" name="age" value="{age}">
<input type="hidden" name="field[]" value="age">
<input type="hidden" name="age:validator#required"> <!-- 必須チェック -->
<input type="hidden" name="age:validator#digits"> <!-- 数値チェック -->
<input type="hidden" name="age:validator#max" value="100"> <!-- 最大数チェック -->

<!-- BEGIN age:validator#required -->
<p class="notice">年齢を入力してください。</p><!-- END age:validator#required --><!-- BEGIN age:validator#digits -->
<p class="notice">年齢には数値を入力してください。</p><!-- END age:validator#digits -->><!-- BEGIN age:validator#max -->
<p class="notice">年齢には100以下の数値を入力してください。</p><!-- END age:validator#max -->

エラーメッセージが分岐され必要なメッセージだけが出力されるようになりました。

このようにエラーメッセージ用のブロックを書き換える事で、複数のバリデーターを設定した場合のエラーで、別々のメッセージを表示させることができます。

<!-- BEGIN [対象の項目名]:validator#[オプション名] --><p>[エラーメッセージ]</p><!-- BEGIN [対象の項目名]:validator#[オプション名] -->

特殊なエラーメッセージ

フォームでファイルをアップロードする時に upload_max_filesize を超えた場合、POSTが空になるのでフィールド毎にエラーは出せない。 なので以下の記述で全体のエラーメッセージを出力。

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

フォームの入力エラー取得

フォームの各ステップに対応した以下のようなブロックがあります。

  • step 初期画面
  • step#reapply エラー画面
  • step#confirm 確認画面
  • step#result 送信完了画面
  • step#forbidden 不正アクセス画面
  • step#repeated 連続投稿エラー画面

これとは別に、フォームのバリデーターに引っかかった場合に出力されるブロックがあります。

エラーブロック

以下のようなブロックを記述すると、フォームのバリデーターにひっかかると、そのエラー内容とフォームIDを変数にもつブロックが表示されます。

エラーブロックの記述

<!-- BEGIN error -->
 <!-- フォームID : {formID} / エラー項目 : {errorKey} -->
<!-- END error -->

<!-- 実行例 -->
<!-- フォームID : contactForm / エラー項目 : description,inquiry,name,email,zip,pref_code,address -->
  • formID | フォームIDの変数
  • errorKey | 入力エラーが起こったフィールド名

Google Analyticsとの連携

Google Analyticsにイベントトラッキングという仕組みがあり、これを使ってフォームの入力エラーをイベント通知する事ができます。(Google Analyticsの詳細は省略します)

<!-- BEGIN error -->
<script type="text/javascript">
ga('send', 'event', 'Form', 'error', '{formID}', '{errorKey}');
</script>
<!-- END error -->

フォームのエラー箇所を収集する事により、顧客がどこで悩んだりつまづいているのかが分かってきます。この情報をフォーム改善に役立てましょう。

プレースホルダーの表示

a-blog cmsでは、フォームのテキスト入力エリア内にあらかじめ任意の文字を表示しておくプレースホルダーの機能(placeholder)の設定が標準で実装されています。

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJS」を参照してください。

//-------------
// placeholder
placeholderMark   : '.js-placeholder',
placeholderColor  : 'silver',
placeholderMarkここで指定したセレクタがプレースホルダーになります。
placeholderColorプレースホルダーの文字色です。色のキーワードやRGB値(#FF0000, rgb(255,0,0),rgb(100%,0%,0%))で指定できます。

2. HTMLとCSSの編集

指定したクラスをHTMLのinput要素もしくはtextarea要素に記述します。プレースホルダーとして表示する文字列は、title属性に記述します。

例)placeholderMarkで「.js-placeholder」と指定した場合

<form action="" method="post" name="searchForm"><input type="text" name="keyword" value="%{KEYWORD}" size="15" class="js-placeholder" title="キーワードを入力" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
<input type="hidden" name="tpl" value="/search.html" />
<input type="hidden" name="bid" value="%{BID}" />
</form>

サンプル

以下のようにフォームのテキストエリアに任意の文字が表示されます。

任意の入力フィールド内のテキストを自動選択する

a-blog cmsでは、任意の入力フィールド内にあるテキストをクリックした際に、テキストを全選択状態にする設定が標準で実装されています。入力フィールド内のテキストをコピーしたい場合などに便利です。

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。

clickSelectionInputTextMark : ':text.url, textarea.js-click-selection, :text.js-click-selection',
clickSelectionInputTextMarkここで指定したHTML要素やclassで、テキストの自動選択が可能になります。

2. HTMLの編集

例)clickSelectionInputTextMarkで「:text.url」と指定した場合

<p>URL <input id="textfield" class="url" type="text" value="{url}" name="textfield"/></p>

テキストを自動選択したい要素に、class="url"と記述します。

入力ステップの分割表示

入力ステップの分割

アンケートフォームや携帯用フォームなどで

アンケートのように入力項目が多くなりがちなフォームや、携帯など1度に表示させられる情報に限りがある場合、入力ステップを分割することがあります。


実習ファイル3

今回のチュートリアルでは、a-blog cmsのフォームで入力ステップを分割するための設定を紹介していきます。サンプルファイルも新しいものを用意しました。ダウンロードして、お使いのテスト環境に設置し、チュートリアルを進めてください。
今回のサンプルでは、色々なバリーデーターやコンバーターの使用例や、テンプレートタグの応用例を盛り込んでいます。ここで詳しく解説はしませんが、参考にしてみてください。

商品選択とお客様情報の入力ステップを分割する

前編と後編に分けてチュートリアルを進めていきます。まずは前編でしっかりと下準備をしましょう。

変更前のStep設計

  1. 初期の入力画面
  2. 再入力の画面
  3. 確認画面
  4. 結果画面

変更後のStep設計

  1. 商品選択
  2. お客様情報の入力
  3. 確認画面
  4. 送信画面

このように変更してみたいと思います。

予備知識:初期入力と、再入力は同じテンプレートを利用できる

変更後で、再入力の画面がなくなっていますが、今回は入力からエラー表示までを同じstep内で完結させてみたいと思います。今までの考え方だと、再入力画面( step#reapply )がテンプレートのベースになります。

今まで、step#reapplyには{var}や<!-- BEGIN key:validator -->のようなテンプレートタグが含まれていました。これらは初期の入力画面( step )に含まれていても影響がない記述です。前の画面で情報が入力されているときのみ有効になるタグなので、前の画面で情報が入力されていなければ、すべての記述は無視されます。

よって、再入力画面( step#reaply )をベースとした、入力フォーム部分のHTMLが書かれたファイルをインクルードして2つのステップで共有することもできます。入力と再入力を別のステップとして分けていれば、入力フォームの補足説明などを、インクルードするファイルの外に記述することで、初期の入力と再入力で変えたいところだけ振り分けられます。

基本はインクルードして、ステップ間で違う部分は別記します


<!-- BEGIN step -->
<h3>お問い合わせを入力してください</h3>
<!--#include file="/form/input.html" -->
<!-- END step -->
 
<!-- BEGIN step#reapply -->
<h3>お問い合わせを入力してください</h3>
<p>入力内容に不備があります。恐れ入りますが、エラーをご確認いただき入力を修正してください</p>
<!--#include file="/form/input.html" -->
<!-- END step#reapply -->

ステップ名を編集する

サンプルファイルでは商品選択とお客様情報の、それぞれの入力フォーム部分を個別のファイルに分けてインクルードしています。

個別でインクルードしています

<form action="?step=reapply" method="post"> 
<!--#include file="/sample3/itemSelect.html" -->
<!--#include file="/sample3/customerInfo.html" -->
 
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="id" value="sample">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>

stepからお客様情報の入力フォームを削除

はじめのステップで商品選択のみを行うので、最初のステップからはお客様情報の入力フォームを削除します。今回のステップ設計ではエラー時に自分自身のステップに返ってきてエラーを表示するので、form要素のaction属性に入っている?step=reapplyという記述も削除します。

お客様情報の入力フォームをインクルードしている記述

<!--#include file="/sample3/customerInfo.html" -->

step#reapplyをstep#2に改名し、商品選択の入力フォームを削除

次のステップではお客様情報の入力をします。step#reapplyとなっていますが、これをBEGINとENDの記述に気をつけてstep#2と改名してください。そして今度は商品選択の入力フォームを削除します。form要素のaction属性については、今度は?step=2とします。

商品選択の入力フォームをインクルードしている記述

サンプルコード

<!-- BEGIN step -->
<form action="" method="post"> 
<!--#include file="/sample3/itemSelect.html" -->
 
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="id" value="sample">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>
<!-- END step -->
 
<!-- BEGIN step#2 -->
<form action="" method="post"> 
<!--#include file="/sample3/customerInfo.html" -->
 
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="id" value="sample">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>
<!-- END step#2 -->

一連のフォームとして動作するように画面遷移を設定

前回の前編では、下準備としてステップの名前と、そのステップに含まれる入力フォームの編集までを行いました。今回は、それらのステップを一連のフォームとして実際に動作するように、ステップ間の遷移をつなげていきます。

進む方向のステップ:入力1→入力2→確認→送信

まずは入力ステップから確認、送信に向かう方向の遷移を設定します。

次のステップを変える

エラー時にはform要素のaction属性の値が次のステップとして反映されますが、エラーがなかったときに次に進むステップの指定はどこで行うか覚えているでしょうか?

次のステップの指定

<input type="hidden" name="step" value="confirm">

この記述です。最初の入力ステップ( step )のここのvalue属性の値を、2と書き換えてください。これで、step#2に進むという指定になります。

次のステップの指定を書き換えます

<!-- BEGIN step -->
<form action="" method="post"> 
<!--#include file="/sample3/itemSelect.html" -->
 
<input type="hidden" name="step" value="2">
<input type="hidden" name="id" value="sample">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>
<!-- END step -->

step#2については、次は確認画面( step#confirm )に進めばよいので、書き換えは必要ありません。

戻る方向のステップ:入力1←入力2←確認→送信

今度は入力ステップの途中や確認画面から、前のステップに戻る遷移を設定します。ここでは確認画面( step#confirm )の戻るボタンを参考にします。

戻るボタンの記述

<form action="" method="post"><input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="step" value="reapply">
<input type="hidden" name="id" value="sample">
<input type="submit" name="ACMS_POST_Form_Chain" value="戻って修正">
</form>

stepを書き換える

次のステップにはreapplyが指定されていますが、今回のチュートリアルで再入力画面( step#reapply )は、入力ステップ2( step#2 )に変更されています。そして、確認画面( step#confirm )の直前は入力ステップ2( step#2 )が該当するので、これを2と書き換えましょう。

また、これをコピーして、入力ステップ2( step#2 )にも貼付けてください。そのときの次のステップの指定は空欄になります。そのかわり、再入力などでURLに?step=2などの記述が加わっていたときのために、action属性に?step=と上書きの設定をしておきましょう。

ステップ2( step#2 )から、入力ステップ1( step )へ戻るボタン

<form action="?step=" method="post"><input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="step" value="">
<input type="hidden" name="id" value="sample">
<input type="submit" name="ACMS_POST_Form_Chain" value="戻って修正">
</form>

takeoverって?

{takeover}と書かれたところには、前の画面で入力されていた情報が入ります。送信ボタンや戻るボタンと一緒に、前の画面での入力情報をtakeoverとしてを送ることで、フォームに入力を引き継いだり、入力した情報を送信することができます。

最初の入力ステップの値を引き継ぐ

この時点での動作を一通り確認してみましょう。画面遷移は思った通り動くでしょうか?今の状態だと確認画面( step#confirm )で、最初のステップに入力した情報が表示されないことに気づくと思います。

これは、入力ステップ1( step )で入力された情報が入力ステップ2( step#2 )に引き継がれず、確認画面の時点では、入力ステップ1( step )の情報が消失してしまっているために起こります。

そこで先ほど触れたtakeoverの記述を入力ステップ2( step#2 )に加えてみましょう。

入力ステップ2の時点で、入力ステップ1の情報を引き継いでおく

<!-- BEGIN step#2 -->
<form action="?step=2" method="post"> 
<!--#include file="/sample3/customerInfo.html" -->
 
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>
<!-- END step#2 -->

これで確認画面( step#confirm )まで、入力ステップ1( step )の情報が引き継がれるようになりました。

これで入力ステップが分割できました

動作の確認

以上で編集は終わりです。最後にフォームが、想定通りの動作をしているか確認してみましょう。

より使いこなすには

今回は入力とエラー表示をひとつのステップ内で完結するように作成しました。しかし、このままだと再入力画面に補足的な情報を付け加えたいときなどに融通が利きません。

複数ステップのときにも1つの入力画面ごとに再入力画面を設定したいときには、どうしたらよいでしょうか?また、サンキューページと組み合わせるとどうなるでしょうか?

少し難しいかもしれませんが、今までの内容を駆使すれば実現することができます。ここまでの内容を試してみる演習をかねて、ぜひチャレンジしてみてください。

今回の完成品のサンプルコード

<!-- BEGIN_MODULE Form -->
 
<!-- BEGIN step -->
<form action="" method="post"> 
<!--#include file="/sample3/itemSelect.html" -->
 
<input type="hidden" name="step" value="2">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>
<!-- END step -->
 
<!-- BEGIN step#2 -->
<form action="?step=2" method="post"> 
<table>
<caption>
ご注文の商品
</caption><!-- BEGIN item1:veil -->
<tr>
<th>商品名1</th>
<td>数量{item1}</td>
</tr><!-- END item1:veil --><!-- BEGIN item2:veil -->
<tr>
<th>商品名2</th>
<td>数量{item2}</td>
</tr><!-- END item2:veil --><!-- BEGIN item3:veil -->
<tr>
<th>商品名3</th>
<td>数量{item3}</td>
</tr><!-- END item3:veil -->
<tr>
<th>ギフト用のラッピング</th>
<td>{gift}</td>
</tr>
</table>
 
<!--#include file="/sample3/customerInfo.html" -->
 
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認">
</form>
 
<form action="?step=" method="post"><input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="step" value="">
<input type="hidden" name="id" value="sample">
<input type="submit" name="ACMS_POST_Form_Chain" value="戻って修正">
</form>
 
<!-- END step#2 -->
 
<!-- BEGIN step#confirm -->
<table>
<caption>
ご注文の商品
</caption><!-- BEGIN item1:veil -->
<tr>
<th>商品名1</th>
<td>数量{item1}</td>
</tr><!-- END item1:veil --><!-- BEGIN item2:veil -->
<tr>
<th>商品名2</th>
<td>数量{item2}</td>
</tr><!-- END item2:veil --><!-- BEGIN item3:veil -->
<tr>
<th>商品名3</th>
<td>数量{item3}</td>
</tr><!-- END item3:veil -->
<tr>
<th>ギフト用のラッピング</th>
<td>{gift}</td>
</tr>
</table>
 
<table>
<caption>
お客様の情報
</caption>
<tr>
<th>お名前</th>
<td>{name} {name[1]}</td>
</tr>
<tr>
<th>フリガナ</th>
<td>{ruby} {ruby[1]}</td>
</tr>
<tr>
<th>郵便番号</th>
<td><!-- BEGIN zip:loop --><!-- BEGIN glue -->&nbsp;-&nbsp;<!-- END glue -->{zip}<!-- END zip:loop --></td>
</tr>
<tr>
<th>都道府県</th>
<td>{prefecture}</td>
</tr>
<tr>
<th>郡市区以降の住所</th>
<td>{address}</td>
</tr><!-- BEGIN building:veil -->
<tr>
<th>建物・部屋名</th>
<td>{building}</td>
</tr><!-- END building:veil -->
<tr>
<th>電話番号</th>
<td><!-- BEGIN tel:loop --><!-- BEGIN glue -->&nbsp;-&nbsp;<!-- END glue -->{tel}<!-- END tel:loop --></td>
</tr>
<tr>
<th>メールアドレス</th>
<td>{mail}</td>
</tr>
</table>
 
<form action="" method="post"><input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="step" value="result">
<input type="hidden" name="id" value="sample">
<input type="submit" name="ACMS_POST_Form_Submit" value="上記の内容で送信">
</form>
 
<form action="" method="post"><input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="step" value="2">
<input type="hidden" name="id" value="sample">
<input type="submit" name="ACMS_POST_Form_Chain" value="戻って修正">
</form>
<!-- END step#confirm -->
 
<!-- BEGIN step#result -->
<table>
<caption>
ご注文の商品
</caption><!-- BEGIN item1:veil -->
<tr>
<th>商品名1</th>
<td>数量{item1}</td>
</tr><!-- END item1:veil --><!-- BEGIN item2:veil -->
<tr>
<th>商品名2</th>
<td>数量{item2}</td>
</tr><!-- END item2:veil --><!-- BEGIN item3:veil -->
<tr>
<th>商品名3</th>
<td>数量{item3}</td>
</tr><!-- END item3:veil -->
<tr>
<th>ギフト用のラッピング</th>
<td>{gift}</td>
</tr>
</table>
 
<table>
<caption>
お客様の情報
</caption>
<tr>
<th>お名前</th>
<td>{name} {name[1]}</td>
</tr>
<tr>
<th>フリガナ</th>
<td>{ruby} {ruby[1]}</td>
</tr>
<tr>
<th>郵便番号</th>
<td><!-- BEGIN zip:loop --><!-- BEGIN glue -->&nbsp;-&nbsp;<!-- END glue -->{zip}<!-- END zip:loop --></td>
</tr>
<tr>
<th>都道府県</th>
<td>{prefecture}</td>
</tr>
<tr>
<th>郡市区以降の住所</th>
<td>{address}</td>
</tr><!-- BEGIN building:veil -->
<tr>
<th>建物・部屋名</th>
<td>{building}</td>
</tr><!-- END building:veil -->
<tr>
<th>電話番号</th>
<td><!-- BEGIN tel:loop --><!-- BEGIN glue -->&nbsp;-&nbsp;<!-- END glue -->{tel}<!-- END tel:loop --></td>
</tr>
<tr>
<th>メールアドレス</th>
<td>{mail}</td>
</tr>
</table>
<p>上記の内容で送信しました。</p>
<!-- END step#result -->
 
<!-- END_MODULE Form -->

サンクスページの表示

サンクスページを作ってコンバージョン率を分析できるようにする

フォームは1枚のテンプレート( HTML )でフォームの入力から送信結果までが全て完結できます。この状態だと、最初から最後まで単一のURLで画面遷移が行われてしまうため、Google Analytics等でコンバージョンを調べる際に、ゴールページを設定することができませんでした。 サンキューページ( 送信のお礼ページ )を別で用意して、フォームの送信が完了したら、そのページが表示されるようにします。

サンキューページを用意する

thanks.html ファイルを作成し、この中にサンキューページの内容を入れていきます。まず、結果表示( step#result )のブロックをこのthanks.htmlに持ってきます。これで、送信完了画面でこのthanks.htmlのテンプレートが使われても、送信結果が表示できるようになります。

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step#result -->
<!-- フォームステップ:完了画面 -->
<div class="acms-entry contactBox">
	<section class="entryColumn">
		<h2 class="contactH2">メールでのお問い合わせ</h2>
		<p class="message">お問い合わせありがとうございました。以下の内容で送信しました。</p>
		<!--#include file="/contact/form/confirm.html"-->
	</section>
</div>
<!-- END step#result -->

<!-- END_MODULE Form -->

確認ページからthanks.htmlに飛ぶようにする

確認ページにあるフォーム送信ボタンのformタグのactionにthanks.htmlに飛ぶように記述します。
フォームテンプレートの確認ボタンのactionを action="thanks.html" にしてください。

<!-- BEGIN step#confirm -->
<!-- フォームステップ:確認画面 -->
<!--#include file="/contact/form/confirm.html"-->
<form action="?step=reapply" method="post" class="acms-form acms-inline-btn">	<input type="hidden" name="step" value="reapply" />
	<input type="hidden" name="takeover" value="{takeover}" />
	<input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" id="btnToInput" class="acms-btn" />
</form>

<form action="thanks.html" method="post" class="acms-form">	<input type="hidden" name="To[]" value="{email}" />
	<input type="hidden" name="AdminReply-To[]" value="<{email}>" />
	<input type="hidden" name="AdminFrom[]" value="<{email}>" />
	<input type="hidden" name="step" value="result" />
	<input type="hidden" name="takeover" value="{takeover}" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Submit" value="送信" id="btnSubmit" class="acms-btn acms-btn-primary acms-btn-admin-save" />
</form>
<!-- END step#confirm -->

これで、完了ページを別URLで表示できるようになりました。

フォームからのファイルの添付

フォームからアップロードされた画像やファイルを管理者宛てのメールに添付した状態で送ることができます。

この機能はVer. 1.6.0より使用できます。※ Ver. 1.6.0以前はWebサーバに置かれたファイルへのパスを管理者宛てのメールに記載する形を推奨していました

ファイルを添付するには、最低でも以下の設定が必要です。各項目の詳細については、本ページをご一読ください。

  • 「メールに添付する」を有効化する
  • formタグのenctypeを指定する

画像をアップロードして添付する場合は、合わせて以下の設定も必須です。

  • アップロード許可ファイル拡張子に画像ファイルの拡張子を追加する
  • 画像をアップロードする場合も、input要素に type="file"を指定する

「メールに添付する」を有効化する

サイト管理>フォームの順にページを移動し、任意のフォームIDのフォーム管理のページへ移動します。
「ファイル添付」項目の「メールに添付する」を選択して有効にします。


ファイル添付オプションの有効化

ファイル添付オプションの有効化


フォームからアップされた画像、ファイルはメールに添付された形式で送られます。
※メールのテンプレートファイルに特別な記述は不要です。


formタグのenctypeを指定する

また、formタグのenctype属性に enctype="multipart/form-data" と指定しないとファイル等をアップロードできないため、確認してください。

アップロード許可ファイル拡張子に画像ファイルの拡張子を追加する

画像を添付する場合、画像データとしてではなくファイルとしてアップロードを行います。コンフィグ>編集設定にあります、「アップロード許可ファイル拡張子」のドキュメントの欄に、許可する拡張子(例:png, jpg, jpeg など)を追記します。

ファイルサイズを限定する(Ver. 2.6.1.4 - )

サーバーの制限を超える容量のファイルを添付されるとPHPのエラーが表示されてしまい、メールも送信されません。そこで、ここでは添付ファイルの容量の制限を行いたいと思います。(Ver. 2.6.1.4より)

指定方法

<input type="hidden" name="pdf:v#filesize" value="200"> <!-- KBで指定(200KB) -->

上記のようにバリデータと同じようにテンプレート上に指定する方法もありますが、フォームの場合は合わせて管理画面からも設定する事をお勧めします。HTMLでの指定は、知識がある人ならブラウザ上から制限を解除する事ができてしまうからです。(それでもバリデータは適切なエラーメッセージを表示するために必要です)

フォーム詳細画面で「ファイルサイズ上限値」を設定してください。(KBで指定)


フォームオプションの設定

フォームオプションの設定


エラーメッセージの記述方法

指定した容量を超えた場合や、upload_max_filesizeを超えた場合のブロック

<!-- BEGIN pdf:v#filesize -->ファイルサイズが大きすぎます<!-- END pdf:v#filesize -->

post_max_sizeを超えた場合のメッセージブロック(全体)

upload_max_filesize超えた場合、POSTが空になるのでフィールド毎にエラーは表示できません。 なので、以下の記述で全体のエラーメッセージを出力します。

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

ソースコードの例

以下は、変数名がpdfだった場合のソースコードの例です。

<tr>
    <th>PDF</th>
    <td>
        <!-- アップロード済みのファイルのプレビューエリア -->
        <!-- BEGIN_IF [{pdf@path}/nem/] -->
        <img src="%{ARCHIVES_DIR}{pdf@path}" width="450" alt="" /><br />
        <a href="%{ARCHIVES_DIR}{pdf@path}">{pdf@originalName}</a>
        <input type="hidden" name="pdf@old" value="{pdf@path}" />
        <input type="hidden" name="pdf@secret" value="{pdf@secret}" />
        <input type="hidden" name="pdf@originalName" value="{pdf@originalName}" />
        <label for="input-checkbox-pdf@edit">
            <input type="checkbox" name="pdf@edit" value="delete" id="input-checkbox-pdf@edit" />
            削除
        </label><br /><!-- END_IF -->

        <!-- ファイルをアップロードするフィールド -->
        <input type="hidden" name="pdf:v#filesize" value="500" id="pdf-v-filesize"> <!-- 500KBで制限 -->
        <input type="file" name="pdf" size="20" />
        <input type="hidden" name="field[]" value="pdf" />
        <input type="hidden" name="pdf:extension" value="file" />

        <!-- エラーメッセージ -->
        <div data-validator-label="pdf-v-filesize" class="validator-result-{pdf:v#filesize}">
            <p class="error-text"><span class="acms-icon acms-icon-attention"></span>ファイルサイズが大きすぎます。</p>
        </div>
    </td>
</tr>

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

値を挿入するinput要素は、type="file"を指定する

画像をアップロードする場合も、値を挿入するinput要素の type属性にはfileを設定してください。

記述例

<input type="file" name="pdf" size="20" />

変数名

ここではファイル添付をした時に使用できる変数名を解説します。以下変数名が「pdf」だった場合で解説します。



変数名 出力される内容
{pdf@path} ファイルが実態があるURLです。ファイル名なランダムなものになっています。
{pdf@originalName} 元のファイル名です。ダウンロード時のファイル名も元のファイル名が使用されます。
{pdf@secret} セキュリティのためのランダム文字列です。

動的フォームの基本

動的フォームはエントリーページに設置することができます。動的フォームはHTMLの知識のない人でもフォームを設置できる仕組みになっています。例えば採用ページのエントリーを書いて、更新者がそのページに採用フォームをつけることができます。

フォームでは以下のような種類のフォームパーツが用意されています。

  • テキスト
  • テキストエリア
  • ラジオ
  • セレクト
  • チェックボックス

動的フォームの導入方法

動的フォームはコンフィグ管理の機能設定から機能を有効にすることができます。動的フォーム項目の動的フォームを利用可能にするにチェックをしてください。


動的フォームの有効化

動的フォームの有効化


エントリーの詳細ページを見てみるとエントリー管理ボタンのところに[フォーム]というボタンが追加されています。このボタンを押してエントリーに動的フォームを作っていきます。


動的フォームの編集ボタン

動的フォームの編集ボタン


動的フォーム作成画面ではエントリーのユニットと同じようにフォームのパーツが追加できます。ここにはフォームIDを紐づけるフォームセットという項目があります。こちらにフォームIDを設定していきます。次は動的フォーム用のフォームIDの作り作り方について解説します。


動的フォーム編集画面

動的フォーム編集画面


フォームIDを作成

フォームIDは通常のフォームと同じようにフォーム管理の[フォームIDを作成]ボタンから作っていきます。 フォームID、フォーム名、一般のメールテンプレート、管理者のメールテンプレート、管理者のメールアドレスを設定していきます。

メールテンプレートのパスについて

動的フォームのメールテンプレートはsystemのテーマフォルダに用意されています。通常のフォームのメールテンプレートは自分で自由にレイアウトができますが、動的フォームでは自由にレイアウトなどカスタマイズができません。動的フォームのメールテンプレートのパスは以下のようになります。

SubjectTpl/include/form/subject.txt
BodyTpl/include/form/body.txt
AdminSubjectTpl/include/form/adminsubject.txt
AdminBodyTpl/include/form/adminbody.txt

上記は /themes/system/include/ 以下に存在する各ファイルとなりますが、実際に使用する場合には本文など適宜カスタマイズが必要になるため、使用するテーマディレクトリへのコピーをしてカスタマイズ・利用をすることをお勧めします。
一例として、 /themes/使用テーマディレクトリ/recruit/form/ 以下に各ファイルをコピーしカスタマイズしたものを使用する場合の設定画面は以下のようになります。他の内容に動的フォームを使いたい場合には、 /themes/使用テーマディレクトリ/aaaaa/form/ のようにもう1セットコピーして利用すれば、各フォームに合わせたメールテンプレートが使用できます。


フォームID作成画面

フォームID作成画面


動的フォーム画面からフォームIDをセット

動的フォームを設置したいエントリーに戻り、[フォーム]ボタンを押して動的フォーム作成画面で先ほど作成したフォームIDを設定してください。動的フォームで送信されたデータはこのフォームIDに蓄積されていきます。

動的フォームの項目を追加

フォームのパーツはテキスト、テキストエリア、ラジオ、セレクト、チェックボックスを追加することができます。フォームのパーツはエントリーのユニットと同じように項目を追加していってください。


動的フォーム編集ボタン

動的フォーム編集ボタン


[フォーム]ボタンを押すとフォームの編集画面に移動します。ここからテキスト、テキストエリア、ラジオ、セレクト、チェックボックスなどフォームの項目を追加することができます。


動的フォーム編集画面

動的フォーム編集画面


ラベルフォームの項目名{label}
説明このフォームユニットの説明{caption}

バリデータとコンバーターを使う

[入力チェック]のリンクをクリックすることでフォームの項目を必須にしたり、文字数制限をしたり、文字を変換したり設定することができます。フォームのバリデータとコンバーターの設定について一部ご紹介していきます。

必須にする

項目はrequiredを選択します。メッセージにエラーメッセージを入力してください。


必須入力

必須入力


数値になっているかチェック

項目はdigitsを選択します。メッセージにエラーメッセージを入力してください。


数値かチェック

数値かチェック


入力文字数を制限する

項目はminLengthか、maxLengthを選択します。値には制限したい文字数を入力し、メッセージにエラーメッセージを入力してください。


文字数のチェック

文字数のチェック


入力した文字を変換する

入力の変換 ( converter )を選択し、値に変換したい種類を入力してください。コンバーターの変換種類についてはリファレンスのconverter ( c )の項目を御参考ください。


「全角カタカナ」を「半角カタカナ」に変換

「全角カタカナ」を「半角カタカナ」に変換


1つのフォーム項目に複数のオプションを設定することができます。フォームの項目を保存するとエントリーに動的フォームが設置されました。


動的フォーム完成例

動的フォーム完成例


標準提供のテンプレートの中には、説明 {caption} が使われておりません。入力した内容を表示させる際には、テンプレートのカスタマイズが必要です。

動的フォームのためのテンプレート

動的フォームのテンプレートはメールのテンプレート、入力フォームと入力確認画面のテンプレートがあります。フォームの項目は動的に出力されるため自由なカスタマイズはできないのですが、文面や署名などはテンプレートから変更することができます。

テンプレートについて

テンプレートはsystemテーマに置いてあります。変更するときはご利用しているテーマ内にコピーしてきてください。 /themes/利用中のテーマ/include/form/adminsubject.txt

メールのテンプレート

管理者宛メールの件名

/themes/system/include/form/adminsubject.txt

管理者宛メールの本文

/themes/system/include/form/adminbody.txt

一般宛メールの件名

/themes/system/include/form/subject.txt

一般宛メールの本文

/themes/system/include/form/body.txt

入力フォームと入力確認画面のテンプレート

formタグや入力フォームと入力確認画面のテンプレートを読み込んでいます

/themes/system/include/form/unit.html

完了画面のテンプレートは、デフォルトだと「thanks.html」が指定されています

/bid/%{BID}/eid/%{EID}/tpl/thanks.html

この時、URLコンテキスト「tpl」によって、thanks.html を指定していることによって、Ver. 2.11.25 以上をお使いの場合は、そのままでは動きません。 「private/config.system.yaml」の allow_tpl_path に 「thanks.html」を指定ください。これはセキュリティ上の仕様変更によるものになります。詳細

allow_tpl_path: [thanks.html]

入力フォームのテンプレート

/themes/system/include/form/input.html

入力確認画面のテンプレート

/themes/system/include/form/confirm.html

メールの署名を変更

メールの署名は /themes/system/include/form/adminbody.txt と /themes/system/include/form/body.txt に記述されています。ご利用のテーマにコピーしてきて署名を変更します。  
/themes/ご利用テーマ/include/form/body.txt

%{BLOG_NAME}

〒000-0000
○○県○○○市○○区 ××の××の××
電話番号: 123-456-7890
E-mail: ■■■@■■■■.■■

動的フォームの動的項目と静的項目の共存

動的フォームの入力フォームと確認画面のテンプレートをカスタマイズすることでHTMLのカスタムフィールドを埋め込むこともできます。例えば、お名前のフォーム項目は必ずフォームに必要だから予め固定のカスタムフィールドにするだとか、都道府県の項目はいれたいけど都道府県を入力フォームから入れていくのは大変だったりします。動的フォームの項目を一部HTMLで記述されたカスタムフィールドにすることができます。

HTMLで記述されたカスタムフィールドを埋め込む

動的フォームにHTMLで記述されたカスタムフィールドを埋め込むときは動的フォームパーツの上か下に埋め込むことになります。動的フォームのパーツの間にHTMLのカスタムフィールドを埋め込むことができず、順番を自由に設定することはできません。
例えば都道府県のHTMLのカスタムフィールドを埋め込んでみましょう。

入力フォームに埋め込む

動的フォームの入力フォームのテンプレート /themes/system/include/form/input.html をご利用のテーマにコピーしてきます。
/themes/ご利用のテーマ/include/form/input.html

Form2_Unitモジュールのcolumn:loopの外にHTMLで記述されたカスタムフィールドを記述してください。

<tr>
  <th>都道府県</th>
  <td>
  <select class="formSelect" name="pref_code">
    <option value="" selected="selected">選択してください ▼</option>
    <option value="北海道"\{pref_code:selected#北海道\}>北海道</option>
      
    <option value="青森県"\{pref_code:selected#青森県\}>青森県</option>
    <option value="岩手県"\{pref_code:selected#岩手県\}>岩手県</option>
    <option value="宮城県"\{pref_code:selected#宮城県\}>宮城県</option>
    <option value="秋田県"\{pref_code:selected#秋田県\}>秋田県</option>
    <option value="山形県"\{pref_code:selected#山形県\}>山形県</option>
    <option value="福島県"\{pref_code:selected#福島県\}>福島県</option>
    <option value="茨城県"\{pref_code:selected#茨城県\}>茨城県</option>
    <option value="栃木県"\{pref_code:selected#栃木県\}>栃木県</option>
    <option value="群馬県"\{pref_code:selected#群馬県\}>群馬県</option>
      
    <option value="埼玉県"\{pref_code:selected#埼玉県\}>埼玉県</option>
    <option value="千葉県"\{pref_code:selected#千葉県\}>千葉県</option>
    <option value="東京都"\{pref_code:selected#東京都\}>東京都</option>
    <option value="神奈川県"\{pref_code:selected#神奈川県\}>神奈川県</option>
    <option value="新潟県"\{pref_code:selected#新潟県\}>新潟県</option>
    <option value="富山県"\{pref_code:selected#富山県\}>富山県</option>
    <option value="石川県"\{pref_code:selected#石川県\}>石川県</option>
    <option value="福井県"\{pref_code:selected#福井県\}>福井県</option>
    <option value="山梨県"\{pref_code:selected#山梨県\}>山梨県</option>
      
    <option value="長野県"\{pref_code:selected#長野県\}>長野県</option>
    <option value="岐阜県"\{pref_code:selected#岐阜県\}>岐阜県</option>
    <option value="静岡県"\{pref_code:selected#静岡県\}>静岡県</option>
    <option value="愛知県"\{pref_code:selected#愛知県\}>愛知県</option>
    <option value="三重県"\{pref_code:selected#三重県\}>三重県</option>
    <option value="滋賀県"\{pref_code:selected#滋賀県\}>滋賀県</option>
    <option value="京都府"\{pref_code:selected#京都府\}>京都府</option>
    <option value="大阪府"\{pref_code:selected#大阪府\}>大阪府</option>
    <option value="兵庫県"\{pref_code:selected#兵庫県\}>兵庫県</option>
      
    <option value="奈良県"\{pref_code:selected#奈良県\}>奈良県</option>
    <option value="和歌山県"\{pref_code:selected#和歌山県\}>和歌山県</option>
    <option value="鳥取県"\{pref_code:selected#鳥取県\}>鳥取県</option>
    <option value="島根県"\{pref_code:selected#島根県\}>島根県</option>
    <option value="岡山県"\{pref_code:selected#岡山県\}>岡山県</option>
    <option value="広島県"\{pref_code:selected#広島県\}>広島県</option>
    <option value="山口県"\{pref_code:selected#山口県\}>山口県</option>
    <option value="徳島県"\{pref_code:selected#徳島県\}>徳島県</option>
    <option value="香川県"\{pref_code:selected#香川県\}>香川県</option>
      
    <option value="愛媛県"\{pref_code:selected#愛媛県\}>愛媛県</option>
    <option value="高知県"\{pref_code:selected#高知県\}>高知県</option>
    <option value="福岡県"\{pref_code:selected#福岡県\}>福岡県</option>
    <option value="佐賀県"\{pref_code:selected#佐賀県\}>佐賀県</option>
    <option value="長崎県"\{pref_code:selected#長崎県\}>長崎県</option>
    <option value="熊本県"\{pref_code:selected#熊本県\}>熊本県</option>
    <option value="大分県"\{pref_code:selected#大分県\}>大分県</option>
    <option value="宮崎県"\{pref_code:selected#宮崎県\}>宮崎県</option>
    <option value="鹿児島県"\{pref_code:selected#鹿児島県\}>鹿児島県</option>
      
    <option value="沖縄県"\{pref_code:selected#沖縄県\}>沖縄県</option>
  </select>
  <input type="hidden" name="field[]" value="pref_code" />
  </td>
</tr>

HTMLで記述されたカスタムフィールドの都道府県が追加されました。カスタムフィールドの変数が認識されるように変数の前にバックスラッシュ(\)でエスケープをします。



確認画面に項目を追加する

フォームの確認画面にも追加したHTMLのカスタムフィールドを追加してください。
Form2_Unitモジュールのcolumn:loopの外にHTMLで記述されたカスタムフィールドを追加します。
/themes/ご利用のテーマ/include/form/confirm.html

先ほど追加した都道府県の場合は以下のようになります。こちらもカスタムフィールドの変数にエスケープして記述します。

<tr>
  <th>都道府県</th>
  <td>\{pref_code\}</td>
</tr>

メールのテンプレートに項目を追加する

入力フォームと確認画面にHTMLで記述されたカスタムフィールドを追加してきました。追加したHTMLで記述されたカスタムフィールドの変数をメールのテンプレートにも記述する必要があります。メールのテンプレートもご利用のテーマにコピーしてきてからカスタマイズをしてください。

/themes/ご利用のテーマ/include/form/body.txt
/themes/ご利用のテーマ/include/form/adminbody.txt

追加する場所はForm2_Unitモジュールの外に追加してください。
メールのテンプレートはカスタムフィールドの変数にエスケープは必要ありません。

メールアドレス  : {email}<!-- BEGIN_MODULE Form2_Unit -->
<!-- BEGIN column:loop --><!-- BEGIN text -->
{label}  : \{form-unit-{utid}\}<!-- END text --><!-- BEGIN textarea -->
{label}  : \{form-unit-{utid}\}<!-- END textarea --><!-- BEGIN radio -->
{label}  : \{form-unit-{utid}\}<!-- END radio --><!-- BEGIN select -->
{label}  : \{form-unit-{utid}\}<!-- END select --><!-- BEGIN checkbox -->
{label}  : <!-- BEGIN\ form-unit-{utid}:loop -->\{form-unit-{utid}\} <!-- END\ form-unit-{utid}:loop --><!-- END checkbox -->
<!-- END column:loop --><!-- END_MODULE Form2_Unit -->
都道府県  : {pref_code}

このような方法で動的フォームにHTMLで記述されたカスタムフィールドを埋め込むことができます。

補足

ver 2.6.1.0よりradio,select,checkboxのループ内にて項目の連番変数 {i} を出力するように追加されました。
下記サンプルコードを参考にしてください。内容は一部抜粋しています。

 <!-- BEGIN radio -->
 <tr>
  <th><label>{label}</label></th>
  <td class="acms-radio">
   <!-- BEGIN radio#val:loop -->
   <label class="acms-form-radio"><input type="radio" name="form-unit-{utid}" value="{value}"\{form-unit-{utid}:checked#{value}\}>
   <i class="acms-ico-radio"></i>
   {value}:{i}
   </label><!-- END radio#val:loop -->
  </td>
 </tr><!-- END radio -->

メールでの文字コード指定

CMS Ver. 3.0.24で ISO-2022-JP 文字コードを廃止したため、UTF-8 のみとなりました。詳しくは Ver. 3.0.24 フィックスバージョンリリースのお知らせ をご覧ください。

ここでは、フォームでのメールで使用される文字コードの指定方法をみていきます。

本文の文字コード

本文の文字コードは、管理ページ > フォーム > フォーム詳細 の 文字コード(テキストメール)で設定します。

よく使われる文字コード

  • ISO-2022-JP 古くから電子メールなどで使われている文字コード。JISコードとも呼ばれる。
  • UTF-8 多言語対応するならこの文字コードを指定ください。

文字コード変換

CMS Ver. 3.0.24で ISO-2022-JP 文字コードを廃止したため、UTF-8 のみとなりました。詳しくは Ver. 3.0.24 フィックスバージョンリリースのお知らせ をご覧ください。

フォームのメール送信で、文字コードにISO-2022-JPなどを指定すると、表現できる文字数がUTF-8などに比べると少ないため、表示できない文字ができてます。

そこで、送信時にUTF-8からISO-2022-JPなどに変換するときに、存在しない文字を別の文字に置き換える仕組みを利用して、文字化けする文字を少なくしましょう。

設定ファイル

以下の命名規則をもつファイルを作成します。

/private/const/mail/[小文字の文字コード名].php

ISO-2022-JPの場合は、デフォルトで用意されています。

<?php
// UTF-8 → ISO-2022-JP
$const  = array(
/* --- 0x2100 - 0x2138 (文字種記号) --- */
// 0x2100 - 0x210F
"\xE2\x80\xA2" => "・",
"\xE2\x84\x80" => "a/c",
"\xE2\x84\x81" => "a/s",
...

変換例

例えば、UTF-8の㈱はISO-2022-JPで文字化けします。以下のような変換テーブルを書くと㈱を(株)のように3文字を使ったものに変換するので、文字化けを防ぐ事ができます。

...
"\xE3\x88\xB1" => "(株)",
...

JavaScriptによるバリデート

これまでバリデーターは、フォームに入力された内容を、サーバーに送信するとサーバーからのレスポンスとしてエラー結果が返ってくるものでした。

そこで今回は、a-blog cmsに標準で搭載されているJavaScriptを利用したバリデーター機能を利用してみたいと思います。

JavaScriptバリデーターの利点として、エンドユーザーのブラウザ側でエラーを判定するため、エラーがあったときのレスポンスが高速になるというメリットがあります。また、サーバーに余分な負荷をかけずに済むというメリットも挙げられます。

必要な作業

  1. a-blog cmsが標準で搭載しているJavaScript(acms.js)の読み込み
  2. 場合によってCSSにスタイルの追記作業
  3. この機能を使うためのクラスを付与
  4. エラーメッセージの記述を書き換え

通常のバリデーターも動かした上でJavaScriptバリデーターを動かすので、JavaScriptがOFFの環境でもエラー処理が動きます。

実装

まずは、組み込みJSを使うためにacms.jsを読み込みます。読み込みについては、こちらを参考ください。 読み込みが必要なJavascriptファイル

CSSを追記する

デフォルトの設定では、a-blog cmsのシステムのスタイルに組み込み済みですので、特に設定していただかなくても動きます。クラスを変更する場合や、スタイルを調整する場合は以下を参考に書き換えてください。

/* エラーメッセージ非表示時のスタイル */
.validator-result-,
.validator-result-1,
.v-result-,
.v-result-1 {
  display: none;
}

/* エラーメッセージ表示時のスタイル */
.validator-result-error,
.validator-result-0,
.v-result-error,
.v-result-0 {
  display: block;
  color: #F00;
}

クラスの付与

フォームでJavaScriptバリデーターを使用できるようにするために、以下のクラスをフォームに振ります。

<form action="" method="post" class="js-validator" enctype="multipart/form-data">
...
</form>

エラーメッセージの記述を書き換える

今までのエラーメッセージの記述

<th>ハンドルネーム (必須)</th>
<td>
  <input type="text" name="name" value="{name}">
  <input type="hidden" name="field[]" value="name">
  <input type="hidden" name="name:validator#required">
  <!-- BEGIN name:validator -->
  <p class="notice">ハンドルネームは必須項目です</p>
  <!-- END name:validator -->
</td>

JavaScriptバリデーターのエラーメッセージの記述

<th>ハンドルネーム (必須)</th>
<td>
  <input type="text" name="name" value="{name}">
  <input type="hidden" name="field[]" value="name">
  <input type="hidden" name="name:validator#required" id="name-v-required">
  <label for="name-v-required" class="validator-result-{name:validator#required}">
    ハンドルネームは必須項目です
  </label>
</td>
5行目id="name-v-required" を追加
6行目テンプレートタグのブロックから、label要素( classとfor属性も必須 )に変更

validator指定している要素のidと、その要素に対するエラーメッセージのラベルのfor属性を一致させてください。

JavaScriptが利用するための記述を加える事で、エラー時にlabel要素のclass名が書き換えられます。それにより、表示/非表示のCSSが操作されることでエラーメッセージとして動作します。

初期の入力画面( step )にも、再入力画面( step#reapply )と同様に サーバーに送信される前の動作なので、初期の入力画面でもエラーメッセージが表示される必要があります。再入力画面( step#reaply )と同じように書き換えましょう。インクルード機能を使い同じテンプレートを使う事をお勧めします。

組み込みJSの設定

以下のような設定が/js/config.jsで設定できます。

設定項目説明デフォルト値
validatorFormMarkバリデーターを使うform要素のセレクター'form.js-validator'
validatorResultClassエラーメッセージ要素につけるクラス'validator-result-'
validatorOkClassバリデートにパスした時につけるクラス'valid'
validatorNgClassバリデートに引っかかった場合につけるクラス'invalid'

validatorOkClassvalidatorNgClassは 該当する data-validator="フィールド名" が付与されている要素に、バリデートした結果に対して対応するクラスを付与します。

さあ、確認してみましょう

一通り編集し終わったら、動作を確認してみましょう。

JavaScriptバリデーターを利用すると画面遷移なしで即座にエラーを表示できるため、エンドユーザーに対するレスポンス向上につながります。記述は若干多くなりますが、積極的に利用してみてください。

JavaScriptバリデーターを実装したサンプルコード

<h3>お問い合わせ情報</h3>
<div class="entry-container">
<table class="contact-form">
  <tr>
    <th>
      <label for="description">ご用件</label><span class="label-required">必須</span>
      <label class="valid-mark" data-validator="description">
        <span class="acms-icon acms-icon-checklist"></span>
      </label>
    </th>
    <td>
  
      <select id="description" class="form-select" name="description[]">
        <option value="" selected="selected">選択してください</option>
        <option value="ご質問"{description:selected#ご質問}>ご質問</option>
        <option value="ご要望"{description:selected#ご要望}>ご要望</option>
        <option value="資料請求"{description:selected#資料請求}>資料請求</option>
        <option value="その他"{description:selected#その他}>その他</option>
      </select>
      <input type="hidden" name="field[]" value="description">
      <input type="hidden" name="description:v#required" id="description-v">

      <label for="description-v" class="validator-result-{description:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>お問い合わせ種類を選択してください。</p>
      </label>
    </td>
  </tr>
  <tr>
    <th>
      <label for="inquiry">お問い合わせ内容</label><span class="label-required">必須</span>
      <label class="valid-mark" data-validator="inquiry">
        <span class="acms-icon acms-icon-checklist"></span>
      </label>
    </th>
    <td>
      <textarea id="inquiry" name="inquiry" rows="5" class="acms-form-width-full" placeholder="お問い合わせ内容を入力してください。" data-validator="inquiry">{inquiry}</textarea>
      <input type="hidden" name="field[]" value="inquiry">
      <input type="hidden" name="inquiry:v#required" id="inquiry-v-required">
      <input type="hidden" name="inquiry:c" value="KV">

      <label for="inquiry-v-required" class="validator-result-{inquiry:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>お問い合わせ内容を入力してください。</p>
      </label>
    </td>
  </tr>
</table>
</div>

<h3>お客様情報</h3>
<div class="entry-container">
<table class="contact-form h-adr">
  <tr>
    <th><label for="organization">会社名</label></th>
    <td>
      <input id="organization" type="text" name="organization" autocomplete="organization" value="{organization}" class="acms-form-width-full" placeholder="株式会社サンプルサイト">
      <input type="hidden" name="field[]" value="organization">
      <input type="hidden" name="organization:c" value="KV">
    </td>
  </tr>
  <tr>
    <th>
      <label for="name">お名前</label><span class="label-required">必須</span>
      <label class="valid-mark" data-validator="name">
        <span class="acms-icon acms-icon-checklist"></span>
      </label>
    </th>
    <td>
      <input id="name" type="text" name="name" autocomplete="name" class="acms-form-width-full" value="{name}" placeholder="山田 太郎" data-validator="name">
      <input type="hidden" name="field[]" value="name">
      <input type="hidden" name="name:v#required" id="name-v-required">
      <input type="hidden" name="name:c" value="KV">

      <label for="name-v-required" class="validator-result-{name:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>お名前を入力してください。</p>
      </label>
    </td>
  </tr>
  <tr>
    <th>
      <label for="email">メールアドレス</label><span class="label-required">必須</span>
      <label class="valid-mark" data-validator="email">
        <span class="acms-icon acms-icon-checklist"></span>
      </label>
    </th>
    <td>
      <input id="email" type="email" name="email" autocomplete="email" value="{email}" class="acms-form-width-full" placeholder="info@example.com" data-validator="email">
      <input type="hidden" name="field[]" value="email">
      <input type="hidden" name="email:v#required" id="email-v-required">
      <input type="hidden" name="email:v#email" id="email-v-email">
      <input type="hidden" name="email:c" value="a">

      <label for="email-v-required" class="validator-result-{name:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>メールアドレスを入力してください。</p>
      </label>
      <label for="email-v-email" class="validator-result-{name:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>正しいメールアドレスを入力してください。</p>
      </label>
    </td>
  </tr>
  <tr>
    <th><label for="tel">お電話番号</label></th>
    <td>
      <input id="tel" type="tel" name="tel" autocomplete="tel" value="{tel}" size="12" class="acms-form-width-full" placeholder="000-000-0000">
      <input type="hidden" name="field[]" value="tel">
      <input type="hidden" name="tel:c" value="n">
    </td>
  </tr>
  <tr>
    <th><label for="address">ご住所</label><span class="label-required">必須</span></th>
    <td>
      <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
      <span class="p-country-name" style="display:none;">Japan</span>
      <div class="acms-form-group">
        〒<input type="text" name="postal-code" autocomplete="postal-code" value="{postal-code}" id="postal-code" class="acms-form-width-mini p-postal-code" size="8" maxlength="7" placeholder="0000000" data-validator="postal-code">
        <input type="hidden" name="field[]" value="postal-code">
        <input type="hidden" name="postal-code:c" value="a">

        <select class="form-select p-region" name="address-level1" autocomplete="address-level1">
          <option value="" selected="selected">都道府県</option>
          <option value="北海道"{address-level1:selected#北海道}>北海道</option>

          <option value="青森県"{address-level1:selected#青森県}>青森県</option>
          <option value="岩手県"{address-level1:selected#岩手県}>岩手県</option>
          <option value="宮城県"{address-level1:selected#宮城県}>宮城県</option>
          <option value="秋田県"{address-level1:selected#秋田県}>秋田県</option>
          <option value="山形県"{address-level1:selected#山形県}>山形県</option>
          <option value="福島県"{address-level1:selected#福島県}>福島県</option>
          <option value="茨城県"{address-level1:selected#茨城県}>茨城県</option>
          <option value="栃木県"{address-level1:selected#栃木県}>栃木県</option>
          <option value="群馬県"{address-level1:selected#群馬県}>群馬県</option>

          <option value="埼玉県"{address-level1:selected#埼玉県}>埼玉県</option>
          <option value="千葉県"{address-level1:selected#千葉県}>千葉県</option>
          <option value="東京都"{address-level1:selected#東京都}>東京都</option>
          <option value="神奈川県"{address-level1:selected#神奈川県}>神奈川県</option>
          <option value="新潟県"{address-level1:selected#新潟県}>新潟県</option>
          <option value="富山県"{address-level1:selected#富山県}>富山県</option>
          <option value="石川県"{address-level1:selected#石川県}>石川県</option>
          <option value="福井県"{address-level1:selected#福井県}>福井県</option>
          <option value="山梨県"{address-level1:selected#山梨県}>山梨県</option>

          <option value="長野県"{address-level1:selected#長野県}>長野県</option>
          <option value="岐阜県"{address-level1:selected#岐阜県}>岐阜県</option>
          <option value="静岡県"{address-level1:selected#静岡県}>静岡県</option>
          <option value="愛知県"{address-level1:selected#愛知県}>愛知県</option>
          <option value="三重県"{address-level1:selected#三重県}>三重県</option>
          <option value="滋賀県"{address-level1:selected#滋賀県}>滋賀県</option>
          <option value="京都府"{address-level1:selected#京都府}>京都府</option>
          <option value="大阪府"{address-level1:selected#大阪府}>大阪府</option>
          <option value="兵庫県"{address-level1:selected#兵庫県}>兵庫県</option>

          <option value="奈良県"{address-level1:selected#奈良県}>奈良県</option>
          <option value="和歌山県"{address-level1:selected#和歌山県}>和歌山県</option>
          <option value="鳥取県"{address-level1:selected#鳥取県}>鳥取県</option>
          <option value="島根県"{address-level1:selected#島根県}>島根県</option>
          <option value="岡山県"{address-level1:selected#岡山県}>岡山県</option>
          <option value="広島県"{address-level1:selected#広島県}>広島県</option>
          <option value="山口県"{address-level1:selected#山口県}>山口県</option>
          <option value="徳島県"{address-level1:selected#徳島県}>徳島県</option>
          <option value="香川県"{address-level1:selected#香川県}>香川県</option>

          <option value="愛媛県"{address-level1:selected#愛媛県}>愛媛県</option>
          <option value="高知県"{address-level1:selected#高知県}>高知県</option>
          <option value="福岡県"{address-level1:selected#福岡県}>福岡県</option>
          <option value="佐賀県"{address-level1:selected#佐賀県}>佐賀県</option>
          <option value="長崎県"{address-level1:selected#長崎県}>長崎県</option>
          <option value="熊本県"{address-level1:selected#熊本県}>熊本県</option>
          <option value="大分県"{address-level1:selected#大分県}>大分県</option>
          <option value="宮崎県"{address-level1:selected#宮崎県}>宮崎県</option>
          <option value="鹿児島県"{address-level1:selected#鹿児島県}>鹿児島県</option>

          <option value="沖縄県"{address-level1:selected#沖縄県}>沖縄県</option>
        </select>
        <input type="hidden" name="field[]" value="address-level1">
      </div>
      <textarea id="address" name="address" rows="2" class="acms-form-width-full p-locality p-street-address p-extended-address" data-validator="address">{address}</textarea>
      <input type="hidden" name="field[]" value="address">
      <input type="hidden" name="postal-code:v#required" id="postal-code-v-required">
      <input type="hidden" name="postal-code:v#regex" value="^[\d]\{7\}$" id="postal-code-v-regex">
      <input type="hidden" name="address-level1:v#required" id="address-level1-v-required">
      <input type="hidden" name="address:v#required" id="address-v-required">
      <input type="hidden" name="address:c" value="KV">

      <label for="postal-code-v-required" class="validator-result-{postal-code:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>郵便番号が入力されていません。</p>
      </label>
      <label for="postal-code-v-regex" class="validator-result-{postal-code:v#regex}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>郵便番号はハイフンなしの数値7桁で入力してください。</p>
      </label>
      <label for="address-level1-v-required" class="validator-result-{address-level1:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>都道府県が選択されていません。</p>
      </label>
      <label for="address-v-required" class="validator-result-{address:v#required}">
        <p class="error-text"><span class="acms-icon acms-icon-attention"></span>住所が入力されていません。</p>
      </label>
    </td>
  </tr>
</table>
</div>

フォームの編集権限を変更する

config.system.yaml に1行追記し、フォームの編集権限を変更できます。この機能はVer.2.11から利用可能です。

フォームの編集権限は管理者または編集者を選択できます。初期値は編集者以上になっています。



項目 選択肢 初期値
form_admin_authority administrator | editor editor

キーワード検索フォーム(全文検索フォーム)

a-blog cms でキーワード検索フォーム(キーワード検索は全文検索とも呼ばれます)を実装する方法を紹介します。

a-blog cms でキーワード検索フォームを実装するには、POST_2GET モジュールを利用して、keywordのURLコンテキストに検索したいキーワードを含んだURLのページに遷移するフォームのテンプレートを作成します。

そのため、検索結果のページのモジュールIDの設定には「キーワード(keyword)」の項目にチェックをつけ、URLコンテキストを優先させる必要があります。

以下、キーワード検索フォームのサンプルになります。 検索結果のページは、input type="hidden"name="tpl"を記述して、テンプレートを指定しています。

<form action="/search.html" method="post" name="searchForm" role="search" aria-label="検索フォーム">
    <input type="search" id="searchForm" name="keyword" value="%{KEYWORD}" size="15" class="search-form-input">
    <input type="hidden" name="query" value="keyword">
    <button type="submit" name="ACMS_POST_2GET" class="acms-btn btn-search">検索</button>
    <input type="hidden" name="tpl" value="/search.html">
    <input type="hidden" name="bid" value="%{BID}">
</form>

キーワード検索の仕様

a-blog cms が行うキーワード検索の仕様について説明します。

a-blog cms では、keywordのURLコンテキストに指定された文字列を利用してキーワード検索(全文検索)を行います。

キーワード指定方法について、いくつかオプションがあります。

複数キーワード検索

A B のように複数のキーワードを「スペース(空白文字)」でつなげることで、複数キーワードを含むページを検索することができます。

除外検索

A -B のように除外したいキーワードを「-」の後に指定することで、キーワードを除外したページを検索できます。

A -B -C のように、「スペース(空白文字)」でつなげること除外したいキーワードを複数指定することも可能です。

フォームのセキュリティ対応

フォームのセキュリティ設定周りについて学びましょう。

フォームは、一般ユーザーが送信できる箇所になり、セキュリティをしっかりと考えないといけない箇所になります。 標準的なセキュリティ対策は標準でされていますが、フォーム設定などによってもよりセキュリティを高めれますので、設定する意味や設定内容をここで学びましょう。

入力チェック

できる限り、テンプレートで指定したバリデーションは、「フォーム設定(管理画面でのフォーム詳細画面)」でもするようにしましょう。
ここの設定をおこたると、少しHTMLの知識のある人なら、開発者ツールでHTMLを変更し、バリデーションを突破されてしまう為になります。

テンプレートでのバリデーション設定

テンプレートでのバリデーション設定は以下のコードのようにHTMLによって設定できます。 ただし単なるHTMLコードなので、ブラウザの開発者ツールなどを利用すると、簡単にバリデーションの記述を削除して突破されてしまいます。

<input type="text" name="name" value="{name}" data-validator="name" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:v#required" value="" id="name-v-required" />
<div data-validator-label="name-v-required" class="validator-result-{name:v#required}">
  <p class="error-text">
    <span class="acms-admin-icon acms-admin-icon-attention"></span>名前は必須入力です。
  </p>
</div>

フォーム設定でのバリデーション設定

フォーム設定でバリデーション設定すると、サーバーサイドでのチェックになるので、攻撃者はこのバリデーションを突破できなくなります。



メールアドレスのテンプレート指定

メールアドレスの「テンプレート指定」は出来るだけ無効化させましょう。 バリデーションと同じようにテンプレートでの指定は、攻撃者がブラウザの開発者ツールなどで、自由に変更できてしまいます。 必要のない項目は「テンプレート指定を無効」にチェックをつけて無効化させましょう。

To, From, AdminTo, AdminFrom に「テンプレート指定を無効」にチェックを付けた場合は、必ず管理画面でメールアドレスを設定しましょう。設定しないと宛先と差出人の情報が空となり、メール送信で失敗します。

おすすめ設定

以下は、おすすめの設定内容になります。

一般メール設定

お問い合わせ者に自動返信するメールの設定になります。 お問い合わせ者に送信先メールアドレスさえフォームで入力してもらえればいいので、「To」以外はテンプレートで指定できないようにします。



項目 テンプレート指定
To 有効
From 固定値 無効 ✅
Cc 空 or 固定値 無効 ✅
Bcc 空 or 固定値 無効 ✅
Reply-To 空 or 固定値 無効 ✅

一般メール設定の設定例

一般メール設定の設定例


管理者宛メール設定

管理者宛メールは、送信先が決まっているので「AdminTo」をテンプレートで指定できなくします。

「AdminFrom」はお問い合わせ者のメールアドレスをテンプレートで設定することも多いと思いますが、おすすめとしては「AdminFrom」も固定にしてしまいます。 というのも、メールはCMSがあるサーバー、またはSMTPサーバーから送信されますので、Fromのメールアドレスドメインと送信サーバーが合わずFromの偽装にあたり迷惑メール扱いになる可能性が高いためになります。

ただ、このままでは管理者に届いたメールを返信しようと思っても、返信できないので「AdminReply-To」にお問い合わせ者のメールアドレスをテンプレートで指定するようにします。 これで、メーラーで返信する時、お問い合わせ者に返信できるようになります。



項目 テンプレート指定
AdminTo 固定値 無効 ✅
AdminFrom 固定値 無効 ✅
AdminCc 空 or 固定値 無効 ✅
AdminBcc 空 or 固定値 無効 ✅
AdminReply-To 有効

管理者宛メール設定の設定例

管理者宛メール設定の設定例


複数指定

特に理由がない限り複数指定できないようにチェックをつけましょう。
複数指定できてしまうと、フォームで大量のメールアドレスをカンマ続きで指定する事により、大量のメールを送信できてしまうことになります。



そもそも自動返信メールを送らない

問い合わせ受け付けメール(自動返信メール)を投稿者アドレスに送信しない設定にするのも方法の一つです。 この場合、そもそもメールが送信されないので、セキュリティを高めることができます。

ただしお問い合わせ者が正常にメールが送信されたか判断しずらいので、ここは、利便性とセキュリティを比べて判断するようにしましょう。

メール送信しないように設定する方法

フォーム設定で、メールアドレスを全て空にして、テンプレートからも指定できなくしましょう。これでメールは送信されなくなります。


メール送信しないように設定する方法

メール送信しないように設定する方法


reCAPTCHAの導入

標準機能ではありませんが、よりフォームのセキュリティを高めるために、ロボットか判断するGoogleの「reCAPTCHA」サービスと連携する方法がございます。
a-blog cms の拡張アプリとして用意されていますので、こちらもご検討ください。

https://github.com/appleple/acms-recaptcha