フォームサービスを利用する★フォームサービスからHTMLコードを取得する前回、HTMLファイル(contact.html)を新規作成しました。今回は「フォームメーラー」から[HTMLコード]を取得して、contact.htmlの該当箇所に貼り付けます。以下に、フォームサービスの「フォームメーラー」から[HTMLコード]を取得する手順を簡単に紹介します。[<form>要素のみ]のHTMLコードの欄があるので、それを選択してHTMLコードをコピーします。コピーしたHTMLコードをcontact.htmlの該当箇所に貼り付けます。「フォームメーラー」の無料サービスでは、バナー広告を掲載することが条件となっているので、そのHTMLコードを取得してcontact.htmlの該当箇所へ貼り付けます。取得したHTMLコードの編集は不可となっているので、条件を守って利用してください。上記の手順や利用条件などは、常に変更される可能性があります。[HTMLコード]の取得方法については、必ずフォームメーラー公式サイト(http://www.form-mailer.jp/)で最新情報を確認しながら作業を進めてください。取得したHTMLコードをcontact.htmlに貼り付けると、おおよそ以下のようなHTMLソースになります。id="info0002">メールでのお問合せ</h3><p>xxx@xxxxxxxxxx.xxxまでメールをお送りください。class="remarks"><h4>受付時間</h4>受付時間は、平日午前9時から午後5時までとなります。上記のHTMLソースをそのまま書き写してもフォームは正しく動作しません。自分で取得したHTMLコードを貼り付けるようにしてください。保存をしたらブラウザで表示してみましょう。正しく貼り付けられていれば、入力欄や送信ボタンなどが表示されて、以下のような画面となります。変更前を確認する実際にメール送信テストをして、正しく動作するかどうか確認してみましょう。指定したメールアドレスに問い合わせメールが届けば成功です。すべてを自作できたわけではありませんが、とにかく実際にメール送信できる「お問合せ」ページを完成させることができました。「お問合せ」ページとしてcontact_jisaku.html、contact_iframe.html、contact.htmlの順で3つのHTMLファイルを作成しました。サンプルサイトでは、そのうちのcontact.htmlを採用したいと思います。contact_jisaku.htmlとcontact_iframe.htmlについては、今後自作でお問合せフォームを作成したり、インラインフレームで他のウェブページを丸ごと埋め込んで作成する機会があれば、作例のひとつとして参考にしてください。メール送信フォームをすべて自作するにはこのチュートリアルではメール送信フォームをすべて自作せずに、インターネット上で提供されているフォームサービスを利用しました。プログラム部分をフォームサービスにお任せしたわけですが、一般的なメール送信フォームでメールがどのような仕組みで送信されているのか、簡単に確認しておきましょう。フォームの入力画面でユーザーが入力した情報は、送信ボタンを押すことでウェブサーバー上にあるデータ処理ブログラムに送られます。送信されたデータを受け取った受信側のプログラムでは、受け取ったデータをメール文に整形するなどの処理をした上で、メール送信処理を行います。入力されたデータを受け取ってメール送信処理をする部分については、フォームサービスのプログラムに任せたのです。このようなサーバー側でデータ処理をするプログラムは、HTMLやCSSでは作成することはできません。メール送信フォームをすべて自作するには、CGIやPHPなどのサーバー側でデータ処理をするプログラムの知識が必要となります。プログラムが利用できるように環境構築されたウェブサーバーを利用する必要があります。関心のある方は、プログラムの学習をしてさらに知識を深めてください。PHPでメール送信フォームを作る」を掲載しましたので、よろしければ参考にしてください。ここまでの制作段階で、「お問合せ」ページは以下の状態となっています。