PHPで何か作ってみようと自分のサイトを作ったのでお問い合わせ画面を作りたい。
デザイナーを目指してポートフォリオを作成したのでお問い合わせ画面を作りたい。
でも、入力された内容のデータを扱ったり、メールを送信したり、よくわからない。
という人のために、PHPを使った簡単なお問い合わせ画面を作ってみたいと思います。
動きとしては、入力されたお問い合わせ内容をサイトのサーバ内にあるメールサーバから、指定した自分の個人用アドレスに送信するというものです。
実際に、運用したい人はセキュリティの問題もあるので、この記事に載っている内容のままの運用はお勧めしません。
以下に、セキュリティ対策も含めた実装内容があるのでそちらを参考にして下さい。
セキュリティ対策のお問い合わせ画面現在準備中
ページコンテンツ
作るものと完成イメージ
お問い合わせ画面なので、
- 入力画面
- 確認画面
- 完了画面
を用意します。
下図がイメージです。
入力された値の確認やメールの送信などPHPで処理をしますが、フロートしては下図になります。
ファイルの位置と処理の位置があわせてあります。
ザックリとイメージは出来たと思います。
今回、入力された内容を一時的に保存するためにCookieとセッションを使います。
Cookieとセッションについては、ここでは詳しく説明しませんが、PHPでユーザを識別するために一時的にデータを保持しておくもので、
webサービスを作るうえでは必須の知識ですので、知らない人は気が向いた時にでも調べてみて下さい。
使うのに特に準備するものはなく、PHPの記述のみで使えます。
入力画面の作成
早速入力画面を作ります。まずは見た目を作り、その後に入力チェックの処理を作っていきましょう。
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 |
<?php ?> <!DOCTYPE html> <html> <head> <title>お問い合わせ - 入力画面</title> </head> <body> <h1>お問い合わせ - 入力画面</h1> <br> <form method="post" action="index.php"> <label for="name">お名前<span style="color: red">(必須)</span></label> <input type="text" name="name" id="name" > <br> <label for="mail">ご連絡先(メールアドレス)<span style="color: red">(必須)</span></label> <input type="email" name="mail" id="mail" > <br> <label for="tel">ご連絡先(電話番号)</label> <input type="text" name="tel" id="tel" > <br> <label for="content">お問い合わせ内容<span style="color: red">(必須)</span></label> <textarea name="content" id="name"></textarea> <br> <input type="submit" name="confirm" value="確認"> </form> </body> </html> |
はい。毎度のことで、絶望的にダサいですが、気にしないで進めていきましょう。
今回用意したのは、必須で名前とメールアドレスと内容、任意で電話番号です。
formタグのactionで指定した先は同じファイルにしています。ですので、このファイルではURLでアクセス(get通信)してきた時はhtmlの表示のみ、
確認ボタンを押してアクセス(post通信)してきた時は入力チェックの処理を行うようにします。
php部分の作成
では次にphp部分を作成していきます。
今回入力チェックをするのは、必須項目が入力されているかのみです。
もっと細かく電話番号やメールアドレスが正しいフォーマットで入力されているか、文字数が少なすぎないか等のチェックを行いたい場合は、
自分で足してみて下さい。
特に複雑なチェックをする場合は「正規表現」というものを使う事により実現できますので、調べてみて下さい。
では、処理についてコードを見ながら解説していきます。
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 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 |
<?php session_start(); //セッションを使う //入力チェック $message = ''; if(isset($_POST['confirm'])){ //確認ボタンを押してポストしたものなら $error_flg = false; //名前の必須入力チェック if ($_POST['name'] === ''){ $message .= "お名前は必ず入力してください<br>"; $error_flg = true; } //名前の必須入力チェック if ($_POST['mail'] === ''){ $message .= "メールアドレスは必ず入力してください<br>"; $error_flg = true; } //内容の必須入力チェック if ($_POST['content'] === ''){ $message .= "お問い合わせ内容は必ず入力してください<br>"; $error_flg = true; } //エラーが無ければ入力内容をセッションに保存して確認画面へ if (!$error_flg){ $_SESSION['inquiry'] = $_POST; header('Location: confirm.php'); exit(); } } ?> <!DOCTYPE html> <html> <head> <title>お問い合わせ - 入力画面</title> </head> <body> <h1>お問い合わせ - 入力画面</h1> <br> <p style="color: red"><?php echo $message ?></p> <!-- エラーメッセージ表示 --> <form method="post" action="index.php"> <label for="name">お名前<span style="color: red">(必須)</span></label> <input type="text" name="name" id="name" value="<?php if(isset($_POST['name'])) echo htmlspecialchars($_POST['name']); ?>"> <br> <label for="mail">ご連絡先(メールアドレス)<span style="color: red">(必須)</span></label> <input type="email" name="mail" id="mail" value="<?php if(isset($_POST['mail'])) echo htmlspecialchars($_POST['mail']); ?>"> <br> <label for="tel">ご連絡先(電話番号)</label> <input type="text" name="tel" id="tel" value="<?php if(isset($_POST['tel'])) echo htmlspecialchars($_POST['tel']); ?>"> <br> <label for="content">お問い合わせ内容<span style="color: red">(必須)</span></label> <textarea name="content" id="content" ><?php if(isset($_POST['content'])) echo htmlspecialchars($_POST['content']); ?></textarea> <br> <input type="submit" name="confirm" value="確認"> </form> </body> </html> |
内容は単純です。行数とともに説明します。
3行目：セッション開始の宣言。phpでセッションを使用するための宣言。
6行目：エラーメッセージ変数の宣言と初期化。
7行目：ログインボタンを押してpost通信で戻ってきた場合はname=”confirm”のボタンが押されているため、
その値の有無によりgetかpostか(ログインボタンが押されたか)を判断する。postなら入力チェック処理。
8行目：エラーの有無をフラグで管理するため宣言と初期化。
10~23行目：各必須項目が空だった場合はエラーメッセージにメッセージを追加してフラグをたてる。
26行目：エラーフラグが立っていなければpost内容をセッションに保存して確認画面へとばす。
45行目：エラーがあった場合は、エラー内容を表示。
48,51,54,57行目：エラー時に再入力をすることを防ぐために、postされたデータがあれば初期値としてセットするように変更。
以上で、入力画面の処理は完成です。
確認画面の作成
確認画面を作成していきます。
やる事としては、入力画面で入力した内容の表示とメール送信になります。
html部分の作成
まず、入力された内容をセッションから利用するために、phpでsession_start()を宣言します。
また、戻るリンクをつけて、入力し直しを出来るようにします。
この時に今のままでは、戻った際に今の入力項目が消えてしまうので、htmlにパラメータを付けて戻り、
index.phpで戻ったことを判別できるようにしたいと思います。(getによる戻ったことを知らせるフラグの受け渡し)
|
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 |
<?php session_start(); //セッションを使う ?> <!DOCTYPE html> <html> <head> <title>お問い合わせ - 確認画面</title> </head> <body> <h1>お問い合わせ - 確認画面</h1> <br> <form method="post" action="confirm.php"> <p> [お名前]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['name']); ?> </p> <p> [ご連絡先(メールアドレス)]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['mail']); ?></p> <p> [ご連絡先(電話番号)]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['tel']); ?></p> <p> [お問い合わせ内容]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['content']); ?></p> <br> <input type="submit" name="send" value="送信"> </form> <div><a href="index.php?action=rewrite">« 書き直す</a> </body> </html> |
こんな感じにダサい画面に、入力画面で入力した内容が表示されていればOKです。
index.phpに戻るボタンの処理を追加
メール送信の処理の前に、戻るボタンの処理を完成させます。
動きとしては戻るボタンが押されてindex.phpにとんだ際に、それを判別して表示しなおします。
これを実現するためには手順として、
- 戻って来たことを判別する(今回はurlにaction=rewriteがある)
- 表示するように各valueに入れる(今回は$_POSTをvalueに入れているので、セッションの内容を$_POSTへ代入する)
これで実現できます。
コードにすると以下のようになります。
|
1 2 3 4 |
// 書き直し if (isset($_REQUEST['action']) && $_REQUEST['action'] === 'rewrite'){ $_POST = $_SESSION['inquiry']; } |
これをindex.phpの「?>」の直前(間違ってifの中などに入れないように注意)に追加すれば戻った際にもデータが保持されているようになります。
メール送信部分の作成
ではいよいよメール送信の処理を実装します。
ここまで、xamppなどの仮想環境で実装している人はメールの設定が必要です。
以下の記事を参考にしてください。
【PHPでメール送信】XAMPPのローカル環境上でPHPを使って自分のgmailからメールを送信する
実際にレンタルなどで保有しているサーバに上げる際は、特に設定しなくても大丈夫です。(サーバによりますが、、、)
コードを見ながら解説します。
|
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 |
<?php session_start(); //セッションを使う $message = ""; if (isset($_POST['send']) && isset($_SESSION['inquiry'])){ //メール送信 mb_language("Japanese"); mb_internal_encoding("UTF-8"); $email = "sousin-mail@sakura.ne.jp"; // 送信元メール(用意しているサーバのもの(好きなもので良い)) $subject = "お問い合わせがありました"; // 題名 $to = 'jushin-mail@gmail.ne.jp'; // 送信先メール(個人のメール) $header = "From: ". mb_encode_mimeheader("お問い合わせ通知") . "<$email>"; $body = " 以下の内容によるお問い合わせがありました。\n [お名前]\n {$_SESSION['inquiry']['name']}\n [ご連絡先(メールアドレス)]\n {$_SESSION['inquiry']['mail']}\n [ご連絡先(電話番号)]\n {$_SESSION['inquiry']['tel']}\n [お問い合わせ内容]\n {$_SESSION['inquiry']['content']}\n "; $result = mb_send_mail($to, $subject, $body, $header); //送信結果 if ($result){ //セッション削除 $_SESSION = []; session_destroy(); //完了画面へ header('Location: complete.php'); exit; } else { $message = "お問い合わせ送信に失敗しました。"; } } ?> <!DOCTYPE html> <html> <head> <title>お問い合わせ - 確認画面</title> </head> <body> <h1>お問い合わせ - 確認画面</h1> <br> <p style="color: red"><?php echo $message ?></p> <form method="post" action="confirm.php"> <p> [お名前]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['name']); ?> </p> <p> [ご連絡先(メールアドレス)]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['mail']); ?></p> <p> [ご連絡先(電話番号)]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['tel']); ?></p> <p> [お問い合わせ内容]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['content']); ?></p> <br> <input type="submit" name="send" value="送信"> </form> <div><a href="index.php?action=rewrite">« 書き直す</a> </body> </html> |
行数とともに説明します。
4行目：メール送信失敗のためにメッセージ変数の宣言と初期化。
5行目：ログインボタンを押してpost通信で戻ってきた場合はname=”send”のボタンが押されているため、
その値の有無によりgetかpostか(ログインボタンが押されたか)を判断する。postなら入力チェック処理。
また、同時に不正がないようにセッションに値が入っているかも確認する。
6~26行目：メール送信
7,8行目：メールを日本語用に設定
10行目：メールの送信元。サイトを公開しているサーバのものを使用してください。指定しないとサーバのデフォルトのメールが使われる(はず)
11行目：メールの件名
12行目：送信先メール(受信するメール)。使いたい個人のものを指定してください。
13行目：送信元の名前の指定。今回はお問い合わせ通知という人からメールが届くようにしています。
14~25行目：メールの内容
26行目：メール送信。また返り値が成功したかを示すbool(true or false)になっているのでそれを取得。
29行目：メール送信が成功したときの処理。
31,32行目：セッションの削除
34, 35行目：完了画面へ遷移
37~39行目：メール送信が失敗したときの処理。今回は失敗したことを表示するだけにする。
54行目：送信失敗時のエラーメッセージ表示
以上、
送信ボタンが押されたことを判別して、
メール送信をする関数のmb_send_mail()の使い方に基づいて処理を書いただけですので内容は単純です。
完了画面の作成
完了画面を作成します。
内容は、送信が成功したというお知らせのみなので、htmlのみで良いです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>お問い合わせ - 完了画面</title> </head> <body> <h1>お問い合わせ完了</h1> <br> <p>お問い合わせ内容を送信いたしました。管理人が確認次第、記入いただいた連絡先へ連絡いたしますのでお待ちください。</p> </body> </html> |
これで、お問い合わせの実装は終わりになります。
特に難しい処理なくある程度親切なお問い合わせが作れたかと思います。
最初に述べているとおり、今回はphpの処理の流れを理解していただくために書いた記事であり、
セキュリティに関しては何も対策がされていないため、運用する際には注意してください。
最後に3つのファイルの完成形を載せておきます。
完成コード
|
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 |
<?php session_start(); //セッションを使う //入力チェック $message = ''; if(isset($_POST['confirm'])){ //確認ボタンを押してポストしたものなら $error_flg = false; //名前の必須入力チェック if ($_POST['name'] === ''){ $message .= "お名前は必ず入力してください<br>"; $error_flg = true; } //名前の必須入力チェック if ($_POST['mail'] === ''){ $message .= "メールアドレスは必ず入力してください<br>"; $error_flg = true; } //内容の必須入力チェック if ($_POST['content'] === ''){ $message .= "お問い合わせ内容は必ず入力してください<br>"; $error_flg = true; } //エラーが無ければ入力内容をセッションに保存して確認画面へ if (!$error_flg){ $_SESSION['inquiry'] = $_POST; header('Location: confirm.php'); exit(); } } // 書き直し if (isset($_REQUEST['action']) && $_REQUEST['action'] === 'rewrite'){ $_POST = $_SESSION['inquiry']; } ?> <!DOCTYPE html> <html> <head> <title>お問い合わせ - 入力画面</title> </head> <body> <h1>お問い合わせ - 入力画面</h1> <br> <p style="color: red"><?php echo $message ?></p> <!-- エラーメッセージ表示 --> <form method="post" action="index.php"> <label for="name">お名前<span style="color: red">(必須)</span></label> <input type="text" name="name" id="name" value="<?php if(isset($_POST['name'])) echo htmlspecialchars($_POST['name']); ?>"> <br> <label for="mail">ご連絡先(メールアドレス)<span style="color: red">(必須)</span></label> <input type="email" name="mail" id="mail" value="<?php if(isset($_POST['mail'])) echo htmlspecialchars($_POST['mail']); ?>"> <br> <label for="tel">ご連絡先(電話番号)</label> <input type="text" name="tel" id="tel" value="<?php if(isset($_POST['tel'])) echo htmlspecialchars($_POST['tel']); ?>"> <br> <label for="content">お問い合わせ内容<span style="color: red">(必須)</span></label> <textarea name="content" id="content"><?php if(isset($_POST['content'])) echo htmlspecialchars($_POST['content']); ?></textarea> <br> <input type="submit" name="confirm" value="確認"> </form> </body> </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 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 |
<?php session_start(); //セッションを使う $message = ""; if (isset($_POST['send'])){ //メール送信 mb_language("Japanese"); mb_internal_encoding("UTF-8"); $email = ""; // 送信元メール(用意しているサーバのもの(好きなもので良い)) $subject = "お問い合わせがありました"; // 題名 $to = 'securio12@gmail.com'; // 送信先メール(個人のメール) $header = "From: ". mb_encode_mimeheader("お問い合わせ通知") . "<$email>"; $body = " 以下の内容によるお問い合わせがありました。\n [お名前]\n {$_SESSION['inquiry']['name']}\n [ご連絡先(メールアドレス)]\n {$_SESSION['inquiry']['mail']}\n [ご連絡先(電話番号)]\n {$_SESSION['inquiry']['tel']}\n [お問い合わせ内容]\n {$_SESSION['inquiry']['content']}\n "; $result = mb_send_mail($to, $subject, $body, $header); //送信結果 if ($result){ //セッション削除 $_SESSION = []; session_destroy(); //完了画面へ header('Location: complete.php'); exit; } else { $message = "お問い合わせ送信に失敗しました。"; } } ?> <!DOCTYPE html> <html> <head> <title>お問い合わせ - 確認画面</title> </head> <body> <h1>お問い合わせ - 確認画面</h1> <br> <p style="color: red"><?php echo $message ?></p> <form method="post" action="confirm.php"> <p> [お名前]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['name']); ?> </p> <p> [ご連絡先(メールアドレス)]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['mail']); ?></p> <p> [ご連絡先(電話番号)]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['tel']); ?></p> <p> [お問い合わせ内容]<br> <?php echo htmlspecialchars($_SESSION['inquiry']['content']); ?></p> <br> <input type="submit" name="send" value="送信"> </form> <div><a href="index.php?action=rewrite">« 書き直す</a> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>お問い合わせ - 完了画面</title> </head> <body> <h1>お問い合わせ完了</h1> <br> <p>お問い合わせ内容を送信いたしました。管理人が確認次第、記入いただいた連絡先へ連絡いたしますのでお待ちください。</p> </body> </html> |