a-blog cmsにフォームを設置する方法

a-blog cmsには標準でメールフォーム機能(フォームモジュール)が実装されています。今回はこのフォームを設置する方法について書いてみたいと思います。


お名前:
メール:
コメント:


company1であれば、標準でフォームが用意されているので、plainにフォームを用意してみる事について書いてみる事にします。(lupple.comに設置してみました)専用のフォームページではなく、どこにでも設置できるサンプルとして用意してみる事にします。

まずは、以下のサンプルのテンプレートをダウンロード下さい。

分かりやすくするために include/form.html というメインのファイルと、そのファイルからincludeされるファイルに分けています。

plainのテーマの index.html に以下のように追記し、include のディレクトリは index.html と同じ階層にアップロード下さい。


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

それでは、フォームの記述について説明をしていきます。 include/form.html には、<!-- BEGIN_MODULE Form --> から <!-- END_MODULE Form --> までの間に4つのBEGIN〜ENDが用意されています。

  • 最初の表示用 <!-- BEGIN step#apply --> 〜 <!-- END step#apply -->
  • エラー&修正用 <!-- BEGIN step#reapply --> 〜 <!-- END step#reapply -->
  • 確認画面用 <!-- BEGIN step#confirm --> 〜 <!-- END step#confirm -->
  • 送信完了用 <!-- BEGIN step#result --> 〜 <!-- END step#result -->

と、なっています。各ブロックの実際のフォームについては、

  • <!--#include file="/include/form/insert.html"-->
  • <!--#include file="/include/form/update.html"-->
  • <!--#include file="/include/form/confirm.html"-->
  • <!--#include file="/include/form/result.html"-->

を読み込んで表示しています。こうする事で、フォームのページがすっきりします。 #include file を利用する事で a-blog cms のテンプレートを分かりやすく整理し、後でメンテナンスもしやすく作っていく事ができます。

フォーム作成の基本としては、


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

1行目は、どんなフォームにしたいのかというところで自由に用意したいフォームの項目を用意します。そして、2行目の hidden で用意する name="field[]"value="name" と宣言する事で、a-blog cms のシステムに1行目の入力項目がある事を伝える事ができるようになります。 これについては、checkbox , radio , textarea , select であっても同様になります。 書く順番は自由ですが、セットで記述するようにした方が分かりやすいのではないかと思います。

confirm.html にメールの設定があります。メールのタイトルや、本文のレイアウト、メールのヘッダー情報(From:・To:等)の設定もここで行います。HTMLソースを見るとメールアドレスも見えてしまう事から、Base64でエンコードして通常では見えないようにする事ができるようになっています。


<!-- 以下の[*]のメールアドレス等の項目を設定してください。-->
<!-- 必要ない場合は項目を削除してください -->
<!-- また送信メールの件名や本文となるsubject.txt、body.txt、
adminsubject.txt、adminbody.txtを編集してください。 -->

<!-- [*]送信先(To)の設定 -->
<!-- nameにはToおよびTo[]が設定可能 -->
<!-- To[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="To[]" value="送信先1<to1@example.com>" />
<input type="hidden" name="To[]" value="送信先2<to2@example.com>" />

<!-- [*]送信者(Sender)の設定 -->
<input type="hidden" name="Sender" value="送信者<sender@example.com>" />

<!-- [*]送信者(From)の設定 -->
<!-- nameにはFromおよびFrom[]が設定可能 -->
<!-- From[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="From[]" value="送信者1<from1@example.com>" />
<input type="hidden" name="From[]" value="送信者2<from2@example.com>" />

<!-- [*]返信先(Reply-To)の設定 -->
<input type="hidden" name="Reply-To" value="返信先<replyto@example.com>" />

<!-- [*]カーボンコピー(Cc)の設定 -->
<!-- nameにはCcおよびCc[]が設定可能 -->
<!-- Cc[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="Cc[]" value="カーボンコピー1<cc1@example.com>" />
<input type="hidden" name="Cc[]" value="カーボンコピー2<cc2@example.com>" />

<!-- [*]ブラインドコピー(Bcc)の設定 -->
<!-- nameにはBccおよびBcc[]が設定可能 -->
<!-- Bcc[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="Bcc[]" value="ブラインドコピー1<bcc1@example.com>" />
<input type="hidden" name="Bcc[]" value="ブラインドコピー2<bcc2@example.com>" />

<!-- 文字コードの設定 -->
<input type="hidden" name="Charset" value="ISO-2022-JP" />

<!-- 送信メールの件名の設定 -->
<input type="hidden" name="SubjectTpl" value="sample/form/subject.txt" />
<!-- 送信メールの本文の設定 -->
<input type="hidden" name="BodyTpl" value="sample/form/body.txt" />

<!-- [*]管理者の送信先(AdminFrom)の設定 -->
<input type="hidden" name="AdminTo" value="管理者の送信先<adminTo@example.com>" />
<!-- [*]管理者の送信者(AdminFrom)の設定 -->
<input type="hidden" name="AdminFrom" value="管理者の送信者<adminFrom@example.com>" />

<!-- 管理者メールの件名の設定 -->
<input type="hidden" name="AdminSubjectTpl" value="sample/form/adminsubject.txt" />
<!-- 管理者メールの本文の設定 -->
<input type="hidden" name="AdminBodyTpl" value="sample/form/adminbody.txt" />

<!--
送信先などのメールアドレスにBase64を用いる事ができます。
ご利用の場合には以下のコードを利用します。
<input type="hidden" name="Obfuscation" value="Base64" />
-->


もう1つ大事なHTMLのフォームタグの書き方についてです。


<form action="" method="post"><input type="hidden" name="phpMyAdmin" value="JhzGC9Z7ShvbMVYJCn-d4181jAf" />

</form>

現状では、上記のように action="" と書きます。 (将来的には変更になる可能性もあります)この状態だとAnother HTML-lint で減点になってしまいますので、ちょっとなんとかしたいと思っています。

次回は、a-blog cmsのフォームオプション編 を書いてみようと思います。


関連記事

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

久しぶりに 2019年を振り返ってみる

a-blog cms の勉強会開催を日本各地で開催したい

データの入力画面のサンプル

a-blog cms の CSVインポート機能は私が思ってたより凄かったことを紹介

a-blog cms Ver. 2.11 の新機能を5つ紹介してみます

9月は北陸の福井・富山で勉強会を開催しました

2019年の a-blog cms 勉強会 全国ツアーは 新潟・山形・仙台から

最新記事

アーカイブ

ハッシュタグ