メールフォーム(お問い合わせフォーム)のhtmlの書き方と動作や仕組みについて

WEBを作り始めたクリエイターさんたちはデザインをし、コーディングをしてサーバーにアップしたら閲覧できた！ってな具合に学習を進めていかれるかと思います。
WEBデザイナーならPhotoShopやXD、Illustratorなどを使ってデザインし、コーダーならエディターソフトなどを使ってマークアップおよびコーディングをします。
コーディングの際にはCSSやJavascriptなどちょっとさらに複雑なプログラミングが入ってきてますますややこしくなってきた・・

なんて経験をしつつWEBクリエイターは進化していくものです。

さてWEBサイトをつくっているうちにおそらく通るであろう一つの難関がメールフォームの作り方です。
駆け出しWEB従事者にありがちな質問として、「メールフォームのhtmlを書いたんだけど、どうやっても動きません、なにが悪いんでしょう？」というものです。

そんな疑問を今回の記事で解説していきます。

 

メールフォームって何？

さて、メールフォームをhtmlで・・・という前に、前提としてメールフォームはなんぞや、という方がいるかもしれないので簡単に説明いたします。
(このページを見ていると言ことはメールフォームのことを知らないわけがないか・・・)

メールフォームとは、WEBサイトに直接テキストを入力して電子メールを送信できる入力ページのこと、および、そうした機能ことです。
WEBサイトにメールフォームを設けることで、ページの閲覧中にメッセージを送ることができます。メールのソフトを立ち上げる手間や、あらかじめ決められた項目があるので、入力者の手間が省けるという利点があり、問い合わせや、アンケート、資料請求、意見・感想を送る窓口として利用されます。

WEBサイトのレンタルサーバーサービスやクラウド型のブログサービスではメールフォームをページ構成部品としてあらかじめ用意している場合もあります。

メールフォームをhtmlで記述する場合のコード

メールフォームを構成するhtmlの書き方は簡単に書くと以下のようになります。

<form>タグ

メールフォームを構成する場合、まずは<form></form>で囲う必要があります。
最初の<form>タグの中には actionやmethodなどの属性が入ります。
例：<form action=”mail.cgi” method=”post”>

<input >タグ

<input>タグはメールフォームを構成する各入力項目を作るタグで、ユーザーが入力したデータを受け取るための要素となります。
<input>のタイプは複数あり、指定しない場合はテキストエリアになります。

<input>タグの詳しい内容はこちらを参照してみてください。

HTML: HyperText Markup Language | MDN

<form>タグをhtmlファイルに記述しサーバーにアップ

先ほど説明した<form>タグをテキストファイルに記述し、拡張子を.htmlにしてブラウザで確認。

「ちゃんとメールフォームっぽいページができたぞ！」

「それでは、送信ボタンをクリック、と」

「あれ？何も起こらないぞ？」

「ああ、サーバーにアップロードしてなかった・・・」

「アップ完了、それでは送信・・・あれ？、やっぱり動かない」

「なぜだーーーー」

こんな経験していませんか？

さて、なにかいけなかったのでしょうか？

ホームページには静的ページと動的ページがある

ホームページの仕組みを大きく分けると、「静的ページ」「動的ページ」の２つになります。この静的ページと動的ページという言葉は聞いたことがありますか？

静的ページ

いつ何度アクセスしても同じものが表示されるページのことをいいます。
HTMLファイルで作成されたWebページのことで、ユーザーの要求に対して、Webサーバーが要求されたデータをそのままブラウザに表示します。

動的ページ

アクセスしたときの状況に応じて異なる内容が表示されるWebページのことを指します。ユーザーが入力する内容によって出力結果が変わる検索機能や、書き込みができる掲示板やブログ、ECサイトや会員制サイトなどがそれにあたります。
いわゆるサーバーサイドで動作させるためのプログラムが必要なページということです。

メールフォームは静的ページでしょうか？それとも動的ページなのでしょうか？

メールフォームはhtmlだけで動作するのか？

残念ながらメールフォームはhtmlだけでは動きません。

前述で記載したようにhtmlで<form>タグを記述してhtmlに記載しても動作しないのは、メールフォームは動的ページとして構成しないといけないからです。
具体的には、PHPやGGIというプログラムを使って動作をさせる必要があります。
もう少し踏み込むと先ほどの<form>タグに例えば
<form action=”mail.php” method=”post”>
のような書き方にします。actionの要素に入っている”mail.php”がPHPというプログラムを実行させる部分となります。
このmail.phpにあたるプログラムファイルが存在しないとメールフォームは動作しないことになります。

なんちゃってメールフォームならHTMLだけで動作します。

実は上で述べた「フォームのサンプルコード1」にちょっと付け加えてやればなんちゃってメールフォームを作ることはできます。

上のコードをhtmlファイルに記述すると以下のような見た目になります。

実際の見た目

送信ボタンをクリックしてみてください。メーラーが立ち上がり本文に入力された内容が挿入されると思われます。
スマホでは動作しません。

変更した点は
<form action=”mailto:hoge@hogehoge.com” enctype=”text/plain” method=”POST”>
の一行です。
action=””の値にあなたの受け取りたいメールアドレスを入れます。
enctype=”text/plain” は文字化け防止のためのおまじない。
method=”POST”は送信する形式です。

mailtoでの簡易メールフォームはおすすめはできない

上記のHTMLコードだけで出力できる簡易メールフォームは、action=””の部分にメールアドレスを掲載することになります。
自分のメールアドレスを掲載すると抜き取られて迷惑メールのターゲットにされてしまいます。
これではメールフォームのセキュリティ機能としては非常にいただけませんね。

メールフォームの実行プログラムはどうすれば？

メールフォームがhtmlだけで動作しないということはご理解いただけたかと思います。
では、メールフォームを実行するためのプログラムはどうすればいいの？どこで手に入れればいいの？って話になります。
メールフォームを動作させるためのプログラムはphpとかCGIというものを使うのですが、こういったプログラムは無料で配布されています。
「メールフォーム PHP」や「メールフォーム CGI」「無料 メールフォーム PHP」「無料 メールフォーム CGI」とかで検索してみてください。
フリーのメールフォームプログラムが見つかると思います。

PHPとCGIではどちらがいいのか？という疑問もあるかとおもいますが、今のトレンドからすればPHPのほうが主流なのでおすすめです。

メールフォームの仕組みについて

メールフォームは、入力した内容がEメールとして入力したユーザーや管理者宛に届きます。
しかし、入力した情報が即座にメールになって届きますが、その入力～受信までの間に、いろいろな処理が行われています。

ホームページにあるメールフォームに個人情報などを入力し送信ボタンが押されると、PHPとかCGIというプログラムが実行されます。
そのプログラムのプロセスは簡単に説明すると以下のようになります。

・入力情報(名前・住所・電話・メールアドレス等)をWEBサーバーが受け取る
・入力情報に不正がないかチェックする
・入力情報をメールの本文形式に整斉する
・文字化けがしないように調整する
・サーバーにあるsendmailと呼ばれるソフトでメールを送信実行する
・皆さんのメールアドレスに届く

sendmailについてはこちらが参考になります
参考：https://openstandia.jp/oss_info/sendmail/

おすすめの無料のメールフォームPHP

ここまで読んでいただいて、メールフォームを自分でも設置してみたい！とおもったあなた。
PHPで設置メールフォームを作ってみたいと思った方はEasyMailがおすすめです。
EasyMail(イージーメール)はPHPで開発された完全無料のメールフォームで、高機能なCMSです。
一度サーバーにインストールすれば無制限にメールフォームを作成でき、デザインも自由自在です。

話がそれますが、WordPressというCMSはご存じですか？
WordPressはホームページを編集するオープンソースのWEBアプリです。

EasyMailはメールフォームを管理画面から編集できるオープンソースのWEBアプリです。
WordPressがホームページ全体を更新するソフトとするならば、EasyMailはメールフォームに特化した更新ソフトとでもいいましょうか。
クラウドサービスのようなレンタルではなく、レンタルサーバーなどにアップロードして使うタイプのものでWEB従事者向けのPHPになります。

ここまで読んでいただいてもうわかった方もいらっしゃるかと思いますが、この記事はEasyMailの公式サイトブログです。
トップページにアクセスしてもらって、EasyMailをぜひダウンロードしてチャレンジしてみてください。
ヘルプページを参考にしながらサーバーにインストールしてみてください。
もしわからないことが出てきた場合はフォーラムの質問掲示板からも投稿が可能です。

きっとあなたのWEB制作のレベルアップ・スキルアップの助けになること間違いないと思います。

詳しくは↓のリンクからEasyMailのトップページをご覧ください!