お問い合わせをWEBサイトにPHPで設置する作り方
WEBサイトを制作しているとお問い合わせページはかなりの頻度で必要になってきます。企業サイトでは必須ページです。
しかし、HTMLで作成した場合はメールソフトを立ち上げる程度の装備しかできません。本格的なお問い合わせフォームを作成して、送信まで作るとなるとPHPが必要になります。
このページでは、PHPを使って簡単なお問い合わせページの作り方をご紹介します。
お問い合わせの特徴
制作するお問い合わせの特徴をまとめました。
お問い合わせフォームの入力時に記入項目が適切であるかチェックして、入力ミスを表示するように設計します。このシステムをバリデーションと言います。
必須項目と通常項目の設定できるようにします。必須項目が入力されずに「送信」ボタンをクリックすると、エラーを表示します。
確認画面を表示して、送信内容を確かめられるように設計します。
PHPを使用して送信できるようにします。
制作方法
お問い合わせを作るには３つのページが必要になります。
- お問い合わせフォームのページ
- 確認画面ページ
- 送信完了ページ
以上を作成します。
お問い合わせフォームのページ
まずは、お問い合わせフォームのページを作成します。
contact.htmlの名前でファイルを作成します。html内には以下の内容を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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です。
|
1 2 3 4 5 6 7 8 9 10 11 |
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>より上に記述します。
|
1 2 |
<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で作成して以下のコードを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
// 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を記述します。
|
1 2 |
<input type="radio" name="example" value="サンプル" class="validate required">サンプル <input type="radio" name="example" value="サンプル">サンプル |
checkboxRequired
チェックボックスのチェックがない場合に「※選択してください」と表示します。
チェックボックスのサンプルhtmlです。全体をdivで囲んでclassを記述します。div以外にもtdやddでも構いません。なお、チェックボタンに関してはclassタグにvalidateは必要ありません。
|
1 2 3 4 |
<div class="checkboxRequired"> <input type="checkbox" name="example" value="サンプル">サンプル <input type="checkbox" name="example" value="サンプル">サンプル </div> |
validate add_text
チェックボックスのその他をチェックして、フォームに入力がない場合に「※その他の項目を入力してください。」と表示します。
チェックボックスのその他のサンプルhtmlです。
|
1 2 3 4 5 |
<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の名前でファイルを作成します。ファイル内には以下の内容を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?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の名前でファイルを作成します。ファイル内には以下の内容を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?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サイトを制作する場合は、お問い合わせを良く設置するので、作り方を知っていると便利です。