プログラミング 未分類

メールフォームからの送信機能作成をやってみた
※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段階認証がまだだと出来ません。その場合は、こちらの手順をどうぞ。

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

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

前準備②(XAMPP環境)

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

メール処理用の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設定

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

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

テストしましょう!

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

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

ふじ
どきどきですね・・・。

送信出来ました。メッセージありがとうございます。”が表示されたら成功です。
PHPファイルに設定したメールアカウントのメールボックスをみてみましょう!
ありますか?

あったら、これで自分なりにカスタマイズしながらテスト出来ますね!
ない場合は、エラーログを確認して対応下さい<m(__)m>

C:\xampp\sendmail\error.log

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

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

おしまいです。

最後に

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

  • この記事を書いた人
  • 最新記事
アバター

ふじ

SESエンジニア。 副業活動を一旦休止して、Pythonの勉強しています。

-プログラミング, 未分類

Copyright© FUJI日記 , 2022 All Rights Reserved.