Movable Type

ホーム » Movable Type » A-Form » A-Form ドキュメント » A-Form用テンプレートカスタマイズ

A-Form用テンプレートカスタマイズ

←A-Form ドキュメントTOPに戻る 

はじめに

A-Formで生成されたフォームは次の画面から構成されます。

これらの画面は次のファイルをテンプレートとして利用することで生成されます。

入力画面plugins/AForm/tmpl/aform_form.tmpl
確認画面plugins/AForm/tmpl/aform_confirm.tmpl
完了画面plugins/AForm/tmpl/aform_finish.tmpl
エラー画面plugins/AForm/tmpl/aform_error.tmpl

入力画面のカスタマイズ

入力画面はブログ記事、またはウェブページに埋め込まれることで出力されます。
このため、ヘッダ、フッタ、ナビゲーションなどはブログ記事側のテンプレートで生成されます。

aform_form.tmplの前半は

などから構成されています。

これらの部分はAFormの内部的実装をよく理解していない場合は、
変更しないようにお願いします。

フォームの各項目の出力は下記で行われます。

<mt:loop name="fields">
<mt:if name="type" like="^(label|note)$"><mt:Ignore></mt:Ignore>
  <mt:AFormFieldInputExample aform_id="$aform_id" parts_id="$parts_id">
  <mt:AFormFieldInput aform_id="$aform_id" parts_id="$parts_id">
  <mt:AFormFieldError aform_id="$aform_id" parts_id="$parts_id">
<mt:else name="type" eq="parameter">
  <mt:if name="show_parameter">
<dl>
  <dt><mt:AFormFieldLabel aform_id="$aform_id" parts_id="$parts_id">
  <mt:AFormFieldValidation aform_id="$aform_id" parts_id="$parts_id"></dt>
  <dd><mt:AFormFieldInputExample aform_id="$aform_id" parts_id="$parts_id"></dd>
  <dd><mt:AFormFieldInput aform_id="$aform_id" parts_id="$parts_id"></dd>
  <dd><mt:AFormFieldError aform_id="$aform_id" parts_id="$parts_id"></dd>
</dl>
  <mt:else>
    <mt:AFormFieldInput aform_id="$aform_id" parts_id="$parts_id">
  </mt:if>
<mt:else><mt:Ignore></mt:Ignore>
<dl>
  <dt><mt:AFormFieldLabel aform_id="$aform_id" parts_id="$parts_id">
  <mt:AFormFieldValidation aform_id="$aform_id" parts_id="$parts_id"></dt>
  <dd><mt:AFormFieldInputExample aform_id="$aform_id" parts_id="$parts_id"></dd>
  <dd><mt:AFormFieldInput aform_id="$aform_id" parts_id="$parts_id"></dd>
  <dd><mt:AFormFieldError aform_id="$aform_id" parts_id="$parts_id"></dd>
</dl>
</mt:if>
</mt:loop>

この部分以降については、AFormの内部的実装をよく理解していない場合は、
変更しないようにお願いします。

filedsは、「フォームの編集」画面で設定した
各入力フォームを表現するハッシュの配列になっています。

MTLoopでこのハッシュの配列をループして描画をしています。
ループ内は、

* 「見出し」パーツ or 「コメント・注釈パーツ」パーツか
* 「外部パラメータ」パーツか
* それ以外か

によって分岐しています。

ハッシュキーで使用されているものは次のものです。

typeフィールドの種類
aform_idフォームのID
parts_id配置されたパーツそれぞれのID
show_parameter外部パラメータで「フォーム内に表示する」を有効にしたかどうか

typeがとりうる値は次のとおりです。

メールアドレスemail
郵便番号zipcode
都道府県prefecture
電話番号tel
URLurl
個人情報保護方針privacy
カレンダーcalendar
氏名name
氏名フリガナkana
見出しlabel
コメント・注釈note
テキストtext
複数行テキストtextarea
ドロップダウンリストselect
チェックボックスcheckbox
ラジオボタンradio
ファイルアップロードupload
外部パラメータparameter
パスワードpassword

AFormは配置された各パーツを描画するために次のタグを提供しています。

タグ名モディファイア説明
AFormFieldInputaform_id, parts_id入力フィールドを返す
AFormFieldInputExampleaform_id, parts_id凡例を返す
AFormFieldLabelaform_id, parts_idラベルを返す
AFormFieldErroraform_id, parts_idAjaxエラーメッセージを返す
AFormFieldValidationaform_id, parts_id文字数上限などの制限値に関する情報を返す

aform_form.tmplのデフォルトは、汎用性のためループで記述されていますが、
ループの中でtypeやparts_idで処理を分岐させたり、

もしフォームの項目が固定的ならば parts_idをハードに記述して
フォームのHTML全体を自由に記述することもできます。

<table class="form-table" id="address" summary="連絡先情報変更フォーム。各行に入力項目名と入力欄。">
<tbody>
<tr class="name">
<th>
  <mt:AFormFieldLabel aform_id="1" parts_id="name">
  <mt:AFormFieldValidation aform_id="1" parts_id="name">
  <mt:AFormFieldInputExample aform_id="1" parts_id="name">
</th>
<td>
  <mt:AFormFieldInput aform_id="1" parts_id="name">
  <mt:AFormFieldError aform_id="1" parts_id="name"></dd>
</td>
</tr>
</table>

確認画面のカスタマイズ

確認画面は plugins/AForm/aform_engine.cgi によって描画されます。
aform_engine.cgiはplugins/AForm/tmpl/aform_confirm.tmpl を使って画面を描画します。

