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のフォームオプション編 を書いてみようと思います。


関連記事

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

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

Chat GPT が書く a-blog cms の紹介ブログ記事

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

2023年の a-blog cms を振り返って

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

a-blog cms Training Camp 2023

最新記事

カテゴリー

アーカイブ

ハッシュタグ