メールフォームからの送信機能作成をやってみた※PHP・GmailのSMTP経由

windowsです。

ポートフォリオサイト作成時に、メールフォームを実装しました。
色々な方法がある中で、PHPでのGmail（SMTP経由）を使用した方法です。
WEB上に情報が散乱していたので、まとめてみました。
お役に立てば、幸いです。

ふじ

簡単かと思ってたら、だいぶ時間とられました。。

前準備①（Gmailアカウントの設定)

自分のG-mailアカウントで、アプリパスワードが必要です。これがないと、下記のエラーが発生します。
20/05/04 13:54:38 : Username and Password not accepted. Learn more at<EOL> https://support.google.com/mail/?p=BadCredentials y13sm7667676pfc.78 - gsmtp<EOL>

アプリパスワード作成は、2段階認証がまだだと出来ません。その場合は、こちらの手順をどうぞ。

PC設定のカルマ

Google（gmail）アカウント - 2段階認証を有効（オン）にする方法 - PC設定のカルマ

https://pc-karuma.net/google-account-turn-on-2-step-verification/

Googleアカウントの2段階認証を有効（オン）にする方法を紹介します。 2段階認証を有効にすると…… パスワードに加え、スマートフォンに送信される1回限りの確認コードをログイン時に入力する必要があります。これによってセキュリティが強化されるので、特に理由が...

2段階認証が出来ていれば、こちらの手順通りで大丈夫です。

ハウツーノート

2段階認証に未対応のアプリからのログイン用にアプリパスワードを生成する

https://www.howtonote.jp/google-account/2step-verify/index6.html

Google アカウントで 2 段階認証を有効にしている場合にはユーザー名とパスワードに加えて確認コードなどの認証を行う必要がありますが、 Outlook など他社のサービスや製品から Google アカウントにログインしようとすると 2 段階認証に対応していないためログイン...

ふじ

アプリパスワードは、メモっておきましょう。

前準備②（XAMPP環境）

メール処理はPHPで行うので、テストするにはXAMPP環境が必要です。
もし、まだ環境構築されていないのならこちらのサイト様が分かりやすいです。

B-side Journal

XAMPPのインストールと使い方　【自作Webページを表示する】｜ B-side Journal

https://bsj-k.com/xampp-install/

XAMPPのインストール以下の公式サイトからXAMPPをダウンロードします。好きなPHPのバージョンを選んでダウンロードしてください。実行するとセットアップが …

メール処理用のPHPファイルを作成

XAMPP環境で作成されたWEBページが表示できたら、PHPファイルを作成です！
25行目には、受信したいメールアドレスを記述します。
作成後に、index.htmlがあるフォルダ階層に置きましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<title>Retro Portfolio - Contact Form</title>
</head>
<body>
<?php
function is_valid_email($vemail) {
	$result = TRUE;
	if(!preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $vemail)) {
	$result = FALSE;
	}
	return $result;
}
if (isset($_REQUEST['email']) && $_REQUEST['email'] != '' && $_REQUEST['name'] != '' && $_REQUEST['message'] != ''
	&& is_valid_email($_REQUEST['email']))
{
	//send email
	$email = $_REQUEST['email'] ;
	$name = $_REQUEST['name'] ;
	$subject = $_REQUEST['subject'] ;
	$message = $_REQUEST['message'] ;
	$recievers_email = "[a]@gmail.com";
	$rslt = mb_send_mail($recievers_email, $subject, $message,"From:" . $email);
	//$message, "From:" . $email);
	echo "<p class='form_success'>送信出来ました。メッセージありがとうございます。";
}
else
{
	//if "email" is not filled out, display the form
	if(!is_valid_email($_REQUEST['email']))
	{
		echo "<p class='form_error'>E-Mailアドレスを入力して下さい。</p>";						   
	}
	else if($_REQUEST['name'] == '')
	{
		echo "<p class='form_error'>お名前を入力下さい。</p>";
	}
	else if($_REQUEST['message'] == '')
	{
		echo "<p class='form_error'>メッセージ内容を入力して下さい。</p>";
	}
}
?>
</body>
</html>

ふじ

目的にあったカスタマイズをして下さい！

html側に、入力フォームを設置

入力フォームを設置したいhtmlファイルにこちらのコードの該当部分を設置しましょう。body以下ですね。
11行目で、さきほどのPHP処理をコールしてます。
これをPHP対応のレンタルサーバーに設置すれば、sendmailがサポートされている場合は動作します。
有名どころは、問題ない様です。
※さくらのレンタルサーバーのみ動作確認しています。
　受信メールが迷惑メールに振り分けられる事があるので、迷惑メール用のフォルダを確認
　した方が良いです。

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="content-type" charset="utf-8">
	<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
