2020.06.27
PHPでつくる、簡単メールフォームのつくり方
はじめまして。FMCのフロントエンドエンジニアしてます、まちうーたんです。
絶賛猛勉強中です！
今回、HTMLとPHPを使った簡単なメールフォームをご紹介しようと思います。
データベース保存や確認画面のない超シンプルなものです！
まずはHTMLです。ファイル名は form.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 | <form action="thanks.php" method="post" enctype="multipart/form-data"> <dl> <dt><label for="name">お名前：</label></dt> <dd> <input id="name" name="お名前" type="text"> </dd> </dl> <dl> <dt><label for="email">メールアドレス：</label></dt> <dd> <input id="email" name="email" type="text"> </dd> </dl> <dl> <dt><label for="tel">お電話番号：</label></dt> <dd> <input id="tel" name="tel" type="text"> </dd> </dl> <dl> <dt>あなたのアザラシタイプ</dt> <dd> <ul> <li> <label><input type="radio" name="azarashi" value="ワモンアザラシ">ワモンアザラシ</label> </li> <li> <label><input type="radio" name="azarashi" value="ゴマフアザラシ">ゴマフアザラシ</label> </li> <li> <label><input type="radio" name="azarashi" value="ミナミゾウアザラシ">ミナミゾウアザラシ</label> </li> </ul> </dd> </dl> <dl> <dt>今食べたいもの</dt> <dd> <ul> <li> <label><input type="checkbox" name="food" value="餃子">餃子</label> </li> <li> <label><input type="checkbox" name="food" value="小籠包">小籠包</label> </li> <li> <label><input type="checkbox" name="food" value="エビチリ">エビチリ</label> </li> </ul> </dd> </dl> <ul> <li> <input type="reset" value="リセット"> </li> <li> <input type="submit" value="送信"> </li> </ul></form> |
見た目はこんな感じです。スタイル指定してないのですごくシンプルです。
テキスト記入、ラジオボタン、チェックボックスがあり、よくある感じです。
1 | <form action="thanks.php" method="post" enctype="multipart/form-data"> |
formのmethod属性はgetとpostがありますが、
getを使うとURLパラメーターで値が送られるのに対し、postは裏で処理をしています。
そのため、URLには情報が表示されなくなるのでセキュリティを考えて、
お客様の情報を扱うメールフォームでは、postを使います。
次はPHPです。ファイル名は thanks.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 | <?php$action = $_POST['action'];$name = htmlspecialchars($_POST['name'],ENT_QUOTES);$email = htmlspecialchars($_POST['email'],ENT_QUOTES);$tel = htmlspecialchars($_POST['tel'],ENT_QUOTES);$azarashi = htmlspecialchars($_POST['azarashi'],ENT_QUOTES);$food = htmlspecialchars($_POST['food'],ENT_QUOTES);$error = '';if ($name == '') { $error = $error.'<p>お名前が入力されていません。</p>';}if ($email == '') { $error = $error.'<p>メールアドレスが入力されていません。</p>';}if ($tel == '') { $error = $error.'<p>お電話番号が入力されていません。</p>';}if ($member == '') { $error = $error.'<p>あなたのアザラシタイプが入力されていません。</p>';}if ($food == '') { $error = $error.'<p>今食べたものが入力されていません。</p>';}if ($error != '') { echo $error; echo '<form method="post" action="form.html">'; echo '<input type="submit" name="backbtn" value="前のページへ戻る">'; echo '</form>';} else { $mail .= "以下の内容が送信されました。\n\n"; $mail .= "【お名前】\n"; $mail .= $name."\n\n"; $mail .= "【お名前フリガナ】\n"; $mail .= $email."\n\n"; $mail .= "【お電話番号】\n"; $mail .= $tel."\n\n"; $mail .= "【あなたのアザラシタイプ】\n"; $mail .= $azarashi."\n\n"; $mail .= "【今食べたいもの】\n"; $mail .= $food."\n\n"; //日本語設定を行う mb_language("Japanese"); mb_internal_encoding("UTF-8"); $mail_to = "XXX@XX.jp"; //送信先メールアドレス $mail_subject = "メールフォームより送信されました"; //メールの件名 $mail_body = $mail; //メールの本文 $mail_header = "from:".$email; //フォームで入力されたメールアドレスを送信元として表示する $mailsend = mb_send_mail($mail_to, $mail_subject, $mail_body, $mail_header); if($mailsend == true) { echo '<p>メールを送信しました。</p>'; echo '<form method="post" action="form.html">'; echo '<input type="submit" name="backbtn" value="前のページへ戻る">'; echo '</form>'; } else { echo '<p>メール送信でエラーが発生しました。</p>'; echo '<form method="post" action="form.html">'; echo '<input type="submit" name="backbtn" value="前のページへ戻る">'; echo '</form>'; }}?> |
ここで、form.htmlで指定したname属性を[]の中に指定して、変数に格納しています。
1 2 3 4 5 6 7 | <?php$action = $_POST['action'];$name = htmlspecialchars($_POST['name'],ENT_QUOTES);$email = htmlspecialchars($_POST['email'],ENT_QUOTES);$tel = htmlspecialchars($_POST['tel'],ENT_QUOTES);$azarashi = htmlspecialchars($_POST['azarashi'],ENT_QUOTES);$food = htmlspecialchars($_POST['food'],ENT_QUOTES); |
何度もしつこく書いている、htmlspecialchars ですが、これもとっても大事です。
この記述がなくてもフォームは動作しますが、< > や、 "" など、HTMLでタグとして使われいるものは、文字列に変換されず、そのままタグとして送信されてしまいます。
間違いの他に、悪質なコードを入力して改変だってできちゃうかもしれません！忘れずにつけます！
さらに後ろに ENT_QUOTES もつけると '' もタグとして認識されず文字列に変換されます。
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $error = '';if ($name == '') { $error = $error.'<p>お名前が入力されていません。</p>';}if ($email == '') { $error = $error.'<p>メールアドレスが入力されていません。</p>';}if ($tel == '') { $error = $error.'<p>お電話番号が入力されていません。</p>';}if ($member == '') { $error = $error.'<p>あなたのアザラシタイプが入力されていません。</p>';}if ($food == '') { $error = $error.'<p>今食べたものが入力されていません。</p>';} |
ここは項目が入力されていないとエラー文が出るようにしたコードです。
必須項目がある場合に使えます。
25 26 27 28 29 30 | if ($error != '') { echo $error; echo '<form method="post" action="form.html">'; echo '<input type="submit" name="backbtn" value="前のページへ戻る">'; echo '</form>'; |
エラー文の最後に、エラーが空じゃない（エラーがあった）場合に、入力フォームに戻るボタンが出るようにします。
ただ、よくあるブラウザ上で入力と同時に行うバリデーションは、jsとかでやると思うので、
絶対いるわけじゃないかもしれませんが、一応ダブルチェック的な意味で…
53 | $mailsend = mb_send_mail($mail_to, $mail_subject, $mail_body, $mail_header); |
mb_send_mail()がメールを送信するための関数です！
メールを送る関数といえば、mail関数もありますが、mb_send_mail関数は日本語での送信ができるため、こっちを使う方が多いと思います。
さて、ウェブサイトに必要不可欠といってもいいくらい、大事なお問い合わせフォーム（メールフォーム）ですが、
これ、実は設置すること自体はとても簡単にできます。
WordPressでしたら、無料で高機能なプラグインもありますし、Googleフォームなんかも直感的に使えて非常に簡単です。(無料ですし)
ただ、カスタマイズしたい時や、エラーが出た時にどんな仕組みで動いているのかを知っていると便利ですので、少しでも興味を持っていただいたら嬉しいです！