aform_confirm.tmplは、aform_form.tmplとは異なり、HTMLヘッダや
ページ表示上のヘッダの描画も担当しています。

構築中のサイトとHTMLヘッダや、表示上のヘッダ部分を揃えるためには、
構築中のサイトと同一のテンプレートモジュールを読みこませる必要があります。

初期状態では次の通り記述されています。

<mt:if name="use_mt_blog_template_set_ver42">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<$mt:include module="$module_html_head"$>
<title><$mt:var name="title" escape="html"$></title>
</head>
<body id="<$mt:BlogTemplateSetID$>" class="mt-entry-archive <$mt:Var name="page_layout"$>">
    <div id="container">
        <div id="container-inner">
            <$mt:include module="$module_banner_header"$>
            <div id="content">
                <div id="content-inner">
<mt:else>
<$mt:include module="$module_header">
</mt:if>

MTにインストールされているテーマはヘッダの出力の仕方が大きく次の2タイプに大別されます。

A-Formではこの2タイプに対応していますが、もしこれとは違った作りをしている場合は、
この部分を修正してください。

また、同様にフッターも初期状態では次の通り記述されています。

<mt:if name="use_mt_blog_template_set_ver42">
                </div>
            </div>
            <$mt:include module="$module_banner_footer"$>
        </div>
    </div>
</body>
</html>
<mt:else>
<$mt:include module="$module_footer"$>
</mt:if>

A-Formではこの2タイプに対応していますが、もしこれとは違った作りをしている場合は、
この部分を修正してください。

「module_banner_header」「$module_footer」などの変数値の具体的な値は
plugins/AForm/lib/AForm/L10n/ja.pm に記述されています。

ヘッダー部分以降は

などが続きます。

これらの部分はAFormの内部的実装をよく理解していない場合は、
変更しないようにお願いします。

入力した各項目の出力は下記で行われます。

<mt:loop name="fields">
<mt:if name="type" like="^(label|note)$"><mt:Ignore></mt:Ignore>
  <mt:AFormFieldInput aform_id="$aform_id" parts_id="$parts_id">
  <mt:AFormFieldConfirm aform_id="$aform_id" parts_id="$parts_id">
<mt:else name="type" eq="parameter">
  <mt:if name="show_parameter">
<dl>
  <dt><mt:AFormFieldLabel aform_id="$aform_id" parts_id="$parts_id"></dt>
  <dd><mt:AFormFieldConfirm aform_id="$aform_id" parts_id="$parts_id"></dd>
</dl>
  </mt:if>
<mt:else><mt:Ignore></mt:Ignore>
<dl>
  <dt><mt:AFormFieldLabel aform_id="$aform_id" parts_id="$parts_id"></dt>
  <dd><mt:AFormFieldConfirm aform_id="$aform_id" parts_id="$parts_id"></dd>
</dl>
</mt:if>
</mt:loop>

このように入力画面とほぼ同じ仕組になっていますが、次のタグにより、
ユーザーが入力した情報を出力しています。

タグ名モディファイア説明
AFormFieldConfirmaform_id, parts_id入力された値を返す

この部分以降からフッターまではAFormの内部的実装をよく理解していない場合は、
変更しないようにお願いします。

完了画面のカスタマイズ

完了画面はフォームの「詳細設定」画面にて次から選択できます。

「完了画面を表示」を選択している場合、
完了画面も plugins/AForm/aform_engine.cgi によって描画されます。
aform_engine.cgiはplugins/AForm/tmpl/aform_finish.tmpl を使って画面を描画します。

完了画面のヘッダー、フッダーの出力の仕方は確認画面と同じです。

それ以外に下記のコードがあります。

<div id="aform-<$mt:var name="id"$>" class="aform">
<div class="aform-header"><$mt:var name="aform_title" escape="html"$></div>
<div class="aform-content" id="aform_result">
<__trans phrase="Received No."> #<mt:var name="received_id"><br />
<__trans phrase="Send completed."><a href="<mt:var name="blog_top">"><__trans phrase="Back to Top page"></a>
</div>
</div>

完了画面も、AFormFieldConfirmで入力された情報を埋め込むことができます。
GoogleAdwordsのトラッキングコードを挿入したい場合などにも対応可能です。

エラー画面のカスタマイズ

エラー画面はJavaScriptをオフにしていた場合や、入力フォーム表示後にフォームの期限が切れた場合などイレギュラーなケースで表示されます。
エラー画面も plugins/AForm/aform_engine.cgi によって描画されます。
aform_engine.cgiはplugins/AForm/tmpl/aform_error.tmpl を使って画面を描画します。

エラー画面のヘッダフッタも、確認画面や完了画面と同様の仕組みで出力されます

A-Form用テンプレートカスタマイズ についてのお問い合わせはこちら

お問い合わせ

多機能なフォームプラグイン A-Form

機能追加プラグイン

会員制サイト構築プラグイン A-Member

予約サイト構築プラグイン A-Reserve

アークウェブのMovable Typeブログ

→アークウェブのMovable Typeブログ

MTによるサイト構築はこちら

アークウェブはシックス・アパート ProNet Japanのメンバーです。
Movable Typeなどシックス・アパート製品のシステム導入や構築を手がけるパートナー企業のネットワークに参加しています。

MovableTypeを使ったソリューションのご紹介はこちら。

サービスおよびソリューション一覧

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)

最新情報・投稿をチェック

このページのトップに戻る

Photo by ....

Powered by Movable Type Pro