【WordPress】phpで自作のお問い合わせ画面を作成してみよう!後半

こちらは【WordPress】phpで自作のお問い合わせ画面を作成してみよう!後半になります。
もし、前半を見ていない場合は【WordPress】phpで自作のお問い合わせ画面を作成してみよう!前半を先にご覧ください。

前半では以下2つの内容を学習しました。
送信ボタンを押下した際に、画面が移動するようにすること
お問い合わせ画面で入力した内容が移動した画面で反映されるようにすること。

後半では以下の内容を紹介します。
送信ボタンを押下した際にメールが送信されるようにすること
お問い合わせ画面で入力した内容にミスがないかエラーチェックを行うこと

この2つが出来れば、お問い合わせ画面を作成することができます。
自作のお問い合わせ画面作成まで後もう少しですので頑張っていきましょう。

送信ボタンを押した時にメールを送信する

送信ボタンを押した時にメールを送信する挙動を作成してみましょう。

mb_send_mail()関数を使ってメールを送信する

メールを送信するにはmb_send_mail()関数を使用します。
mb_send_mail()関数の構文は下記になります。

mb_send_mail()関数について詳しく知りたい場合は【PHP】mb_send_mail()関数を使ってメールを送信する方法を解説!サンプルコード多数!をご参照ください。

それではmb_send_mail()関数を使ってお問い合わせ画面の入力後に自動でメールを送信するように設定してきます
お問い合わせ画面(page-contact.php)は前半で作成した画面のままで大丈夫です。

page-contact.phpのコードは下記のようになります。

page-contact.php

出力結果

送信ボタン押下後の画面(page-result.php)を修正すると下記のようなコードになります。

page-result.php

出力結果

送信ボタンを押下すると、「メールを送信しました。」という画面に遷移しました。
これで数秒後に$toで設定したメールアドレスにメールが届くようになります。

メール送信後

これで上記の画面のようにメールが届きましたら、メールの送信の挙動は完成です。

送信ボタンを押した時にエラーチェックを行う

メールの送信の挙動が完成したら次は必須項目などが空白の場合にメールが送信できないようにするためのエラーチェックを作成していきます。

エラーチェックの条件を作成する

エラーチェックの条件はそれぞれありますので今回は以下の一般的な条件とします。
①入力項目が空白である場合
②メールアドレスに「@」が入っていない場合
③メールアドレスと確認用のメールアドレスが一致していない場合

上記をエラーチェックの条件とすると送信ボタン押下後の画面(page-result.php)を下記のように修正します。

page-result.php

出力結果(メール送信失敗)

入力項目が空白なのでメールの送信に失敗しましたという画面に移動します。
つまり、送信ボタンを押した時にエラーチェックが行われたということになります。
次はエラーチェックのh条件をクリアして送信ボタンを押下してみると

出力結果(メール送信成功)

メールが送信されましたという画面に移動し、メールが届きました。
これでエラーチェックは完了です。

エラーチェックをメソッド化する

先ほどエラーチェックをしたコードを作成しましたが、先ほどのコードではmb_send_mail()関数まで何をしているのか第三者からだとコードが読みにくく、理解するまでに時間がかることがあります。コードは誰がみてもわかりやすく書くことが大切である為、今回はエラーチェックをメソッド化します。

1つの動きをメソッド化することで誰がみてもわかりやすいコードを書くことができますので長いコードを書いてしまった場合はメソッド化してまとめるようにしましょう。

それでは、エラーチェックをメソッド化します。送信ボタン押下後の画面(page-result.php)を修正すると下記のようなコードになります。

page-result.php

エラーチェックをerrCheckというメソッド名とし、チェックする項目の値を引数として呼び出すようにします。すると、コードがみやすくなり、何をしているのか第三者から見ても分かりやすくなります。

ここまで作成できれば自分でお問い合わせ画面を作成することができます。
是非作成してみてください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し