お問い合わせをWEBサイトにPHPで設置する作り方
Warning: Undefined array key 2 in /home/itweb/it-tantou.com/public_html/wp-content/themes/mythemes/functions.php on line 319
WEBサイトを制作しているとお問い合わせページはかなりの頻度で必要になってきます。企業サイトでは必須ページです。
しかし、HTMLで作成した場合はメールソフトを立ち上げる程度の装備しかできません。本格的なお問い合わせフォームを作成して、送信まで作るとなるとPHPが必要になります。
このページでは、PHPを使って簡単なお問い合わせページの作り方をご紹介します。
お問い合わせの特徴
制作するお問い合わせの特徴をまとめました。
お問い合わせフォームの入力時に記入項目が適切であるかチェックして、入力ミスを表示するように設計します。このシステムをバリデーションと言います。
必須項目と通常項目の設定できるようにします。必須項目が入力されずに「送信」ボタンをクリックすると、エラーを表示します。
確認画面を表示して、送信内容を確かめられるように設計します。
PHPを使用して送信できるようにします。
制作方法
お問い合わせを作るには３つのページが必要になります。
- お問い合わせフォームのページ
- 確認画面ページ
- 送信完了ページ
以上を作成します。
お問い合わせフォームのページ
まずは、お問い合わせフォームのページを作成します。
contact.htmlの名前でファイルを作成します。html内には以下の内容を記述します。
<form action="check_inquiry.php" method="post">
<h3>お問い合わせフォーム</h3>
<p>弊社製品についてのお問い合わせは、下記にて承っております。</p>
<p>*は必須項目です。</p>
<table>
<tbody>
<tr>
<th>会社名<span>※</span></th>
<td><input type="text" name="company" size="50" class="validate required" /></td>
</tr>
<tr>
<th>担当者様</th>
<td><input type="text" name="username" size="50" class="validate" /></td>
</tr>
<tr>
<th>電話番号<span>※</span></th>
<td><input type="text" name="tel1" size="4" maxlength="4" class="validate number required" />
-
<input type="text" name="tel2" size="4" maxlength="4" class="validate number required2" />
-
<input type="text" name="tel3" size="4" maxlength="4" class="validate number required2" /></td>
</tr>
<tr>
<th>E-Mail<span>※</span></th>
<td><input type="text" value="" size="50" name="mail" class="validate mail required"/></td>
</tr>
<tr>
<th>E-Mail（確認）<span>※</span></th>
<td><input type="text" value="" size="50" name="mail_check" class="validate mail mail_check required"/></td>
</tr>
<tr>
<th>内容<span>※</span></th>
<td><textarea id="message" name="message" rows="10" cols="40" class="validate required"></textarea></td>
</tr>
</tbody>
</table>
<p><input type="submit" value=" 確認 " class="button"></p>
</form>
上記のHTMLフォームはサンプルですので、項目や内容はお使いのサイトに併せてカスタマイズしてください。バリデーション機能を動作させるには各項目のclassに「validate」を必ず記述してください。
バリデーション用のCSSです。
td.error input ,
td.error textarea ,
td.error label {
background:#FFCCCC;
}
td p.error{
margin:0;
color:red;
font-weight:bold;
margin-bottom:1em;
}
次に、入力ミスなどを表示するためのバリデーション機能はjQueryを使用して設置します。
以下のjQueryを使用するためのコードを</head>より上に記述します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="validate.js"></script>
jQueryはバージョン1.3.2を使用していますが、サンプルですので他のバージョンでも構いません。
次に、バリデーション機能を持つjQueryを作ります。ファイル名は、validate.jsで作成して以下のコードを記述します。
// JavaScript Document
$(function(){
$("form").submit(function(){
//エラーの初期化
$("p.error").remove();
$("td").removeClass("error");
$(":text,textarea").filter(".validate").each(function(){
//必須項目のチェック
$(this).filter(".required").each(function(){
if($(this).val()==""){
$(this).parent().prepend("<p class='error'>※必須項目です</p>");
}
});
//必須項目のチェック
$(this).filter(".required2").each(function(){
if($(this).val()==""){
$(this).parent().prepend("");
}
});
//数値のチェック
$(this).filter(".number").each(function(){
if(isNaN($(this).val())){
$(this).parent().prepend("<p class='error'>※数値のみ入力可能です</p>");
}
});
//メールアドレスのチェック
$(this).filter(".mail").each(function(){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>※メールアドレスの形式が異なります</p>");
}
});
//メールアドレス確認のチェック
$(this).filter(".mail_check").each(function(){
if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){
$(this).parent().prepend("<p class='error'>※メールアドレスと内容が異なります</p>");
}
});
});
//ラジオボタンのチェック
$(":radio").filter(".validate").each(function(){
$(this).filter(".required").each(function(){
if($(":radio[name="+$(this).attr("name")+"]:checked").size() == 0){
$(this).parent().prepend("<p class='error'>※選択してください</p>");
}
});
});
//チェックボックスのチェック
$(".checkboxRequired").each(function(){
if($(":checkbox:checked",this).size()==0){
$(this).prepend("<p class='error'>※選択してください</p>");
}
});
// その他項目のチェック
$(".validate.add_text").each(function(){
if($(this).attr("checked")==true && $("input[name="+$(this).attr("name").replace(/^(.+)$/, "$1_text")+"]").val()==""){
$(this).parent().prepend("<p class='error'>※その他の項目を入力してください。</p>");
}
});
//エラーの際の処理
if($("p.error").size() > 0){
$('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow');
$("p.error").parent().addClass("error");
return false;
}
});
});
上記のコードの各チェック部分にある「.〇〇(.requiredや.numberなど)」を先程のcontact.html内のclassに記述すると、動作するようになります。
required
入力されていない場合に「※必須項目です」と表示します。
required2
入力されていない場合にエラーを返しますが、「※必須項目です」とは表示されません。
number
数値以外を記入すると、「※数値のみ入力可能です」と表示します。
メールアドレス以外を記入すると、「※メールアドレスの形式が異なります」と表示します。
mail_check
お問い合わせではメールは間違いがないか確認のために2回入力しますが、一致しない場合は「※メールアドレスと内容が異なります」と表示します。
required
ラジオボタンのチェックがない場合に「※選択してください」と表示します。
ラジオボタンのサンプルhtmlです。片方にclassを記述します。
<input type="radio" name="example" value="サンプル" class="validate required">サンプル <input type="radio" name="example" value="サンプル">サンプル
checkboxRequired
チェックボックスのチェックがない場合に「※選択してください」と表示します。
チェックボックスのサンプルhtmlです。全体をdivで囲んでclassを記述します。div以外にもtdやddでも構いません。なお、チェックボタンに関してはclassタグにvalidateは必要ありません。
<div class="checkboxRequired"> <input type="checkbox" name="example" value="サンプル">サンプル <input type="checkbox" name="example" value="サンプル">サンプル </div>
validate add_text
チェックボックスのその他をチェックして、フォームに入力がない場合に「※その他の項目を入力してください。」と表示します。
チェックボックスのその他のサンプルhtmlです。
<div class="checkboxRequired"> <input type="checkbox" name="example" value="サンプル">良い <input type="checkbox" name="example" value="サンプル">悪い <input type="checkbox" name="example" value="サンプル" class="validate add_text">その他<input type="text" name="example_text" value=""> </div>
エラーの際の処理
お問い合わせフォームを入力してエラーが表示された場合に上にスクロールして戻ります。初期値は40です。数値が小さいほど遅く上部に戻り、大きいほど早く上部に戻ります。
参考にしたjQuery：HtmlDrive
確認画面ページ
内容を確認するためのページを作成します。
check_inquiry.phpの名前でファイルを作成します。ファイル内には以下の内容を記述します。
<?php
// 会社名、担当者様、電話番号、メールアドレス
$company = htmlspecialchars($_POST['company'], ENT_QUOTES);
$username = htmlspecialchars($_POST['username'], ENT_QUOTES);
$tel1 = htmlspecialchars($_POST['tel1'], ENT_QUOTES);
$tel2 = htmlspecialchars($_POST['tel2'], ENT_QUOTES);
$tel3 = htmlspecialchars($_POST['tel3'], ENT_QUOTES);
$mail = htmlspecialchars($_POST['mail'], ENT_QUOTES);
$mail_check = htmlspecialchars($_POST['mail_check'], ENT_QUOTES);
// お問い合わせ内容
$message = htmlspecialchars($_POST['message'], ENT_QUOTES);
?>
<h3>お問い合わせフォーム</h3>
<p>お問い合わせ内容を確認してください。</p>
<form action="send_inquiry.php" method="POST">
<input type="hidden" name="company" value="<?php echo $company; ?>">
<input type="hidden" name="username" value="<?php echo $username; ?>">
<input type="hidden" name="tel1" value="<?php echo $tel1; ?>">
<input type="hidden" name="tel2" value="<?php echo $tel2; ?>">
<input type="hidden" name="tel3" value="<?php echo $tel3; ?>">
<input type="hidden" name="mail" value="<?php echo $mail; ?>">
<input type="hidden" name="mail_check" value="<?php echo $mail_check; ?>">
<input type="hidden" name="message" value="<?php echo $message; ?>">
<table>
<tbody>
<tr>
<th>会社名<span>※</span></th>
<td><?php echo $company; ?></td>
</tr>
<tr>
<th>担当者様<span>※</span></th>
<td><?php echo $username; ?></td>
</tr>
<tr>
<th>電話番号<span>※</span></th>
<td><?php echo $tel1; ?><?php echo $tel2; ?><?php echo $tel3; ?></td>
</tr>
<tr>
<th>E-Mail<span>※</span></th>
<td><?php echo $mail; ?></td>
</tr>
<tr>
<th>E-Mail(確認)<span>※</span></th>
<td><?php echo $mail_check; ?></td>
</tr>
<tr>
<th>内容<span>※</span></th>
<td>
<?php
// 改行部分にBRタグを埋め込む
echo nl2br($message);
?>
</td>
</tr>
</tbody>
</table>
<input type="submit" value=" 送信 ">
<input type="button" VALUE=" 戻る " onClick="self.history.back()">
</form>
送信完了ページ
送信完了のページを作成します。
send_inquiry.phpの名前でファイルを作成します。ファイル内には以下の内容を記述します。
<?php
// 会社名
$company = htmlspecialchars($_POST['company'], ENT_QUOTES);
// 担当者様
$username = htmlspecialchars($_POST['username'], ENT_QUOTES);
// 電話番号
$tel1 = htmlspecialchars($_POST['tel1'], ENT_QUOTES);
$tel2 = htmlspecialchars($_POST['tel2'], ENT_QUOTES);
$tel3 = htmlspecialchars($_POST['tel3'], ENT_QUOTES);
// メールアドレス
$mail = htmlspecialchars($_POST['mail'], ENT_QUOTES);
$mail_check = htmlspecialchars($_POST['mail_check'], ENT_QUOTES);
// 件名、内容
$title = 'お問い合わせ';
$message = htmlspecialchars($_POST['message'], ENT_QUOTES);
// 日本語（UTF-8）の設定
mb_language('ja');
mb_internal_encoding('UTF-8');
// Fromアドレスの設定（自動送信<送信元のアドレス>）
$name = '自動送信';
$email = 'info@abc@gmail.com';
$header = 'From: '. mb_encode_mimeheader($name) . '<' . $email .'>';
// 本文の末尾に[お名前][メールアドレス]を追加
$message = $message . "\n[" . $company . "]";
$message = $message . "\n[" . $username . "]";
$message = $message . "\n[" . $tel1 . "]";
$message = $message . "\n[" . $tel2 . "]";
$message = $message . "\n[" . $tel3 . "]";
$message = $message . "\n[" . $mail . "]";
$message = $message . "\n[" . $mail_check . "]";
// メール送信
$result = mb_send_mail("def@gmail.com", $title, $message, $header);
if ($result) {
// メール送信の成功
echo '■お問い合わせ内容を担当者へ送信しました。';
} else {
// メール送信の失敗
echo '■担当者への送信に失敗しました。';
}
?>
$email = ‘info@abc@gmail.com’;の部分は自分に届くメールのFromアドレスの設定（自動送信<送信元のアドレス>）です。形だけですので特に何でも良いです。
$result = mb_send_mail("def@gmail.com", $title, $message, $header);の部分は、送信内容を受け取るメールアドレスです。この例だと、def@gmail.comにメールが届きます。ご自身のメールアドレスに合わせて変更します。
なお、複数のメールアドレスを記述する場合は"def@gmail.com,ghi@gmail.com"とします。
実際に届いたメールの文書です。
まとめ
PHPとjQueryを使った簡単なお問い合わせフォームですが、WEBサイトに設置するときに役立つと思います。
最近はWordPressでサイトを制作することが多くなり、プラグインで簡単にお問い合わせが設置できるので、１から作る必要もなくなりました。しかし、HTMLを使用したWEBサイトを制作する場合は、お問い合わせを良く設置するので、作り方を知っていると便利です。