PHP応用 コンタクトフォームの作成
コンタクトフォームを作成しましょう。
まずは、このような「デモ：コンタクトフォーム」を作ります。
デモで動作を確認してみてください。
画面遷移は以下のようになります。
よくあるコンタクトフォームです。
- まず、入力画面を表示しコンタクト内容を入力してもらいます。
- 入力が終了したら確認画面に遷移し入力内容の確認をできるようにします。
ここで、入力内容に誤りがあった場合は、入力画面に戻って修正してもらいます。 - 入力内容に誤りがない場合、入力内容を投稿してもらい完了ページを表示し、コンタクト投稿したことを表示します。
一連のプログラムの流れはこんな感じで作成したいと思います。
まずは、入力ページの作成です。
こんなページを作ります。
ソース：input.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 63 64 65 66 67 68 69 |
<?php $contactname = $_POST["contactname"]; $contactmail = $_POST["contactmail"]; $contents = $_POST["contents"]; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>コンタクトフォーム</title> <style TYPE="text/css"> <!-- H1 { color: red; font-size: 18pt; } #contact-form th { background-color: #9bdbea; padding: 10px 20px; } #contact-form td { background-color: #f7f7ef; padding: 10px 20px; } #contact-form td input { width: 400px; } #contact-form td textarea { width: 400px; } --> </style> </head> <body> <h1>コンタクトフォーム</h1> <form action="./confirm.php" method="post"> <table id="contact-form" border="1" cellpadding="0" cellspacing="0"> <tr> <th> 名前 </th> <td> <input type="text" name="contactname" value="<?= $contactname ?>" /> </td> </tr> <tr> <th> メールアドレス </th> <td> <input type="text" name="contactmail" value="<?= $contactmail ?>" /> </td> </tr> <tr> <th> 内容 </th> <td> <textarea name="contents" rows="10"><?= $contents ?></textarea> </td> </tr> <tr> <th colspan="2"> <input type="submit" value="入力"> </th> </tr> </table> </form> </body> </html> |
formタグを使用して次のページにデータを送信できるようにします。
次に、確認画面を作成しましょう。
内容に誤りがあったら内容修正ボタンで入力画面に戻ります。
ソース：confirm.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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<?php $contactname = $_POST["contactname"]; $contactmail = $_POST["contactmail"]; $contents = $_POST["contents"]; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>コンタクトフォーム</title> <style TYPE="text/css"> <!-- H1 { color: red; font-size: 18pt; } #contact-form th { background-color: #9bdbea; padding: 10px 20px; } #contact-form td { background-color: #f7f7ef; padding: 10px 20px; } #contact-form td input { width: 400px; } #contact-form td textarea { width: 400px; } form { display: inline; } --> </style> </head> <body> <h1>コンタクトフォーム</h1> <table id="contact-form" border="1" cellpadding="0" cellspacing="0"> <tr> <th> 名前 </th> <td> <?= $contactname ?> </td> </tr> <tr> <th> メールアドレス </th> <td> <?= $contactmail ?> </td> </tr> <tr> <th> 内容 </th> <td> <?= $contents ?> </td> </tr> <tr> <th colspan="2"> <form action="./end.php" method="post"> <input type="hidden" name="contactname" value="<?= $contactname ?>"> <input type="hidden" name="contactmail" value="<?= $contactmail ?>"> <input type="hidden" name="contents" value="<?= $contents ?>"> <input type="submit" value="送信" /> </form> <form action="./input.php" method="post"> <input type="hidden" name="contactname" value="<?= $contactname ?>"> <input type="hidden" name="contactmail" value="<?= $contactmail ?>"> <input type="hidden" name="contents" value="<?= $contents ?>"> <input type="submit" value="内容修正" /> </form> </th> </tr> </table> </body> </html> |
ここでは、<input type="hidden">タグを使って前の画面、次の画面へ渡すデータを保持します。
また、前画面からのデータはPOSTメソッドにて送信したので、$_POST配列に格納されます。
なので、$_POST変数を使用して前のページからの送信データを取得します。
最後に送信画面です。
この画面では前の画面からのデータを取得してメールにて内容を送信します。
PHPでのメールの送信もしています。
ソース：end.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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php $contactname = $_POST["contactname"]; $contactmail = $_POST["contactmail"]; $contents = $_POST["contents"]; //メール送信処理 mb_language('ja'); $from = mb_encode_mimeheader($contactname)."<".$contactmail.">"; $reply_to = $from; $to = 'ここは各自のメールアドレスを設定してください'; $header = "From: $from\n"; $header .= "Reply-To: $reply_to\n"; $header .= "X-Mailer: myphpMail ". phpversion(). "\n"; $subject = "【PHP応用 コンタクトフォームの作成】"; $message = $contents; mb_send_mail($to, $subject, $message, $header); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>コンタクトフォーム</title> <style TYPE="text/css"> <!-- H1 { color: red; font-size: 18pt; } #contact-form th { background-color: #9bdbea; padding: 10px 20px; } #contact-form td { background-color: #f7f7ef; padding: 10px 20px; } #contact-form td input { width: 400px; } #contact-form td textarea { width: 400px; } form { display: inline; } --> </style> </head> <body> <h1>コンタクトフォーム</h1> <p>以下の内容で、送信しました。</p> <table id="contact-form" border="1" cellpadding="0" cellspacing="0"> <tr> <th> 名前 </th> <td> <?= $contactname ?> </td> </tr> <tr> <th> メールアドレス </th> <td> <?= $contactmail ?> </td> </tr> <tr> <th> 内容 </th> <td> <?= $contents ?> </td> </tr> </table> </body> </html> |
9行目のメールアドレスは、各自設定してください。
前ページから送られてきたデータをもとにmb_send_mail関数を使用してメールを送信します。
ローカル環境でテストしてみて
このようなエラーが出力された場合、メールサーバーが構築されていないことが理由です。
レンタルサーバーで確認するか、ローカル環境にメールサーバーを構築して確認してみてください。
簡易ですがこれでコンタクトフォームの出来上がりです。
コメント：0件
トラックバック：0件
