メールフォームのスキン設定
メールフォームの入力項目やメールの送信内容などのスキンの設定を行います。
入力画面を編集する
ここでは、/Smarty/mailform/templates/inquiry_input.tplを編集します。
Dreamweaverや秀丸など、好きなソフトで編集できます。
まず、inquiry.htmlのソースを丸ごとコピーして、inquiry_input.tplへペーストします。
post先ファイル名を変更する
「任意のファイル名に変更する」でファイル名を変更している場合は、post先ファイル名を変更します。
<form method="post" action="inquiry_conf.php" enctype="multipart/form-data">
フォームオブジェクトのname属性、初期値などを変更する
現在、下記のようになっているフォームオブジェクトを変更します。
| 現在 | <input name="name" type="text" value="" /> |
|---|---|
| 変更後 | <input name="name" type="text" value="{{$name}}" /> |
| 必須項目に したい場合 |
<input name="name" value="{{$name}}" type="text" />{{if $name_error == true}}<br /> ▲お名前を入力して下さい。{{/if}} |
| 「お名前を入力してください」の部分は、入力確認画面で表示されるテキストです。cssで目立つ文字色にするとユーザーの目に届きやすくなります。 | |
| 現在 | <textarea name="notes" rows="7"></textarea> |
|---|---|
| 変更後 | <textarea name="notes" rows="7">{{$notes}}</textarea> |
| 現在 | <select name="inquiry_contents"> <option value="" selected>選択してください</option> <option value="ホームページ制作について" >ホームページ制作について</option> <option value="SEOについて" >SEOについて</option> </select> |
|---|---|
| 変更後 | <select name="inquiry_contents"> <option value="" {{if $inquiry_contents == ""}}selected{{/if}}>選択して下さい</option> <option value="ホームページ制作について" {{if $inquiry_contents == "ホームページ制作について"}}selected{{/if}}>ホームページ制作について</option> <option value="SEOについて" {{if $inquiry_contents == "SEOについて"}}selected{{/if}}>SEOについて</option> </select> |
/config/inquiry_config.incを変更する
必ず秀丸で編集してください。
inquiry_config.incの49行目以降を編集して、inquiry_input.tplとの同期をとります。
「鈴木智子のホームページのアクセスアップ講座」では、下記のようになります。
'name'=>array('must','','',''),
'furigana'=>array('','','',''),
'mail'=>array('must','email','','','return'),
'inquiry_content'=>array('','','',''),
'know'=>array('','','',''),
'notes'=>array('','','',''),
例）
'mail（要素）'=>array('must（必須項目）','email（バリデート方法）','','','return（自動返信メールフラグ）'),
メールフォームの項目が多いほど、この部分が長くなります。
各要素についての詳細は、14行目から46行目に記載してありますので、参考にしてください。
確認画面を編集する
ここでは、/Smarty/mailform/templates/inquiry_conf.tplを編集します。
Dreamweaverや秀丸など、好きなソフトで編集できます。
まずは、inquiry_input.tplのソースを丸ごとコピーして、inquiry_conf.tplへペーストしてください。
post先ファイル名を変更する
「任意のファイル名に変更する」でファイル名を変更している場合は、post先ファイル名を変更します。
<form method="post" action="inquiry_send.php" enctype="multipart/form-data">
入力項目を表示させたい場所に記述する
ユーザーが入力した内容を、入力内容確認画面に表示させる際の場所を指定します。
通常は入力画面（input.html）の見た目をそのまま流用しますので、下記の例のようにソースから不要部分を削除するだけでOKです。
| 現在 | <input name="name" type="text" value="{{$name}}" /> |
|---|---|
| 変更後 | {{$name}} |
| 必須項目の場合も同様です。 | |
| 現在 | <textarea name="notes" rows="7">{{$notes}}</textarea> |
|---|---|
| 変更後 | {{$notes}} |
| テキストエリア内での改行を有効にする場合は、{{$notes|nl2br}}と記述してください。 | |
| 現在 | <select name="inquiry_contents"> <option value="" {{if $inquiry_contents == ""}}selected{{/if}}>選択して下さい</option> <option value="ホームページ制作について" {{if $inquiry_contents == "ホームページ制作について"}}selected{{/if}}>ホームページ制作について</option> <option value="SEOについて" {{if $inquiry_contents == "SEOについて"}}selected{{/if}}>SEOについて</option> </select> |
|---|---|
| 変更後 | {{$inquiry_contents}} |
戻るボタンと送信ボタンを設置する
任意の場所に、戻るボタンと送信ボタンを設置します。
<input type="submit" name="back" value=" 戻 る " />
<input type="submit" name="submit" value=" 送 信 " />
戻った時に値を保持させるためにhidden情報を埋め込む
戻るボタンを押したときに、入力内容を保持するための情報を埋め込みます。
これを埋め込んでおかないと、戻るボタンを押したときに入力内容が全て消えてしまいます。もう一度最初から問合わせ内容を入力するのはユーザーにとって苦痛ですので、きちんと記述しましょう。
hidden情報は、<form></form>の間の行に埋め込んでください。
メールフォームの項目が多いほど、この部分が長くなります。
「鈴木智子のホームページのアクセスアップ講座」の場合は下記のようになります。
<input type="hidden" name="name" value="{{$name}}" />
<input type="hidden" name="furigana" value="{{$furigana}}" />
<input type="hidden" name="mail" value="{{$mail}}" />
<input type="hidden" name="inquiry_contents" value="{{$inquiry_content}}" />
<input type="hidden" name="know" value="{{$know}}" />
<input type="hidden" name="notes" value="{{$notes}}" />
赤文字の部分に、フォーム要素名を入力してください。
セッション管理のため以下のhidden情報を埋め込む
戻るボタンを押したときの機能の保持のために埋め込みます。
下記の一行を、先程記載したhidden情報の最後に記述してください。
変更・修正する必要はありません。
<input type="hidden" name="token" value="{{$token}}" />
自動返信メールの内容を編集する
ここでは、/Smarty/mailform/templates/inquiry_mail.tplを編集します。
Dreamweaverや秀丸など、好きなソフトで編集できます。
このファイルには、自動返信メールの文面を記述します。
「鈴木智子のホームページのアクセスアップ講座」では、下記のようになります。
{{$name}}様
「鈴木智子のホームページのアクセスアップ講座」にお問合せいただき、ありがとうございます。
順次ご返信いたしますが、お問合せ内容によっては返信できない場合もございますのでご了承ください。
氏名：{{$name}}
フリガナ：{{$furigana}}
E-Mail：{{$mail}}
お問合せ内容：
{{$inquiry_contents}}
このサイトを何でお知りになりましたか？：
{{$knew}}
メッセージ：
{{$notes}}
※このメールは自動返信メールです。
---
鈴木智子のホームページのアクセスアップ講座
URL：http://www.tomokos.net/
Mail：inquiry@tomokos.net
ご自分のホームページのメールフォーム内容にふさわしい文面に変更してください。
SAKURA Internetの場合、サーバー側で管理者メールアドレスを設定しておかないと500エラーになります。
以上でファイルの編集は終了です。
編集したファイルは忘れずにアップロードしてください。
デバックする
最後に、メールフォームが正常稼働しているかどうか確認します。
メールフォームのページにアクセスして、テストメールを送信し、不具合の有無を確認してください。
メールフォームが動作しない、ある項目だけ表示されない等の不具合の多くは、
パーミッション変更ミス、/config/inquiry_config.incの絶対パスの間違い、name="○○○"のスペルミス、
「"」を削除している等の記述ミスによるものです。
何度か確認して、動作を確かめましょう。
不要ファイルの削除
動作確認が取れたら、サーバーとローカルから不要ファイルを削除します。
スキン設定用に用意しておいた仮のファイル（inquiry.htmlおよびinquiry_conf.html）を削除してください。
では、続いて、SEOにも効果の高いビジネスブログの設置を「ブログの設置」で解説します。
