「フォームメーラー」では、iframe要素を使用しないタイプのフォームメールも利用可能です。
管理画面でform要素やinput要素などを含むHTMLコードを取得できるので、それを自分の作成したHTMLファイルに貼り付けます。
まずは、HTMLコードを貼り付けるためのHTMLファイルを新規作成しましょう。
テキストエディタを起動して名前を付けて保存します。
保存の際には、ファイル名は「contact 」、文字コードは「シフトJIS」にしてください。
文字コードが「UTF-8」ではない点に注意してください。
これは、「フォームメーラー」の無料版では、シフトJISでサービス提供されているためです。
UTF-8などのサポートされていない文字コードでファイルを作成すると、フォームから送信されるメールが文字化けして読めなくなってしまうので注意が必要です。
新規作成するcontact のHTMLソースの内容は以下の通りです。
復習のつもりで手打ち入力しても良いですし、前に作成したcontact_iframe からソースをコピーして、部分的に修正しても良いでしょう。
meta要素で指定する文字コードを
<meta charset=”shift_jis“>
とすることを忘れないようにしてください。
<!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 "><img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</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> までメールをお送りください。 </p> <hr> <h3 id="info0003">お電話でのお問合せ</h3> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-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 」、文字コードを「シフト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などのファイルを作ることになるでしょう。
| <前へ | 目次へ | 次へ> |
