お問い合わせフォーム

【PHP】コンタクトフォームの作り方 第2回「PHP」

ここまでの記事はこちら
 

前回は HTML と CSS でお問い合わせフォームのレイアウトを作成したので、今回は PHP でお問い合わせフォームの機能を実装していきます。
 


 

はじめに

PHP コードを書き始める前に、どのようにお問い合わせフォームが動くのか全体の流れを紹介したいと思います。
 

 
 

お問い合わせする人は「名前・メールアドレス・件名・問い合わせ内容」を入力して送信ボタンを押します。
 

プログラム側では、送信ボタンが押されたら全ての項目が入力されているかをチェックします。

全ての項目が入力されている場合は

  • メールを送信
  • 完了メッセージ表示
  • 入力された項目をクリア

 

入力されていない項目がある場合は

  • エラーメッセージ表示(入力された項目はそのまま残しておく)

という処理をします。
 
 

全体の流れ

 
 

PHP

少し長いですが、一気に書いてしまいましょう!
コード内に書けなかった説明はコード下に追記しています。
 

1~50行目、81~91行目,
95, 98, 101, 104行目の value を追加します。

 
 

31, 34行目

31, 34行目に書いている "\r\n" は改行コードです。

ダブルクォーテーション " で囲む必要があります。
 
 

37行目

この1行でメールを送信することができます。

mb_send_mail($to, $subject, $message, $headers);
$to宛先
(カンマ区切りで複数のメールアドレスに送信できます)
$subject件名
$message本文
$headers差出人、Cc、Bcc
(複数追加する場合は d"\r\n" で区切ります)

 


 
 

エラーメッセージ

81~85行目では、エラーメッセージの表示をしています。

$err_msg が空でない場合($err_msg に文字列がセットされている場合)にエラーメッセージを表示します。
 

 
 

送信完了メッセージ

87~91行目では、送信完了メッセージの表示をしています。

$complete_msg が空でない場合($complete_msg に文字列がセットされている場合)に送信完了メッセージを表示します。
 


 
 

完成

これで全て完成です!
メールが送信されるかテストしてみてください
 
 

メール送信について
ローカル環境でメール関数を使う場合、別に設定が必要になる場合があります。
初心者の方は、ローカル環境でなくウェブサーバー上でテストするのが簡単です。

MacOS をお使いの方はこちらの記事も参考にしてみてください。

【2021年版】PostfixからGmail経由でメールを送信する方法 この記事では「Postfix から Gmail 経由でメール送信する方法」を紹介しています。 macOS には Postf...
 
 

まとめ

いかがだったでしょうか?

一番始めにも書きましたが、最近は WordPress でウェブサイトを作ることが多くなり、お問い合わせフォームはプラグインで簡単に作成できるようになりました。
 

しかしメール送信は必須の機能です。
 

私が今までに頂いたウェブサービスやショッピングサイトの開発でも、メール送信機能はほぼ100%実装しました。

例えばショッピングサイトの場合

  • 受注メール(管理者宛)
  • 注文受付メール(お客様宛)
  • 支払確認メール(お客様宛)
  • 発送メール(お客様宛)
  • レビュー依頼メール(お客様宛)
  • 新着レビューメール(管理者宛)
  • ニュースレター(お客様宛)

など、たくさん種類があります。
 

さくっとメール機能を実装できるようになっておくと、きっと役に立つと思います。

最後まで読んでいただきありがとうございました
 
 

完成コード

 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
あなたにオススメのプログラミング講座

この講座では PHP と MySQL データベースを使って「予定を登録・編集・削除・検索」できるカレンダーを開発していきます。

Bootstrap, Datetimepicker, Font Awesome の使い方、タブレット・スマートフォン表示に対応したレイアウトを作成する方法も学ぶことができます。

guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx