静的サイトにお問い合わせフォームを実装する【メール送信機能】

1. お問い合わせフォーム

 自サイトに設置しているお問い合わせフォームは、図1-1のようにごく一般的なものです。入力項目として、お名前、メールアドレス、題名、お問い合わせ内容があって、メール送信ボタンがあります。

  
図1-1 自サイトのお問い合わせフォーム

 

 この記事では、必要最低限の機能をもつ基本的なお問い合わせフォームを実装する方法について説明します。

 

 なお、お問い合わせフォームは「サイトページのひな型」に組み込んであります。「サイトページのひな型」のつくり方や説明などの詳細については、以下の記事をご覧ください。

部品化したヘッダー・サイドバー・フッターを使って【サイトページのひな型をつくる】
サイトページのひな型を作ってしまえば、コンテンツや記事を追加する際の手間が大幅に削減できるはず。 部品化したヘッダー・サイドバー・フッターを適切に配置して、ページひな型をつくることが目的です。

 

2. HTMLでお問い合わせフォームをつくる

 以下のHTMLは、「サイトページのひな型」にお問い合わせフォームを組み込んであります。お問い合わせフォーム部分は、コード内番号<form class=・・・> ~ </form>にあります。コード内番号の説明は以下のとおりです。

①お問い合わせフォーム部分<form class=・・・> ~ </form>:
②トークン認証用
③1行のテキストボックス
④複数行のテキストボックス
⑤送信ボタン
⑥method=”POST”を指定し、入力データを”php/mailer.php”に送る

 送信ボタンを押すとメール送信が行われます。メール送信は、PHP(mailer.php)で行います。
 

 
 

3. お問い合わせフォームのスタイルを設定する

 自サイトのお問い合わせフォームのスタイルを設定したCSSコードは以下のとおりです。
 お問い合わせフォームの入力欄、送信ボタンなどのスタイルを指定します。
 

 
 

4. メール送信機能を実装する

 お問い合わせフォームの「送信」ボタンを押すと、以下2通のメールが送信されます。

(1)問い合わせを行った相手あてへのメール
(2)自身のメールアドレスあてへ問い合わせがあったことを通知するメール

 
 コード内番号の説明は、以下のとおりです。ポイントはトークン判定による認証機能と、メールアドレスの形式チェックを行ったうえで、mb_send_mail()によるメール送信を行っている点です。

 トークン判定については、ランダムな文字列による判定(CSRF対策)を行ったほうがセキュリティ上望ましいのですが、ここでは省きます。

 
①お問い合わせフォームより入力されたデータの取得
②メールアドレス設定、送信メールの内容編集
③言語と文字コードを設定
④トークン判定:特定フォームからの要求かどうか。ここでは固定文字列としている。
⑤メールアドレスの形式チェックを行う:相手のメールアドレスの形式をチェック。
⑥mb_send_mail()関数によりメールを送信する
⑦メール送信完了後に開くページを設定

 

 
 
 

5. まとめ

 今回の記事では、自サイトに実装したお問い合わせフォームを例にとって、ソースコードを混じえた説明をさせていただきました。ごく基本的なお問い合わせフォームを実装する流れについて、おわかりいただけたと思います。

 お問い合わせフォームは、サイト閲覧者との連絡手段として必要とされる機能と言えます。設置を検討されている方に、すこしでも参考となれば幸いです。

 
 また、自サイトカスタマイズの全体の概要については以下の記事をご覧ください。
古いウェブサイトを現代風デザインにカスタマイズ【HTML部品化とスマホ対応】
2000年代初頭に作成した昔風の静的サイトに対し、現代風の外観、機能となるようにカスタマイズした記録です。
 
 
おわり
 

コメント

タイトルとURLをコピーしました