お問合せページの作り方
お問合せページの必要性
WEBサイトやブログサイトを作る際、HTMLの知識があれば基本的に製作する事は可能ですが、『お問合せページ』に関しては『HTML』の知識だけでは作るのは難しいです。
しかし、サイトによっては、ユーザーとの連絡手段は必須となるため、設置しなければならないサイトも多いかと思います。
『ブログサイト』などを個人で運営する際は、お問合せページは不要と言う方もいらっしゃるかと思いますが、私の認識では、『GoogleAdsense』の審査に通過するためには、お問合せページは必須だったかと思います。
また、私のこの弱小サイトにおいても、『ユーザーさんから連絡』を貰えたり、『ASPからの招待』が来たりと設置して良かったなと思う場面も何度かあります。
読者との連絡手段を作る事が出来る
メールアドレスや電話番号を公開しなくてすむ
気軽に連絡してもらえる
私が思うお問合せページの設置のメリットは上記のようなものがあります。
先ほども書いたように、サイトを訪れてくれた方との何らかの連絡できる手段は作成しておいた方が良いかと思います。
その際に、『電話番号』や『メールアドレス』を記載するのはとても危険です。
会社であれば、電話番号を掲載する事も多いですが、特に個人で運営する際は、電話番号なんて掲載できません。
また、メールアドレスを記載すると、大量の迷惑メールが届く可能性も高いため、会社・個人問わずメールアドレスの掲載はおすすめできません。
その点、『お問合せページ』であれば、メールアドレスを掲載する事なく、『気軽』に連絡してもらう事が可能です。
設置に知識が必要
ボットによる迷惑メールの可能性
『お問合せページ』はHTMLの知識のみで作る事は非常に難しいため、phpなどの勉強が必要になります。
また、メールアドレスが相手にバレないため、大量の迷惑メールは届かないかもしれませんが、『ボット』によるお問合せページからの問合せは来てしまうため、対策が必要になる場合があります。
私のこのブログサイトにも対策前は結構な量の問合せメールが毎日届いていました。
お問い合わせフォームの実装手順
今回は、2つのファイルを作成し、お問合せを受付ける方法をご紹介したいと思います。
作成するファイルは以下の2つです。
- お問合せページ(HTMLファイル)
- サーバー側で動くプログラム(phpファイル)
01お問合せHTMLファイルの作成
まず初めに、お問合せページのレイアウトを作成していきます。
デザインに関しては、お使いのテンプレートに合わせて修正していただく必要がありますが、『入力欄』などに関しては、他の記事ページでは使用する機会がほぼ無いかと思いますので、色々なパターンをご紹介できればと思います。
お問合せサンプルページはこのように作ってみました。
デザインに関しては、bootstrapを使用しています。
続いて、スタイルシート(css)の部分は省略して記載すると、お問合せサンプルページ(デザイン要素無し)のようになります。
1つ1つの入力項目のデザインに関しては、御自身のサイトデザインに合ったものを適用させて下さい。
HTMLの記述に関しては、上記サンプルページをPCで開いていただき、右クリックして『ページのソースを表示』から確認していただければと思います。
1行づつ解説していきたいところですが、それは大変なため、ポイントをいくつか解説しますので、他は頑張っていただければと思います。
formタグで囲う
入力(選択)された内容をプログラム側で取得するためには、入力部分を『formタグ』で囲う必要があります。
先ほどのサンプルソースを例にすると、
<form id="mailform" role="form" action="mail.php" method="post">
・ラジオボタン
・チェックボックス
・テキスト
・Ｅメールアドレス
・コンボボックス
・
・
・
・送信ボタン
</form>
といった記述になっています。
『formタグ』外に入力(選択)欄を作ってしまうと、プログラム側でその内容を取得する事ができないため注意しましょう。
『method="post"』は、WEBブラウザから、WEBサーバーへ送るリクエストを表しています。
『action』の部分は送信先を指定するもので、この後作成する『phpファイル』のパス(現在のHTMLからの相対パス)を記載します。
typeとは
ソースの中に『type』の記述が複数出てくるかと思います。
様々な『type』を指定する事で、入力欄の形式を変える事ができます。
<input type="text">
1行のテキスト：
<input type="number">
半角数字のみ：
<input type="password">
パスワード：
など様々なものがあります。
他にも、
『tel』：電話番号
『email』：Eメールアドレス
『url』：URL
『submit』：送信ボタン
『date』：カレンダー
『radio』：ラジオボタン
『checkbox』：チェックボックス
『button』：ボタン
など他にも様々なものがあります。
typeによっては、『number』のように半角数字を強制するものや、『tel』『email』『url』のように、入力内容の形式チェックを自動で行ってくれるものもあります。
例えば、『email』であれば『@』などが無ければエラーとなりますし、『url』であれば、http(s)から始まらなければエラーになると言った具合です。
submitボタンの設置
先ほどご説明した、『method="post"』(WEBサーバーへ送るリクエスト)を実行するトリガーとして、送信ボタンのような『submitボタン』をformタグ内に設置する必要があります。
サンプルソースでは、
<form id="mailform" role="form" action="mail.php" method="post">
・
・
・
<button type="submit">送信する</button>
</form>
の部分です。
この部分を設置し、ユーザーにボタンをクリックしてもらわなければ、次の処理を行う事ができないので、注意しましょう。
02サーバー側phpファイルの作成
お問合せ画面(HTML)の作成が完了したら次に『php』ファイルを作成します。
『sample.php』といったような拡張子が『php』のファイルを作成します。
内容としては、『入力(選択)された内容』を設定した自身のEメールアドレスに送信する方法です。
phpファイルに記述するプログラムの例は以下のようになります。
<?php
// 【①入力された内容を取得するプログラム】
// ①-A ラジオボタンの値取得
$field_radios = $_POST['customRadioInline'];
// ①-B チェックボックスの選択値取得
$field_checkbox1 = $_POST['customCheckboxInline1'];
$field_checkbox2 = $_POST['customCheckboxInline2'];
// ①-C テキストボックス入力内容取得(ここでは名前として使用)
$field_text = $_POST['sampletext'];
// ①-D Emailアドレス入力内容取得
$field_email = $_POST['email'];
// ①-E コンボボックス選択内容取得
$field_cmbSample = $_POST['cmbSmple'];
$field_cmbTodofuken = $_POST['todofuken'];
// ①-F お問合せ入力内容取得
$field_message = $_POST['message'];
// 【②メールの送信先を設定】
$mail_to = 'xxxxxx@sample.com';
// 【③メールのタイトルを設定】
$subject = 'xxxxxより問合せがありました';
// 【④ヘッダー情報の設定】
// お問合せ者のメールアドレスを設定する
$headers = 'From: ' . $field_email."\r\n";
$headers .= 'Reply-To: ' . $field_email . "\r\n";
// 【⑤メール本文作成】
// ⑤-A お問合せ者の名前を本文に入れる
$body_message = 'From: ' . $field_text . " 様\n\n";
// ⑤-B お問合せ者のEメールアドレスを本文に入れる
$body_message .= 'E-mail: ' . $field_email . "\n\n";
// ⑤-C ラジオボタンの選択値を本文に入れる
$body_message .= 'ラジオボタン: ' . $field_radios . "\n\n";
// ⑤-D チェックボックスの選択内容を本文に入れる
// チェックボックス1が選択されていた場合
if($field_checkbox1)
{
$body_message .= 'チェックボックス1は選択されています' . "\n\n";
}
// チェックボックス1が選択されていない場合
else
{
$body_message .= 'チェックボックス1は選択されていません' . "\n\n";
}
// チェックボックス2が選択されていた場合
if($field_checkbox2)
{
$body_message .= 'チェックボックス2は選択されています' . "\n\n";
}
// チェックボックス2が選択されていない場合
else
{
$body_message .= 'チェックボックス2は選択されていません' . "\n\n";
}
// ⑤-E コンボボックスの選択内容を本文に入れる
$body_message .= 'コンボボックス: ' . $field_cmbSample . "\n\n";
$body_message .= '都道府県: ' . $field_cmbTodofuken . "\n\n";
// ⑤-F お問合せ内容を本文に入れる
$body_message .= 'お問合せ内容: ' . $field_message;
// 【⑥メールの送信処理】
$mail_status = mail($mail_to, $subject, $body_message, $headers);
// 【⑦メール送信後の処理】
// メール送信に成功した場合
if ($mail_status)
{
// お問合せ完了画面へ移動例
header("Location:https://jun-jun.net/programmingDb/sample/success.html");
}
// メール送信に失敗した場合
else
{
// お問合せ失敗画面へ移動例
header("Location:https://jun-jun.net/programmingDb/sample/fail.html");
}
?>
phpのポイント
今回初めてphpのプログラムをさわる方のためにいくつかphpでプログラミングをする際の決まりなどのポイントをいくつかご紹介したいと思います。
phpのコードを書く際は、
<?php
～
～
～
?>
『<?php』で始まり、『?>』で閉じます。
『ファイル内がphpのコードだけ』の場合は、『?>』で閉じる必要はありません。
場合によっては、『?>』で閉じる事により、バグを発生させてしまう場合もあるため、回避するために『?>』で閉じないのですが、ここでは詳しい説明は省略させていただきますので、気になる方は調べてみて下さい。
正しく記述できていれば、『?>』で閉じても何ら問題はありません。
『HTML』でコード上に『コメント』を書く際は、
<!-- ここにコメント -->
のように記述しますが、『php』の場合は、
// ここにコメント
のように記述します。
上のphpのメール送信サンプルの中でも使用していますが、
$xxxxx = "aaaaa";
のような記述があるかと思います。
これは、『$xxxxx』という変数に、『"aaaaa"』という文字を代入しています。
算数や数学で使う『=(イコール)』のように、左右が同じという意味ではないため注意しましょう。
変数は自由に作成できますが、頭に『$』を付けると覚えておきましょう。
『$_POST['xxxxx']』という文字が複数出てきたかと思います。
HTMLで記述したお問合せ画面の入力項目に、『name="aaaaa"』という記述があったかと思います。
『$_POST['xxxxx']』のxxxxxの部分に『name="aaaaa"』のaaaaaの部分を記述する事で、指定の入力項目の値を取得する事ができます。
そのため、『name』には一意のものを設定し、他の入力項目の『name』と同じものは使用しないようにしましょう。
『ラジオボタン』に関しては、複数の中から1つを選択するという特性があるため、『共通のname』を設定します。
phpでコードを記述する際、基本的に1行の終わりには『;』を付けます。
『if文』など『;』を付けない例外もあるので注意しましょう。
先ほど、『=(イコール)』は代入とご説明しましたが、サンプルコードでは、『.=』というイコールの前に『.』が付いたものを使用しています。
これは、付け加える動きをするもので、例えば
$example = "あいうえお";
$example = "かきくけこ";
と記述すれば、最終的に『$example』には『かきくけこ』という値が代入されていますが、
$example = "あいうえお";
$example .= "かきくけこ";
とした場合、最終的に『$example』には『あいうえおかきくけこ』という値が代入されている事になります。
$example = "あいうえお" . "かきくけこ";
と記述した場合も、『$example』には『あいうえおかきくけこ』という値が代入されている事になります。
03お問合せ完了HTMLファイルの作成
上記の『お問合せHTMLファイル』と『サーバー側phpファイル』を作成すれば、お問合せを受けた内容を設定したメールアドレスへ送る事ができます。
しかし、それだけでは、お問合せをしてくれた方がお問合せが完了したかわかりづらいため、お問合せ完了画面を作成する事をおすすめします。
『お問合せ完了画面』は自身のサイトデザインに合ったものを作成する必要があり、『HTML』の記述のみで済むため詳細は省略させていただきます。
また、お問合せの成功画面だけでなく、失敗した際の表示や、失敗画面なども準備しておくと良いでしょう。
その他必要な作業
上に書いたソースで、『お問合せ』に関しては機能するものを作成する事ができますが、合わせて対応しておいた方が良い事をいくつか記載しておきます。
ここで挙げる項目の詳細に関してはまた機会があれば別の記事でご紹介したいと思います。
迷惑メール対策
お問合せ窓口を設置すると、多かれ少なかれ迷惑メールや営業メールが届くようになってしまいます。
『本当のお問合せ』と『迷惑メール』をプログラムで完全に見分けるのは難しいですが、ある程度の対策は必要です。
大したアクセス数があるわけではない当サイトにおいても、対策を何もしていないと毎日数十件の迷惑メールが届いてしまいます。
『スパムメール』と『正規の問合せメール』、『その他のメール』を整理しながら1件づつ処理していかなければならなくなってしまい、非常に面倒な事になってしまいますし、中には『ウィルス』などに感染してしまうメールもある可能性もあるため非常に危険です。
その迷惑メールの多くは、直接、『人』が送っているものではなく、『bot』と呼ばれるロボットが自動的に送信している場合が多く、一度サイトのお問合せ窓口のあるURLが知れてしまうと毎日のようにメールを送りつけて来ます。
IP制限をかける
Google reCAPTCHAを設置する
確認画面や必須入力項目を設ける
お問合せ窓口からのスパムメール対策には色々なものがありますが、いくつか併用して対策するのが良いかと思います。
ユーザーへのお問合せ完了メールの送信
ユーザーがお問合せを行った際に、『完了画面』へ遷移させたり、『お問合せ完了メール』を送信するなどした方がユーザーにわかり易く親切かと思います。
『お問合せ完了メール』を送信する際は、別のEメールアドレスを作成する事をおすすめします。
普段使っているメールアドレスから『お問合せ完了メール』を送信してしまうと、相手にメールアドレスがバレる事になってしまうため、相手が悪いとメールアドレスに大量のスパムメールを送りつけられる可能性があるためです。
『送信専用』のアドレスを作っておけば、何か問題が発生した際は、アドレスを廃棄し新しいアドレスを作る事で問題を解決する事ができますが、普段づかいのアドレスの場合、アドレス変更は非常に手間がかかってしまいます。
入力チェック
『入力チェック』や『必須項目』を設ける事で、スパムメールへの対策になったり、正確な問合せをしてもらう事が可能です。
サンプルソースの中でも、『Eメールアドレス』の書式をチェックしています。
Eメールアドレスの間違いがないよう、2回入力する必要のあるページを見た事のある方も多いかと思います。
必須項目が増えれば、自動のbotが対応できず、問合せ窓口からメールを送りつける事も難しくなります。
迷惑メールへ振分けられないかの確認
お使いのメーラーによっては、自身のサイトからのお問合せメール(先ほどphpで作成したプログラムから送信するメール)が『迷惑メールと判定』されてしまう場合もあります。
例えば、本サイトのお問合せメール受取りを『Gmail』で行うと、迷惑メールフォルダにメールが振り分けられてしまいました。
レンタルサーバーなどのメーラーを使っていれば、迷惑メールに振り分けれれる事はほとんどないかと思いますが、迷惑メール対策の付いたメーラーを使用する際は、お問合せメールに気付かないといった事態を起こさないよう注意しましょう。