お問合せページのHTMLファイルを作成する－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > お問合せページのHTMLファイルを作成する

第21章　フォームサービスを利用する

★お問合せページのHTMLファイルを作成する

お問合せページのHTMLファイルを作成する

「フォームメーラー」では、iframe要素を使用しないタイプのフォームメールも利用可能です。管理画面でform要素やinput要素などを含むHTMLコードを取得できるので、それを自分の作成したHTMLファイルに貼り付けます。

まずは、HTMLコードを貼り付けるためのHTMLファイルを新規作成しましょう。テキストエディタを起動して名前を付けて保存します。保存の際には、ファイル名は「contact.html」、文字コードは「シフトJIS」にしてください。

文字コードが「UTF-8」ではない点に注意してください。これは、「フォームメーラー」の無料版では、シフトJISでサービス提供されているためです。 UTF-8などのサポートされていない文字コードでファイルを作成すると、フォームから送信されるメールが文字化けして読めなくなってしまうので注意が必要です。

新規作成するcontact.htmlのHTMLソースの内容は以下の通りです。復習のつもりで手打ち入力しても良いですし、前に作成したcontact_iframe.htmlからソースをコピーして、部分的に修正しても良いでしょう。 meta要素で指定する文字コードを <meta charset="shift_jis"> とすることを忘れないようにしてください。

HTMLソース（contact.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>
		<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>

保存をしたらブラウザで表示してみましょう。まだ「フォームからのお問合せ」の部分には何も無い状態です。このHTMLファイルをベースにして、必要なHTMLコードを追加していきます。

前述の通り、このファイルを保存する際には、ファイル名を「contact.html」、文字コードを「シフトJIS」にして保存します。

Windowsのメモ帳では「シフトJIS」という項目が無いかもしれません。その場合には「ANSI」を選択して保存します。 ANSIは英数字などの基本的な文字コードですが、シフトJISと互換性を持っています。

文字コード選び

これまでのサンプルサイト制作では、HTMLファイルやCSSファイルを作成する際には、文字コードを「UTF-8」と指定してきました。しかし、今回は「shift_jis」と指定しました。ウェブページを作成する際には、何を根拠に文字コードを選択すれば良いのでしょうか。

例えば、PHPなどのプログラムやデータベース機能を自分のウェブサイトで利用する可能性があるなら、そのプログラムやデータベースで利用する文字コードと、HTMLファイルの文字コードを揃えるのが基本となります。他にも、自分のウェブサイトに外部ウェブサービスを取り入れる場合には、利用するウェブサービスと文字コードを揃えるのが基本です。

利用するプログラム・データベース・ウェブサービスとは異なる文字コードをHTMLファイルで使用すると、プログラムやデータベースとのやり取りをするたびに文字コードの変換を掛ける必要があったり、ウェブサービスから帰ってくる結果が文字化けしてしまうことがあります。

プログラム・データベース・ウェブサービスなどを利用せずにHTMLとCSSだけでウェブサイトを作るなら、基本的にはどの文字コードを選択しても構いません。日本語の文字コードとしてよく利用されるのは、Shift_JIS、EUC-JP、UTF-8などです。以前には、Shift_JISやEUC-JPが主流でしたが、近年は様々なウェブサービスとの兼ね合いなどからUTF-8が主流になっています。

ちなみに、Windowsのメモ帳の場合、文字コードをシフトJISにするならファイル保存の際に「ANSI」を選択します。また、Windowsのメモ帳はEUC-JPに対応していないので、EUC-JPを利用するなら他のテキストエディタでHTMLなどのファイルを作ることになるでしょう。

まとめ

非インラインフレーム版では、form要素やinput要素などを含むHTMLコードを取得して自分の作成したHTMLファイル内に貼り付ける
フォームの入力部分は、自分の利用するウェブサーバー上に置いて公開する
送信プログラムの部分は、インラインフレーム版と同様にサービス側に任せる

<前へ

目次へ

次へ>