前回、HTMLファイル(contact.html)を新規作成しました。 今回は「フォームメーラー」から[HTMLコード]を取得して、contact.htmlの該当箇所に貼り付けます。
以下に、フォームサービスの「フォームメーラー」から[HTMLコード]を取得する手順を簡単に紹介します。
上記の手順や利用条件などは、常に変更される可能性があります。 [HTMLコード]の取得方法については、必ずフォームメーラー公式サイト(http://www.form-mailer.jp/)で最新情報を確認しながら作業を進めてください。
取得したHTMLコードをcontact.htmlに貼り付けると、おおよそ以下のようなHTMLソースになります。
<!DOCTYPE html> <html> <head> <meta charset="shift_jis"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="table.css"> <link rel="stylesheet" href="form.css"> <title>お問合せ|ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index.html">ホーム</a></li> <li><a href="product.html">製品紹介</a></li> <li><a href="profile.html">会社概要</a></li> <li><a href="contact.html">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_subpage"> <img src="./images/img_contact.png" alt="お問合せ"> </div> <!-- サブメニュー(左カラム) --> <div id="submenu"> <h2>お問合せ</h2> <ul> <li><a href="#info0001">フォームからのお問合せ</a></li> <li><a href="#info0002">メールでのお問合せ</a></li> <li><a href="#info0003">お電話でのお問合せ</a></li> </ul> </div> <!-- インフォメーション(右カラム) --> <div id="info"> <h3 id="info0001">フォームからのお問合せ</h3> <form action="https://ssl.form-mailer.jp/fm/service/Forms/complete" method="post" name="form1" ENCTYPE="multipart/form-data"> <input type="hidden" name="key" value=" **************" > *は必須項目です <!-- radio --> <p>お問合せ区分</p> <p><input name="field_*******" type="radio" value="0">商品に関するお問合せ <input name="field_*******" type="radio" value="1">採用に関するお問合せ <input name="field_*******" type="radio" value="2">その他のお問合せ </p> <!-- text:mail --> <p>*メールアドレス</p> <p><input name="field_*******" type="text" size="30"> </p> <!-- text --> <p>*お名前</p> <p> <input name="field_*******" type="text" size="30"> </p> <!-- textarea --> <p>*お問合せの内容</p> <p> <textarea name="field_*******" cols="30" rows="5"></textarea> </p> <!-- charset --> <!-- charset --> <p><input name="submit" type="submit" value="送信する"> </p> <p><a href="http://www.form-mailer.jp/" target="_blank" id="powered">Powered by FormMailer.</a></p> </form> <a href="http://www.form-mailer.jp/" target="_blank"><img src="http://www.form-mailer.jp/img/banner_g01.gif" alt="SSL標準装備の無料メールフォーム作成・管理ツール | フォームメーラー" border="0" /></a> <hr> <h3 id="info0002">メールでのお問合せ</h3> <p> [email protected] までメールをお送りください。 </p> <hr> <h3 id="info0003">お電話でのお問合せ</h3> <img src="images/contact0001.png" alt="電話番号0000-000-000" class="infoimg_tel"> <div class="remarks"> <h4>受付時間</h4> 受付時間は、平日午前9時から午後5時までとなります。<br> </div> <hr> </div> <!-- フッタ --> <div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div> </div> </body> </html>
尚、name属性の値やvalue属性の値などの「**************」や「field_*******」となっている箇所は、ユーザーごとに異なる値となるため、 上記のHTMLソースをそのまま書き写してもフォームは正しく動作しません。必ず自分で取得したHTMLコードを貼り付けるようにしてください。
保存をしたらブラウザで表示してみましょう。 正しく貼り付けられていれば、入力欄や送信ボタンなどが表示されて、以下のような画面となります。
実際にメール送信テストをして、正しく動作するかどうか確認してみましょう。
指定したメールアドレスに問い合わせメールが届けば成功です。 すべてを自作できたわけではありませんが、とにかく実際にメール送信できる「お問合せ」ページを完成させることができました。
「お問合せ」ページとしてcontact_jisaku.html、contact_iframe.html、contact.htmlの順で3つのHTMLファイルを作成しました。 サンプルサイトでは、そのうちのcontact.htmlを採用したいと思います。
contact_jisaku.htmlとcontact_iframe.htmlについては、今後自作でお問合せフォームを作成したり、インラインフレームで他のウェブページを丸ごと埋め込んで作成する機会があれば、作例のひとつとして参考にしてください。
このチュートリアルではメール送信フォームをすべて自作せずに、インターネット上で提供されているフォームサービスを利用しました。 プログラム部分をフォームサービスにお任せしたわけですが、一般的なメール送信フォームでメールがどのような仕組みで送信されているのか、簡単に確認しておきましょう。
フォームの入力画面でユーザーが入力した情報は、送信ボタンを押すことでウェブサーバー上にあるデータ処理ブログラムに送られます。 送信されたデータを受け取った受信側のプログラムでは、受け取ったデータをメール文に整形するなどの処理をした上で、メール送信処理を行います。
サンプルサイトでは、フォームの入力画面まではこちらで作成しましたが、 入力されたデータを受け取ってメール送信処理をする部分については、フォームサービスのプログラムに任せたのです。
このようなサーバー側でデータ処理をするプログラムは、HTMLやCSSでは作成することはできません。 メール送信フォームをすべて自作するには、CGIやPHPなどのサーバー側でデータ処理をするプログラムの知識が必要となります。 また、プログラムが利用できるように環境構築されたウェブサーバーを利用する必要があります。 関心のある方は、プログラムの学習をしてさらに知識を深めてください。
尚、このチュートリアルの最後に、おまけとして「第30章 PHPでメール送信フォームを作る」を掲載しましたので、よろしければ参考にしてください。
ここまでの制作段階で、「お問合せ」ページは以下の状態となっています。
<前へ | 目次へ | 次へ> |