</head>

<body>
	<div class="contact_filelds">
		<form action="contactform.php" method="post" id="contact_form">
			<fieldset class="contact_filelds_left">
				<input id="name" type="text" name="name" placeholder="お名前" />
				<input id="email" type="text" name="email" placeholder="E-Mail アドレス" />
				<textarea id="subject" name="subject" placeholder="件名"></textarea>
			</fieldset>
			<fieldset class="contact_filelds_right">
				<textarea id="message" name="message" placeholder="メッセージ"></textarea>
				<input type="submit" value="送信" id="btn">
			</fieldset>
		</form>
	</div>
</body>

</html>

ふじ

CSSも一応貼っておきます！JSの処理はまた今度。。

* {
  margin: 0px;
  padding: 0px;
}

ul,
li {
  list-style: none;
}

fieldset {
  border-width: 0;
}

.contact_filelds {
  width: 950px;
  padding-bottom: 55px;
}
.contact_filelds_left {
  width: 358px;
  float: left;
}
.contact_filelds_left input {
  width: 348px;
  height: 20px;
  padding: 5px 10px;
  color: #585757;
  font-size: 11px;
  line-height: 20px;
  background: #f7eace;
  border: 0px;
  margin-bottom: 10px;
}
.contact_filelds_left textarea {
  width: 348px;
  height: 88px;
  padding: 10px 10px;
  color: #585757;
  font-size: 11px;
  line-height: 20px;
  background: #f7eace;
  border: 0px;
  margin-bottom: 10px;
  resize: none;
}
.contact_filelds_right {
  width: 570px;
  float: right;
}
.contact_filelds_right textarea {
  width: 550px;
  height: 168px;
  padding: 10px 10px;
  color: #585757;
  font-size: 11px;
  line-height: 20px;
  background: #f7eace;
  border: 0px;
  margin-bottom: 10px;
  resize: none;
}
.contact_filelds_right input {
  width: 70px;
  height: 30px;
  color: #484848;
  font-family: 'BazarMedium';
  font-size: 24px;
  text-align: center;
  line-height: 30px;
  border: 0px;
  margin-bottom: 10px;
  cursor: pointer;
}

SENDMAIL設定

sendmailをダウンロードする
ローカル環境でテストする場合、sendmail一式が必要です。
こちらでダウンロードしましょう。
www.glob.com.au

5 users
fake sendmail for windows
https://www.glob.com.au/sendmail/

download sendmail.zip 　←こんなのがありますので、クリック下さい。
ダウンロードしたsendmail.zipを解凍して C:\xampp へコピーします。
C:\xampp\sendmail\sendmail.iniを編集
下記の項目を下記の様に書き換えて、保存して下さい。
   smtp_server=smtp.gmail.com
   smtp_port=587
   auth_username=[前準備のアカウント]@gmail.com
   auth_password=[アプリパスワード]
   force_sender=[前準備のアカウント]@gmail.com
C:\xampp\phpphp.iniを編集
下記の項目を下記の様に書き換えて、保存して下さい。
SMTP = smtp.gmail.com
smtp_port = 587
sendmail_path =C:\xampp\sendmail\sendmail.exe
※　;　を外す。
XAMPPでApacheを再起動する

テストしましょう！

これで、テスト環境は完成です。
ブラウザで目的のwebページを開いてみましょう。
※URLの最初が、”http://localhost”になっている事に注意しましょう！

すべての項目を入力後に、【送信】ボタンをクリックしましょう。

ふじ

どきどきですね・・・。

”送信出来ました。メッセージありがとうございます。”が表示されたら成功です。
PHPファイルに設定したメールアカウントのメールボックスをみてみましょう！
ありますか？
あったら、これで自分なりにカスタマイズしながらテスト出来ますね！
ない場合は、エラーログを確認して対応下さい<m(__)m>
C:\xampp\sendmail\error.log

サーバーにアップしましょう！

自分なりにカスタマイズしたら、サーバーにアップです！
動作確認までちゃんとやりましょう。
私は、迷惑メールフォルダに振り分けられた事を知らずに1時間ほど対応していました。。

おしまいです。

最後に

需要があるかは、微妙なところですが。。
はじめて、機能の実装手順を書いてみました。
アクセス解析なんかで、閲覧される方がいる事が分かれば、もっと汎用性のある機能も追加します。（jsのチェックとか）