電網通信あみあみ
これならできちゃう!

【 「フォームメール※1 --送信確認画面を変更してみよう!--」 】 [初・中級向]
※1 ASJのフォームメールCGIに限定した内容となります。
フォームメールをリニューアルしてみたあみですが...
ami お問い合わせ用のフォームメールを新しくしてみたんだけどね。
gen うん。
ami 入力ページは自由にレイアウトできたんだけど。
gen ふむふむ。
ami 入力確認の部分ってデザイン変えられないのかなぁ。
gen 「送信ボタン」を押した後に表示される画面だね。
ami うん。
カラーは調整できるんだけどね。
もう少し見た目に手を加えたいなと思って。
gen ははぁ。
それはね、「スケルトンファイル」を変更することで調整できるよ。
ami スケルトンファイルって「.skl」ファイルのことね。
ショッパーのメニュー画像を変更したときにもあったね。
gen そうだね。
基本的にはあれと同じで、CGIで最低限必要な部分を残して変更するのは変わらないよ。
ami じゃあ、今回もサーバーから必要なスケルトンファイルをダウンロードするのね。
gen そのとおり。
ami 例によってダウンロードしたらコピーしてバックアップしておかないとね。
gen バックアップは重要だね。
いついかなるときもバックアップはとっておこうね。
「転ばぬ先の杖」ってことで。
じゃあ今回の手順を簡単に説明するね。

1.FTPでサーバーにアクセス
 「public_html」と同階層にある「data」フォルダにアクセス *ASエコノミーの場合
    ・public_html
    ・data
      └as-fmail
        └skeleton
           └fm_confirm.skl ←このファイルが今回の対象
 ↓
2.ファイルを複製
 ↓
3.HTMLを修正
 ↓
4.サーバーにアップ
 ↓
5.動作確認して終了

となります。
[ ASエコノミーの場合 ]
 /直下の階層にある「as-fmail」フォルダにアクセス
     ・/
      └as-fmail
        └fm_confirm.skl ←このファイルが今回の対象
[ 1. FTPでサーバーにアクセス ]
ami このファイルでいいのかな。
[画像:FTP]
gen そうだね。
それをダウンロードしたら、コピーしておいてね。
[ 2.ファイルを複製 ]
ami コピーって、単純にコピーでいいの?
gen そうだね。
Windowsの場合、ファイルを選択してメニューの「編集→コピー」またはCtrl+Cキーでコピーした後に「編集→貼り付け」またはCtrl+Vキーで複製が表示されるよ。
その際、ファイル名は元のファイル名の頭に「コピー 〜 」がつくから、コピーしたものが明確になるのでそのまま保存しておいてもいいよ。
MacOSの場合は元のファイル名の後に「〜のコピー」ってつくので、こちらもそのままでもOK。
[画像:コピー]
ami 「コピー」ってついてればわかりやすいね。
gen どこに保存したかわかりやすいように、例えば「フォームのスケルトン」フォルダーをつくって、そこに入れておくといいよ。
[ 3.HTMLを修正 ]
ami 今回はどこを変更すればいいのかな?
gen 例を見て変更点を確認してみようか。
もともとはこちらだったけど
[画像:変更前]

これをこういう風に変更してみます。
[画像:変更後]
ami なんとなく整理された感じだね。
gen 最初だから、簡単にね。
じゃあ、例題HTMLファイルで比べてみてみようか。
こちらが変更前のもの。
[画像:変更前]
こちらが変更したもの。
[画像:変更後]
ami 微妙に変わってる?
gen そうだね。
変更後のファイルで##で囲まれている部分は、これ無いとCGIに影響があると思っていい部分だね。

<body>タグは背景色を固定しました。
[ bgcolor="##_BGCOLOR_## ]だったのを[ bgcolor="#ffffff" ]にしています。
(link="##_LINKCOLOR_##" vlink="##_VLINKCOLOR_##" alink="##_ALINKCOLOR_##" text="##_TITLECOLOR_##")
は変更してもCGIに影響がないのでここでは削除しました。

<div align="center">で全体をセンタリング。
ここは<center>タグでも構いません。

「内容確認」のタイトル部分は<table>タグで新規に作成。

「項目」や「内容」の表示部分は背景色を「#eeeeee」で固定。
<blockquote>タグは削除しました。

そのくらいかな。 あとはフォームメールウィザードで指定したカラーなどに準じるようになっています。

絶対削除してはいけない部分。
##_DEBUG_IN_##
##_CONTENTS_##
##_INFO_##
##_SENDTO_##

これらを削除すると、必要な情報が表示されなくなるので要注意です。
ami 割と手軽な修正だね...
gen より複雑にもできるけど、始めるときりがないから。
ami 私もわけわからなくなるしね。
[ 4.サーバーにアップ ]
gen さて、修正したところでアップしよう。
元あったところへアップしてね。
ami サーバーにアップしたよ。
これでOK。
[ 5.動作確認して終了 ]
gen じゃあ、確認のために一度入力フォームに入力してみて。
ami わ。変わった!
gen よかったね。
ここでひとつ注意を。
入力フォームがひとつだったらいいけど、複数あった場合もすべて同じパターンになるから。
その点は気をつけてね。
ami 複数って、例えば「問合せ」と「注文」二つの入力ページがあった場合でも、確認画面が同じ形式になるってことだよね。
gen そうです。
ami でもデザイン的には統一されるからいいかな。
ありがとう。
これならフォームメールも楽しそうな画面にできそうだよ。
背景に絵とか表示できるし。
gen ・バックアップをとる
・動作確認をする
この2点は必ずしてくださいね。
ami しばらくバックアップ作業してなかった...
次回をお楽しみに。
このページのトップへ▲

目次へ