概要
コーポレートサイトにお問い合わせ機能を追加します。
お問い合わせ機能は、ユーザーがコーポレートサイトのお問い合わせフォームから内容を入力して送信ボタンを押すと、ユーザーとコーポレートサイト管理者にその内容がメールで送られてくる機能を想定しています。
今回はメール送信を行う際、開発環境で実在するメールアドレスを複数用意するのは大変な場合があるのでメール送信開発者向けツールのmailtrapを利用します。
フォルダの階層
完成イメージ
メールフォーム
確認画面
送信画面
事前準備
mailtrap設定
mailtrapとはステージングと開発のための安全な電子メールテストツールのことです。
利用方法はとても簡単で、ユーザー登録するだけです。
mailtrap公式サイトにアクセスし、ユーザー登録しておきます。
登録したできたらmailtrapにログインします。
My inboxesにDemo inboxが作成されています。
Demo Inboxをクリックするとメール送信に必要なユーザー情報が表示されるので確認しておきます。
phpmailerのダウンロード
phpmailerとはPHP用のメール送信ライブラリです。
おそらくPHPからEメールを送信するためライブラリで一番使われているものです。
phpmailer公式サイトにアクセスし、phpmailerファイルを一式ダウンロードします。
[PHPMailer-master]というzipファイルがダウロードできたと思います。
zipファイルを展開し、フォルダ名をわかりやすく[PHPMailer]に変更します。
変更したら、corporate-siteフォルダの直下に置きます。
ファイルの階層は下のキャプチャのようになります。
全体の手順
作成は下記の流れで行います。
- 申し込みフォーム等画面作成
- PHPで値の受け渡し
- メールの送信設定
- メールの確認
申込みフォーム等画面の作成
申し込みフォームの作成
コーポレートサイトに申し込みフォームを追加します。
会社概要の下に追加していきます。
<!-- end 会社概要 -->
<!-- お問合せ -->
<div class="wrapper">
<div class="container">
<div class="wrapper-title">
<h3>CONTACT</h3>
<p>お問い合わせ</p>
</div>
<form>
<div class="form-group">
<p>お名前 *</p>
<input type="text">
</div>
<div class="form-group">
<p>Email *</p>
<input type="email">
</div>
<div class="form-group">
<p>お問合せ内容 *</p>
<textarea></textarea>
</div>
<button type="submit" class="btn btn-submit">内容を確認する</button>
</form>
</div>
</div>
<!-- end お問合せ -->
</main>今まで会社概要が一番下だったので、last-wrapperクラスをつけていましたが、
お問合せが追加されたので、付け替えます。
index.html
<!-- 会社概要 -->
+ <div class="wrapper" id="about">
- <div class="wrapper last-wrapper" id="about">
〜〜省略〜〜
</div>
<!-- end 会社概要 -->
<!-- お問合せ -->
+ <div class="wrapper last-wrapper">
- <div class="wrapper">
〜〜省略〜〜CSSで見た目を整えていきます。
また、CSSの記述が増えてきたり複数のクラスに同じスタイルを適用していたりすると修正や、後で見返す時など面倒なため、まとめられる所は1つのスタイルで適用するとスッキリとしたコードになります。
styles.css
/* 共通CSS */
〜〜省略〜〜
a:hover,
+.btn:hover {
opacity: 0.6;
cursor: pointer;
}
+.btn {
+ padding: 10px 20px;
+ font-size: 15px;
+ border-radius: 5px;
+ border: none;
+ margin-top: 20px;
+}
h2 {
font-size: 50px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 20px;
}
.wrapper {
width: 70%;
padding: 80px 0 30px;
margin: 0 auto;
}
.wrapper-title {
text-align: center;
margin-bottom: 30px;
}
.wrapper-title p {
color: #4c586f;
}
.last-wrapper {
margin-bottom: 80px;
}
+.wrapper-body{
+ text-align: center;
+}
+.news-list,
+form {
+ width: 80%;
+ margin: 0 auto;
+}
+.btn-submit {
+ background-color: #4c586f;
+ color: #fff;
+}
〜〜省略〜〜
/* news */
-.news-list {
- width: 80%;
- margin: 0 auto;
-}
.news-list li {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid;
}
.news-list a {
color: #3e3e3b;
}
〜〜省略〜〜
/* about */
〜〜省略〜〜
+/* contact */
+form {
+ text-align: center;
+}
+.form-group {
+ margin-bottom: 20px;
+ text-align: left;
+}
+input,
+textarea {
+ width: 100%;
+ border: 1px solid #ebeced;
+}
+ input {
+ height: 25px;
+ }
+ textarea {
+ height: 200px;
+ }
+.error {
+ font-size: 12px;
+ color: #d84950;
+}
/* footer */
footer {
height: 80px;
background-color: #3e3e3b;
text-align: right;
bottom: 0;
position: absolute;
width: 100%;
color: #fff;
line-height: 80px;
}あと、お問合せにもページ内リンクをつけたいのでIDをつけ、メニューリストに追加します。
index.html
<header>
<div class="container">
<div class="header-logo">
<h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
</div>
<!-- ハンバーガーメニューボタン -->
<div class="toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="sp-menu menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
+ <li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
<nav class="pc-menu menu-left menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
+ <li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
</div>
</header>
〜〜省略〜〜
<!-- contact -->
+ <div class="wrapper last-wrapper" id="contact">
- <div class="wrapper last-wrapper">
<div class="container">
〜〜省略〜〜
記事ページのヘッダーにも同様に追加します。
page.html
<header>
<div class="container">
<div class="header-logo">
<h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
</div>
<!-- ハンバーガーメニューボタン -->
<div class="toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="sp-menu menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
+ <li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
<nav class="pc-menu menu-left menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
+ <li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
</div>
</header> 確認画面の作成
確認画面を追加します。
confirm.phpというファイルを作成します。
index.htmlを一旦コピー＆ペーストし、共通部分だけ残し他は消しておきます。
confirm.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>確認画面｜SQUARE, inc.</title>
- <title>SQUARE, inc.</title>
<link rel="icon" href="favicon.ico">
<!-- css -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<header>
<div class="container">
<div class="header-logo">
<h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
</div>
<!-- ハンバーガーメニューボタン -->
<div class="toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="sp-menu menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
<li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
<nav class="pc-menu menu-left menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
<li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
</div>
</header>
<main>
- ここの部分を消す
</main>
<footer>
<div class="container">
<p>Copyright @ 2018 SQUARE, inc.</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
// ハンバーガーメニューの動作
$('.toggle').click(function(){
$("header").toggleClass('open');
$(".sp-menu").slideToggle(500);
});
});
</script>
</body>
</html>main部分にお問合せ内容確認部分を書いていきます。
confirm.php
<main>
<!-- contact conf -->
<div class="wrapper last-wrapper">
<div class="container">
<div class="wrapper-title">
<h3>CONFIRM</h3>
<p>お問い合わせ内容確認</p>
</div>
<form class="conf-form">
<div class="form-group">
<p>お名前 *</p>
<p>山田 太郎</p>
</div>
<div class="form-group">
<p>Email *</p>
<p>taro@text.com</p>
</div>
<div class="form-group">
<p>お問合せ内容 *</p>
<p>ここにお問合せ内容が表示されます。サービスについて詳しく教えてください。</p>
</div>
<p>この内容で送信してよろしいですか？</p>
<button type="submit" class="btn btn-submit">送信する</button>
</form>
</div>
</div>
<!-- end contact conf -->
</main>CSSで見た目を整えます。
styles.css
/* page.html */
〜〜省略〜〜
+/* confirm.php */
+.conf-form {
+ background-color: #ebeced;
+ padding: 30px;
+}
responsive.cssも追記します。
responsive.css
/* スマホ用 */
@media screen and (max-width: 660px) {
〜〜省略〜〜
/* about */
.about-table th, td {
width: 100%;
display: block;
}
+ /* confirm.php */
+ form {
+ width: auto;
+ }
+
}完了画面の作成
send.phpというファイルを作成します。
confirm.phpのコードをコピー＆ペーストし、main部分を変更します。
titleも「お問い合わせ内容送信」に変更します。
send.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>お問合せ内容送信｜SQUARE, inc.</title>
<link rel="icon" href="favicon.ico">
<!-- css -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<header>
<div class="container">
<div class="header-logo">
<h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
</div>
</div>
<!-- ハンバーガーメニューボタン -->
<div class="toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="sp-menu menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
<li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
<nav class="pc-menu menu-left menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
<li><a href="index.html#contact">お問合せ</a></li>
</ul>
</nav>
</div>
</header>
<main>
+ <!-- contact send -->
+ <div class="wrapper last-wrapper">
+ <div class="container">
+ <div class="wrapper-title">
+ <h3>SEND</h3>
+ <p>お問い合わせ送信</p>
+ </div>
+ <div class="wrapper-body">
+ <div class="thanks">
+ <h4>お問合せありがとうございました。</h4>
+ </div>
+ <button type="button" class="btn btn-gray" onclick="location.href='./index.html'">トップページに戻る</button>
+ </div>
+ </div>
+ </div>
+ <!-- end contact send -->
</main>
<footer>
<div class="container">
<p>Copyright @ 2018 SQUARE, inc.</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
// ハンバーガーメニューの動作
$('.toggle').click(function(){
$("header").toggleClass('open');
$(".sp-menu").slideToggle(500);
});
});
</script>
</body>
</html>CSSで見た目を整えます。
styles.css
/* 共通CSS */
〜〜省略〜〜
.btn-submit {
background-color: #4c586f;
color: #fff;
}
+.btn-gray {
+ border: 1px solid #3e3e3b;
+ color: #3e3e3b;
+}
〜〜省略〜〜
/* confirm.php */
.conf-form {
background-color: #ebeced;
padding: 30px;
}
+/* send.php */
+.thanks{
+ background-color: #ebeced;
+ padding: 80px 0;
+}
+ .thanks h4 {
+ margin-bottom: 10px;
+ }PHPで値の受け渡し
フォームで入力した値を確認画面（confirm.php)に渡し、確認画面でバリデーション（エラー）チェックを行います。
そして、確認画面から送信画面（send.php）に値を受け渡します。
フォームから確認画面にPOSTする
フォームの値を送信する場合、HTTPメソッドのGETかPOSTを使います。
GETとPOST
GETはURLにリクエスト情報をくっつけて送信するので、URLにリクエスト内容が表示されます。
例えば、フォームから氏名と年齢をGETでsample.phpに送った場合、URLを確認するとキャプチャのように入力した値が表示されます。
一方、POSTはURLのbodyにリクエスト情報を含めて送信されるので、URLで確認することはできません。
その他にも違いはありますが、大きい違いとしてはURLに表示されるかどうかということです。
それぞれ用途が異なり、一般的には
GETは値を取得するときに使う。
POSTは登録したりするときに使う。
という感じで分けられています。
また、GET/POSTの他にもDELETEやPUTもあり、それぞれの使用用途に合わせて使っていきます。
今回は、POSTを使って実装します。
formタグの設定
formタグにmethodとactionを指定します。
methodはGET/POSTを指定するものなのでPOSTを指定します。
actionは送り先を指定するものなので、今回はconfirm.phpを指定します。
index.html
- <form>
+ <form method="POST" action="confirm.php">name属性の追加
値はname属性のデータ名と値をペアにしてformで送信されるので、それぞれのinputタグやtextareaタグにname属性を追加します。
index.html
<form method="POST" action="confirm.php">
<div class="form-group">
<p>お名前 *</p>
- <input type="text">
+ <input type="text" name="name">
</div>
<div class="form-group">
<p>Email *</p>
- <input type="email">
+ <input type="email" name="email">
</div>
<div class="form-group">
<p>お問合せ内容 *</p>
- <textarea></textarea>
+ <textarea name="text"></textarea>
</div>
<button type="submit" class="btn btn-submit">内容を確認する</button>
</form>確認画面でPOSTの値を受け取り
confirm.phpを編集してフォームから送られてきたデータを受け取ります。
送られてきたデータは$_POST['name属性のデータ名']で取得できます。
confirm.phpの一番上にPHPでデータを取得するコードを追加していきます。
送られてきたデータを、氏名は$name、メールアドレスは$email、お問い合わせ内容は$textという変数名で受け取ります。
confirm.php
<?php
// 値の受け取り
$name = $_POST['name'];
$email = $_POST['email'];
$text = $_POST['text'];
?>
<!DOCTYPE html>
<html>
///以下省略上記で値は受け取れますが、HTMLには特殊な意味を持つ文字（&で始まり;で終わる文字）があり、その文字が送られてきたデータの中に入っている場合、特殊文字だと判断してしまい入力した値が正しく表示されなくなってしまう場合があります。
そういった悪意のあるコードの埋め込みを防ぐためにhtmlspecialcharsを使います。
htmlspecialcharsは第３引数まで設定が必要です。
htmlspecialchars(エスケープする文字列, エスケープの種類, 文字コード);を設定して利用します。
エスケープの種類は、シングルクォートとダブルクォートの両方を置き換えるENT_QUOTESを指定します。
confirm.php
<?php
// 値の受け取り（エスケープ処理付き）
- $name = $_POST['name'];
- $email = $_POST['email'];
- $text = $_POST['text'];
+ $name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8');
+ $email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8');
+ $text = htmlspecialchars($_POST['text'], ENT_QUOTES, 'utf-8');
?>特殊文字のエスケープまで完了しました。
次に、データの値が何も送られてこなかった場合の対処をします。
例えば、$_POST['name']がない場合、$nameには値が何も入りません。
その状態で$nameを表示しようとすると$nameが見つからずエラーになります。
データが送られてこない場合、空をセットするようにif文で記述します。
if文で$nameを記述すると下記のようになりますが、長くなるのでconfirm.phpは省略形で記述しています。
if (isset($_POST['name'])) {
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8');
}else{
$name = '';
}confirm.php
<?php
// 値の受け取り（エスケープ・空っぽ処理付き）
- $name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8');
- $email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8');
- $text = htmlspecialchars($_POST['text'], ENT_QUOTES, 'utf-8');
+ $name = isset($_POST['name'])? htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8'):'';
+ $email = isset($_POST['email'])? htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8'):'';
+ $text = isset($_POST['text'])? htmlspecialchars($_POST['text'], ENT_QUOTES, 'utf-8'):'';
?>バリデーションチェック
値が取得できたので、簡単なバリデーションチェック（エラーチェック）をサーバーサイドで実装してみます。
今回は、値がなかったら「〇〇は必須です」と表示させるようにします。
エラーの表示
HTML内でPHPを使って、値がなかったらエラー文言を表示します。
confirm.php
<form class="conf-form">
<div class="form-group">
<p>お名前 *</p>
- <p>山田 太郎</p>
+ <p><?php echo $name; ?></p>
+ <?php if($name==''):?>
+ <p class="error">名前が入力されていません</p>
+ <?php endif; ?>
</div>
<div class="form-group">
<p>Email *</p>
- <p>taro@text.com</p>
+ <p><?php echo $email; ?></p>
+ <?php if($email==''):?>
+ <p class="error">メールアドレスが入力されていません</p>
+ <?php endif; ?>
</div>
<div class="form-group">
<p>お問合せ内容 *</p>
- <p>ここにお問合せ内容が表示されます。サービスについて詳しく教えてください。</p>
+ <p><?php echo $text; ?></p>
+ <?php if($text==''):?>
+ <p class="error">お問い合わせ内容が入力されていません</p>
+ <?php endif; ?>
</div>
<p>この内容で送信してよろしいですか？</p>
<button type="submit" class="btn btn-submit">送信する</button>
</form>戻るボタンの実装
エラーが出てるときは、送信ボタンではなく戻るボタンを設置します。
confirm.php
+ <?php if($name!=''&&$email!=''&&$text!=''): ?>
<p>この内容で送信してよろしいですか？</p>
<button type="submit" class="btn btn-submit">送信する</button>
+ <?php else: ?>
+ <button class="btn btn-return">戻る</button>
+ <?php endif;?>ここで一度想定どおりの動作が行われているか確認してみましょう。
まず、申込みフォームから適当なデータを入力して、内容を確認するボタンをクリックしてみます。
確認画面に内容が反映されて、送信するボタンが表示されていればOKです。
次に、申込みフォームに戻って何もデータを入力しないで、内容を確認するボタンをクリックしてみましょう。
エラーメッセージと戻るボタンが表示されればOKです。
しかし、この戻るボタンはただのボタンなので、クリックしてもお問い合わせフォームには戻ってくれません。
javascriptで戻るボタンを制御してみましょう。
戻るボタンに独自のbtn-returnクラスを追加しているので、btn-returnボタンをクリックしたら、1つ前のページに行くという命令を記述します。
confirm.php
<script>
$(function(){
// ハンバーガーメニューの動作
$('.toggle').click(function(){
$("header").toggleClass('open');
$(".sp-menu").slideToggle(500);
});
+ $(".btn-return").click(function(){
+ window.history.back(-1);
+ return false;
+ });
});
</script>動作確認をしてみてください。
戻るボタンをクリックして、お問い合わせフォーム画面に戻ればOKです。
確認画面からメール送信画面に値を受け渡す
formタグの設定
formタグの設定をします。
メール送信機能と送信完了画面をsend.phpという名前で作成したので、formタグのactionは./send.phpを設定し、actionはPOSTを設定します。
confirm.php
+ <form method="POST" action="./send.php" class="conf-form">
- <form class="conf-form">inputタグの設定
これで、お問い合わせフォームから確認画面に値を送ることができるようになったので、確認画面からメール送信画面に値を引き継いで送るようにします。
<input type='text'>や<textarea>を使って、フォームの値を送りましたが、今回は確認画面なのでフォーム（入力画面）はいりません。
でも、値を送りたいです。
そういう場合は、inputタグのtype=hiddenを使ってフォームは表示させずに値を送るようにします。
valueに受け取った値を設定します。
記述箇所は、hiddenは表示されないのでformタグ内ならどこに記述しても同じですが、今回はわかりやすいように各項目のpタグの下に記述してます。
confirm.php
<form method="POST" action="./send.php" class="conf-form">
<div class="form-group">
<p>お名前 *</p>
<p><?php echo $name; ?></p>
+ <input type="hidden" name="name" value="<?php echo $name; ?>">
<?php if($name==''):?>
<p class="error">名前が入力されていません</p>
<?php endif; ?>
</div>
<div class="form-group">
<p>Email *</p>
<p><?php echo $email; ?></p>
+ <input type="hidden" name="email" value="<?php echo $email; ?>">
<?php if($email==''):?>
<p class="error">メールアドレスが入力されていません</p>
<?php endif; ?>
</div>
<div class="form-group">
<p>お問合せ内容 *</p>
<p><?php echo $text; ?></p>
+ <input type="hidden" name="text" value="<?php echo $text; ?>">
<?php if($text==''):?>
<p class="error">お問い合わせ内容が入力されていません</p>
<?php endif; ?>
</div>
<?php if($name!=''&&$email!=''&&$text!=''): ?>
<p>この内容で送信してよろしいですか？</p>
<button type="submit" class="btn btn-submit">送信する</button>
<?php else: ?>
<button class="btn btn-return">戻る</button>
<?php endif;?>
</form>send.phpの受け取り設定
confirm.phpの値の受け取りを設定したのと同様です。
send.phpの一番上でPOSTの値を受け取ります。
send.php
<?php
// 値の受け取り
$name = isset($_POST['name'])? htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8'):'';
$email = isset($_POST['email'])? htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8'):'';
$text = isset($_POST['text'])? htmlspecialchars($_POST['text'], ENT_QUOTES, 'utf-8'):'';
?>メール送信設定
PHPMailerの設定
値は受け取りができたので、いよいよメールの送信設定を行っていきます。
PHPMailerのリファレンスに従って設定していきます。
まず、PHPMailerソースを読み込み、使える状態にします。
send.phpの一番上に追記します。
send.php
<?php
+ //PHPMailerソースを読み込む
+ require 'PHPMailer/src/PHPMailer.php';
+ require 'PHPMailer/src/SMTP.php';
+ require 'PHPMailer/src/POP3.php';
+ require 'PHPMailer/src/Exception.php';
+ require 'PHPMailer/src/OAuth.php';
+ require 'PHPMailer/language/phpmailer.lang-ja.php';
+ //使う
+ use PHPMailer\PHPMailer\PHPMailer;
+ use PHPMailer\PHPMailer\Exception;
// 値の受け取り
$name = isset($_POST['name'])? htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8'):'';
$email = isset($_POST['email'])? htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8'):'';
$text = isset($_POST['text'])? htmlspecialchars($_POST['text'], ENT_QUOTES, 'utf-8'):'';内容を設定（お問い合わせ者用）
今回は、下記のようなメールが問い合わせした人に送られるようにします。
この内容が送られるように、メールの内容を設定します。
send.php
// 値の受け取り
$name = isset($_POST['name'])? htmlspecialchars($_POST['name'], ENT_QUOTES, 'utf-8'):'';
$email = isset($_POST['email'])? htmlspecialchars($_POST['email'], ENT_QUOTES, 'utf-8'):'';
$text = isset($_POST['text'])? htmlspecialchars($_POST['text'], ENT_QUOTES, 'utf-8'):'';
+ //メール内容カスタマイズ
+ $mail_body ='<h1>'.$name.'さま</h1></p><p>お問い合わせありがとうございます。</p><p>後日担当者よりご連絡いたします。</p>';
+ $mail_body.='<br>';
+ $mail_body.="-----------------------------------";
+ $mail_body.='<p>お問い合わせ内容：'.$text.'</p>';
+ $mail_body.="-----------------------------------";
+ $mail_body.='<br>';
+ $mail_body.='<p>このメールに心当たりがない場合は破棄してください。</p>';送信設定
次に、PHPMailerオブジェクトを作成します。
SMTPDebugを2にすると、開発中のエラーなど表示されて便利です。
実装が完了したら0にしますが、開発中は2としておきます。
mailtrapでテスト送信したいのでメールホストはsmtp.mailtrap.ioを指定し、UsernameとPasswordは最初のmailtrapで取得したuser_name、passwordを記述します。
send.php
//メール内容カスタマイズ
$mail_body = '<h1>'.$name.'さま</h1></p><p>お問い合わせありがとうございます。</p><p>後日担当者よりご連絡いたします。</p>';
$mail_body.='<br>';
$mail_body.="-----------------------";
$mail_body.='<p>お問い合わせ内容：'.$text.'</p>';
$mail_body.="-----------------------";
$mail_body.='<br>';
$mail_body.='<p>このメールに心当たりがない場合は破棄してください。</p>';
+ $mail = new PHPMailer(true);
+ $mail->SMTPDebug = 2; //デバックモード 0にすると表示されない
+ $mail->isSMTP();
+ $mail->Host='smtp.mailtrap.io';
+ $mail->SMTPAuth= true;
+ $mail->Username = 'mailtrapで取得したuser_name';
+ $mail->Password = 'mailtrapで取得したpassword';
+ $mail->SMTPSecure = 'tls';
+ $mail->Port = 2525;
+ $mail->Charset = 'utf-8';
+ $mail->isHTML(true);
+ $mail->CharSet = 'UTF-8'; //文字化け防止
+ $mail->setFrom('送信元として表示するメールアドレス','送信元として表示する名前');
+ $mail->addAddress($email,$name);
+ $mail->Subject = mb_encode_mimeheader('お問い合わせありがとうございます','ISO-2022-JP');
+ $mail->Body = $mail_body;メール送信
try catchで囲み送信できなかった場合に備えます。
そして、$mail->send()でメールを送信します。
if文で$resultにHTMLで表示するメッセージを設定して、表示するようにしてみます。
send.php
$mail = new PHPMailer(true);
$mail->SMTPDebug = 0; //デバックモード 0にすると表示されない
$mail->isSMTP();
$mail->Host='smtp.mailtrap.io';
$mail->SMTPAuth= true;
$mail->Username = 'mailtrapで取得したuser_name';
$mail->Password = 'mailtrapで取得したpassword';
$mail->SMTPSecure = 'tls';
$mail->Port = 2525;
$mail->Charset = 'utf-8';
$mail->isHTML(true);
$mail->CharSet = 'UTF-8'; //文字化け防止
$mail->setFrom('送信元として表示するメールアドレス','送信元として表示する名前');
$mail->addAddress($email,$name);
$mail->Subject = mb_encode_mimeheader('問い合わせありがとうございました','ISO-2022-JP');
$mail->Body = $mail_body;
+ try{
+
+ if($mail->send()){
+ $result = 'お問い合わせありがとうございました。';
+ }else{
+ $result = '送信できませんでした。';
+ };
+
+ }catch(Exception $e){
+ $result = '送信できませんでした。';
+ }HTMLの表示にresultのメッセージが表示されるように変更します。
send.php
<main>
<!-- contact send -->
<div class="wrapper last-wrapper">
<div class="container">
<div class="wrapper-title">
<h3>SEND</h3>
<p>お問い合わせ送信</p>
</div>
<div class="wrapper-body">
<div class="thanks">
- <h4>お問い合わせありがとうございました。</h4>
+ <h4><?php echo $result; ?></h4>
</div>
<button type="button" class="btn btn-gray" onclick="location.href='./index.html'">トップページに戻る</button>
</div>
</div>
</div>
<!-- end contact send -->
</main>メール確認
この状態でお問い合わせフォームから入力して確認してみます。
「お問い合わせありがとうございました」が表示されたら、mailtrapのDemo Inboxの中を確認してみてください。
メールが正しく届いているか確認して、届いていればOKです。
内容を設定（管理者用）
管理者には下記のようなメールが送られるようにします。
$mail_body2という名前で設定しました。
//メール内容カスタマイズ
$mail_body ='<h1>'.$name.'さま</h1></p><p>お問い合わせありがとうございます。</p><p>後日担当者よりご連絡いたします。</p>';
$mail_body.='<br>';
$mail_body.="-----------------------------------";
$mail_body.='<p>お問い合わせ内容：'.$text.'</p>';
$mail_body.="-----------------------------------";
$mail_body.='<br>';
$mail_body.='<p>このメールに心当たりがない場合は破棄してください。</p>';
+ //メール内容（管理者用）
+ $mail_body2 ='<h1>問い合わせがありました。</h1></p>';
+ $mail_body2.='<br>';
+ $mail_body2.="-----------------------------------";
+ $mail_body2.='<p>氏名：'.$name.'</p>';
+ $mail_body2.='<p>連絡先：'.$email.'</p>';
+ $mail_body2.='<p>お問い合わせ内容：'.$text.'</p>';
+ $mail_body2.="-----------------------------------";
+ $mail_body2.='<br>';
+ $mail_body2.='<p>このメールに心当たりがない場合は破棄してください。</p>';送信設定（管理者用）
管理者用に$mail2というオブジェクトを作成しました。
send.php
//お問い合わせ者用
$mail = new PHPMailer(true);
$mail->SMTPDebug = 2; //デバックモード 0にすると表示されない
$mail->isSMTP();
$mail->Host='smtp.mailtrap.io';
$mail->SMTPAuth= true;
$mail->Username = 'mailtrapで取得したuser_name';
$mail->Password = 'mailtrapで取得したpassword';
$mail->SMTPSecure = 'tls';
$mail->Port = 2525;
$mail->Charset = 'utf-8';
$mail->isHTML(true);
$mail->CharSet = 'UTF-8'; //文字化け防止
$mail->setFrom('送信元として表示するメールアドレス','送信元として表示する名前');
$mail->addAddress($email,$name);
$mail->Subject = mb_encode_mimeheader('問い合わせありがとうございました','ISO-2022-JP');
$mail->Body = $mail_body;
+ //管理者用
+ $mail2 = new PHPMailer(true);
+ $mail2->SMTPDebug = 2; //デバックモード 0にすると表示されない
+ $mail2->isSMTP();
+ $mail2->Host='smtp.mailtrap.io';
+ $mail2->SMTPAuth= true;
+ $mail2->Username = 'mailtrapで取得したuser_name';
+ $mail2->Password = 'mailtrapで取得したpassword';
+ $mail2->SMTPSecure = 'tls';
+ $mail2->Port = 2525;
+ $mail2->Charset = 'utf-8';
+ $mail2->isHTML(true);
+ $mail2->CharSet = 'UTF-8'; //文字化け防止
+ $mail2->setFrom('送信元として表示するメールアドレス','送信元として表示する名前');
+ $mail2->addAddress('申し込みを受け付けるメールアドレス','表示名');
+ $mail2->Subject = mb_encode_mimeheader('問い合わせがありました','ISO-2022-JP');
+ $mail2->Body = $mail_body2;メール送信（管理者用）
お問い合わせ者に送信するときと同様です。
ただ、何らかのエラーが起きて、お問い合わせ者にはメールが届いているのに、管理者にメールが届かないという状態があっては良くないので、管理者にメールが送信できたらお問い合わせ者にもメールを送信するように実装します。
send.php
try{
+ if($mail2->send()){
if($mail->send()){
$result = 'お問い合わせありがとうございました。';
}else{
$result = '送信できませんでした。';
};
+ }else{
+ $result = '送信できませんでした。';
+ }
}catch(Exception $e){
$result = '送信できませんでした。';
}メール確認
お問い合わせフォームから入力して、mailtrapに管理者用とお問い合わせ者用のメールが正しく届いていれば完成です。