既存のフォームを置き換える方法

※ このページは Ver. 1.5 を元にサンプルコードを掲載しています。最新版とはコードが異なりますが、方法は同じです。

このページでは、既に稼働中のフォームがある場合、デザインを変えずにプログラムだけ「すぐ使えるメールフォーム」に置き換える方法をご紹介します。

既存のフォームの置き換え手順概要

設定手順は以下の通りです。

項目設定・メール設定
初期設定テンプレートのバックアップ
既存ページをテンプレートのファイル名で保存
項目とフォーム設定のコピー

1 項目設定・メール設定

まずは「すぐ使えるメールフォーム」の管理画面から、既存のフォームにある項目を漏れなく設定して下さい。必須設定なども既存の設定を反映させて下さい。メール本文も、現在送信されているものコピーした上で、必要な部分は差し込み項目用の記号で置き換えて下さい。

設定が終わったら動作確認をして、デザインは違えど送信される項目は既存のフォームと同じものである事を確認して下さい。

2 初期設定テンプレートのバックアップ

初期設定のテンプレート（templates/ 以下のファイル）を別の場所に保存しておいて下さい。

3 既存ページをテンプレートのファイル名で保存

既存のフォームにブラウザからアクセスして各画面のHTMLソースを「すぐ使えるメールフォーム」のテンプレートファイルの名前で保存して下さい。

例えば、既存のフォームにアクセスして表示される入力画面のソースを全部をコピーして templates/input.html として保存して下さい。確認画面や完了画面についても同じように保存して下さい。もし既存のフォームには確認画面が無い場合は新たに作成して下さい。「すぐ使えるメールフォーム」では確認画面が必要です。

ファイルの対応は以下の通りです。

入力画面: templates/input.html
確認画面: templates/confirm.html
完了画面（お礼画面）: templates/thanks.html

4 項目とフォーム設定のコピー

次に、フォームの機能に必要な表記を 2 で保存しておいたテンプレートからコピーします。必要なのは以下の4点です。1回下記の AからD までの説明に目を通してから作業を始めて下さい。

<form> タグの設定と隠し項目
入力項目タグ（<input>、<textarea>、<select>）
メッセージの調整
確認画面の値

A. <form> タグの設定と隠し項目

3 でフォームを保存した templates/input.html と templates/confirm.html には送信のための <form> タグがあるはずです。そのタグを、以下の「すぐ使えるメールフォーム」用の <form>タグで置き換えて下さい。

templates/input.html 用の <form>タグ

<form class="form-horizontal" method="post" action="confirm.html" id="sugu_mainform">
<input type="hidden" name="s" value="2">
<input type="hidden" name="i" value="%_i_%">

templates/confirm.html 用の <form>タグ

<form class="form-horizontal" method="post" action="thanks.html" id="sugu_mainform">
<input type="hidden" name="s" value="3">
<input type="hidden" name="i" value="%_i_%">

これらの <form> タグと隠し項目を、3 で保存した元のサイトのHTMLソース内の <form> タグの代わりにペーストして下さい。

元々お使いのフォームによっては確認画面に全ての入力項目が隠し項目として含まれている場合があります。もし上記以外に隠し項目が残っていたら全て削除して下さい。

B. 入力項目タグ（<input>、<select>、<textarea>）

入力欄を置き換えます。編集対象は templates/input.html ですが、もし確認画面に確認のメールアドレス入力欄がある場合は、templates/confirm.html も同様に編集して下さい。

2でバックアップしておいたテンプレートで、使用する項目の「管理名」がid 属性に付いている入力欄を探しだし、3 で保存したファイルの該当箇所にコピー＆ペーストして下さい。「管理名」は管理画面の「項目」メニューで確認できます。

コピーするのはそれぞれの項目の <input>、<select> - </select> 、<textarea> - </textarea> の部分です。レギュラー版でチェックボックスやラジオボタンを使用している場合は、<input> タグ周辺のHTMLコメントごとコピーして下さい。それぞれ以下の範囲が対象になります。

コピーする際、フォーム項目についている class 属性と placeholder 属性、rows 属性は不要であれば削除してしまって構いません。一方全ての項目タイプについて1行目にある「<span class="help-block">%_(管理名)_msg_%</span>」はこのまま残して下さい（詳細後述）。

1行テキストの例（管理名「tel」の電話番号）

<span class="help-block">%_tel_msg_%</span>
<input class="input-medium" type="text" name="tel" id="tel" value="%_tel_%" placeholder="例：03-1234-5678" maxlength="%_tel_maxlength_%">

プルダウンの例（管理名「pref」の都道府県）

<span class="help-block">%_pref_msg_%</span>
<select class="input-medium" name="pref" id="pref">
<option value="">選択して下さい</option>
<!--inputfield_pref_item begin -->
<option value="%_value_%" id="pref_%_no_%">%_value_%</option>
<!-- inputfield_pref_item end -->
</select>

フリー入力（テキストエリア）の例（管理名「message」のお問合せ内容）

<span class="help-block">%_message_msg_%</span>
<textarea class="input-xxlarge" rows="5" name="message" id="message" placeholder="ご自由にご記入下さい">%_message_%</textarea>

チェックボックスの例（管理名「checkbox_01」のチェックボックス01）

<span class="help-block">%_checkbox_01_msg_%</span>
<!-- inputfield_checkbox_01_item begin -->
<label class="checkbox inline">
<input type="checkbox" name="checkbox_01" id="checkbox_01_%_no_%" value="%_value_%">%_value_%
</label>
<!-- inputfield_checkbox_01_item end -->

ラジオボタンの例（管理名「radio_01」のラジオボタン01）

<span class="help-block">%_radio_01_msg_%</span>
<!-- inputfield_radio_01_item begin -->
<label class="radio">
<input type="radio" name="radio_01" id="radio_01_%_no_%" value="%_value_%">%_value_%
</label>
<!-- inputfield_radio_01_item end -->

【備考】
入力欄の周辺には項目名を表示したり必須マークを付けるための記号が記載されていますが、それらは元のフォームページに含まれている筈なのでコピーしなくて構いません。

C. メッセージの調整

「メッセージ」とはその時々で必要な操作や起こったエラーの内容を伝えるために画面に表示されるテキストです。例えば入力画面の初期表示で『項目にご記入の上「確認画面へ」ボタンを押して下さい。』と表示されます。

場所の指定

3 で保存した templates/input.html と templates/confirm.html を編集し、このメッセージを表示する部分に以下のコードをコピーして下さい。ファイルを保存した際に表示されていたメッセージが残っている場合はそれを置き換えて下さい。

<div class="text-%_msg_class_%">
%_msg_instruct_%
</div>

スタイルの指定

上記コードで「class="text-%_msg_class_%"」と表示されている部分（青字）は、ページ表示時に以下のように置き換わります。必要に応じて色を変えるなどの CSS クラス定義をページ内に加えて下さい（下記例の青字部分）。

エラーがあった時: class="text-error"
エラーが無い場合: class="text-info"

また、先ほど入力項目と一緒にコピーした「<span class="help-block">%_(管理名)_msg_%</span>」部分は、エラーがあった時だけ「○○は×文字までで入力して下さい。」などのメッセージが表示されます。このままの設定だと入力欄の左にメッセージが表示され欄が脇に押しやられてしまいますので、メッセージがあった時だけその後で改行されるように CSS クラスを設定して下さい（下記例の赤字部分）。

いずれも templates/input.html と templates/confirm.html が編集対象です。 CSS 定義については外部の CSS ファイルに指定しても構いません。

CSS設定例

<style type="text/css">
	.text-error {
		color: red;
	}
	.text-info {
		color: black;
	}
	.help-block:after {
		content:"\A";
		white-space: pre;
	}
	.help-block {
		color: red;
	}
</style>

D. 確認画面の値

フォームで送信された内容は、確認画面と完了画面に表示する事ができます。

表示したい位置に「%_(管理名)_%」と記載しておくことで送信された内容に置き換わります。初期設定ではこの表示は確認画面（templates/confirm.html）のみで使用されていますので、2 でバックアップした templates/confirm.html から該当する項目の表示部分をコピーして、3 で保存したファイルにペースト（値が表示されている部分を置き換え）して下さい。同じ記号が完了画面（templates/thanks.html）にも指定できます。

動作確認

これで設定作業は完了です。「すぐ使えるメールフォーム」のフォームを動かして動作確認を行って下さい。