プラグインなしのお問い合わせフォームを設置

まずは、GoogleのreCAPTCHA v2の設定を行います。

GoogleのreCAPTCHA v2の設定

こちらのGoogleのreCAPTCHAのサイトに移動してください。右上のAdmin consoleをクリックし、

必要な情報を入力していきます。今回はreCAPTCHA v2を使用します。「私はロボットではありません」チェックボックスを選択して下さい。ドメインは設置をするサイトのドメインをしてして下さい。

recaptchaのサイトキーとシークレットキーが表示されるのでメモっておいて下さい。

実行ファイルの作成

メールの送信とバリデーションをするphpファイルを別で作成(sendmail.php)し、ajaxで実行します。

sendmail.phpはテーマディレクトリ直下に設置して下さい。

sendmail.php

<?php

$url = 'https://www.google.com/recaptcha/api/siteverify';
$post_data = array(
  'secret' => 'recaptchaのシークレットキー',
  'response' => $_REQUEST['g-recaptcha-response'],
  'remoteip' => $_SERVER['REMOTE_ADDR'],
);
$options = array(
  'http' => array(
    'method' => 'POST',
    'header' => 'Content-type: application/x-www-form-urlencoded',
    'content' => http_build_query($post_data),
  )
);
$context = stream_context_create($options);
$res = json_decode(file_get_contents($url, false, $context));

if($res->success == 1) {

	// 認証成功の処理
	header('Content-type: application/json');
	// PHP5.1.0以上はタイムゾーンの定義が必須
	date_default_timezone_set('Asia/Tokyo');

	// --------------------------
	// 個別設定項目（３つ）
	// 送信先メールアドレス
	$to = '送信先メールアドレス';
	// メールタイトル
	$subject = 'お問い合わせフォームより';
	// ドメイン（リファラチェックと送信元メールアドレスに利用）
	$domain = 'サイトのドメイン';
	// --------------------------

	//変数初期化
	$errflg =0;    // エラー判定フラグ
	$dispmsg ='';  // 画面出力内容

	// 入力項目
	$nameval = '';   // 名前
	$mailval = '';   // メールアドレス
	$post_subject = '';    // 件名
	$textval = '';   // 内容
	$referrer = '';  // 遷移元画面

	if(isset($_POST['nameval'])){ $nameval = $_POST['nameval']; }
	if(isset($_POST['mailval'])){ $mailval = $_POST['mailval']; }
	if(isset($_POST['subject'])){ $post_subject = $_POST['subject']; }
	if(isset($_POST['textval'])){ $textval = $_POST['textval']; }
	if(isset($_POST['referrer'])){ $referrer = $_POST['referrer']; }

	if(strpos($_SERVER['HTTP_REFERER'], $domain) === false){
		// リファラチェック
		$dispmsg = '<p id="errmsg">【リファラチェックエラー】お問い合わせフォームから入力されなかったため、メール送信できませんでした。</p>';
		$errflg = 1;
	}else if($nameval == '' || $mailval == '' || $textval == ''){
		//必須チェック
		$dispmsg = '<p id="errmsg">【エラー】名前・メールアドレス・内容は必須項目です。</p>';
		$errflg = 1;
	}else if(!preg_match("/^[\.!#%&\-_0-9a-zA-Z\?\/\+]+\@[!#%&\-_0-9a-z]+(\.[!#%&\-_0-9a-z]+)+$/", $mailval) || count( explode('@',$mailval) ) !=2){
		//メールアドレスチェック
		$dispmsg .= '<p id="errmsg">【エラー】メールアドレスの形式が正しくありません。</p>';
		$errflg = 1;
	}else{
		// メールデータ作成
		$subject = "=?iso-2022-jp?B?".base64_encode(mb_convert_encoding($subject,'JIS','UTF-8'))."?=";
		$message= '名前：'.$nameval."\n";
		$message.='メール：'.$mailval."\n";
		$message.='件名：'.$post_subject."\n";
		$message.="\n――――――――――――――――――――――――――――――\n\n";
		$message.=$textval;
		$message.="\n\n――――――――――――――――――――――――――――――\n";
		$message.='送信日時：'.date( "Y/m/d (D) H:i:s", time() )."\n";
		$message.='送信元IPアドレス：'.@$_SERVER["REMOTE_ADDR"]."\n";
		$message.='送信元ホスト名：'.getHostByAddr(getenv('REMOTE_ADDR'))."\n";
		$message.='リファラURL：'.$referrer."\n";
		$message.='お問い合わせページ：'.@$_SERVER['HTTP_REFERER']."\n";
		$message= mb_convert_encoding($message,'JIS','UTF-8');
		$fromName = mb_encode_mimeheader(mb_convert_encoding($nameval,'JIS','UTF-8'));
		$header ='From: '.$fromName.'<wordpress@'.$domain.'>'."\n";
		$header.='Reply-To: '.$mailval."\n";
		$header.='Content-Type:text/plain;charset=iso-2022-jp\nX-Mailer: PHP/'.phpversion();
		// メール送信
		$retmail = mail($to,$subject,$message,$header);

		if( $retmail ){
			$dispmsg ='<p id="posted_message">お問い合わせありがとうございます。確認次第返答させていただきます。</p>';
		}else{
			$dispmsg .= '<p id="errmsg">【エラー】メール送信に失敗しました。</p>';
			$errflg = 1;
		}
	}
	$result = array('errflg'=>$errflg, 'dispmsg'=>$dispmsg, 'recaptcha' => true);
	echo json_encode( $result );

}else{
	// 認証失敗の処理
	$result = array('errflg'=>'', 'dispmsg'=>'', 'recaptcha' => false);
	echo json_encode( $result );
}


// HTMLエスケープ処理
function hsc_utf8($str) {
	return htmlspecialchars($str, ENT_QUOTES,'UTF-8');
}

?>

送信先とドメインを設定してください。

reCAPTCHAで自動にg-recaptcha-responseというパラメータが付与されます。これは、reCAPTCHAが実装されており、さらにユーザーがreCAPTCHAの認証を経た場合は、このパラメータが追加されます。

認証を通っていない（チェックしていない）場合は、空になります。

そして、stream_context_createでWebAPIを叩き、レスポンスで条件分岐をしています。

表示するphpファイル

<div class="contact-wrap">
	<div class="page-title">
		<h1>お問い合わせページ</h1>
	</div>
	<div id="mail-form-wrap">
		<form id="mail-form">
			<div class="mail-form-items-wrap">
				<div class="mail-form-items">
					<label for="nameval">名前<span class="require">*</span></label>
					<input type="text" name="nameval" id="nameval" placeholder="お名前を入力して下さい。" required />
				</div>
				<div class="mail-form-items">
					<label for="mailval">メールアドレス<span class="require">*</span></label>
					<input type="email" name="mailval" id="mailval" placeholder="メールアドレスを入力して下さい。"  required />
				</div>
				<div class="mail-form-items">
					<label for="post_subject">件名</label> <input
					type="text" name="post_subject" id="subject" placeholder="件名を入力して下さい。" />
				</div>
				<div class="mail-form-items">
					<label for="textval">内容<span class="require">*</span></label>
					<textarea name="textval" id="textval" rows="10" placeholder="お問い合わせ内容を入力して下さい。" required></textarea>
				</div>
			</div>
			<div class="contact-form-wrap">
				<div class="g-recaptcha" data-callback="clearcall" data-sitekey="{recaptchaのサイトキー}"></div>
			  <p class="contact-submit">
						<input type="submit" value="送信" id="submit">
						<input id="referrer" type="hidden" name="referrer" />
			  </p>
			</div>
		</form>
	</div>
	<div id="dispmsg"></div>
</div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<script>
jQuery(function ($) {
  $("#referrer").val(document.referrer);
  $("#mail-form").submit(function(){
    $.ajax({
      url : "<?php echo get_template_directory_uri(); ?>/sendmail.php",
      type: 'POST',
      dataType: 'json',
      data: $(this).serialize()
    }).done( function(data){
			if (data.recaptcha) {
				$("#posted_message_wrap").empty();
				$("#posted_message_wrap").html(data.dispmsg);
				if(data.errflg != 1){
                                        //recaptch認証に成功し、メールも送信できた場合
					$("#mail-form").remove();
				}
			}else{
				alert('メール送信に失敗しました');
			}
    }).fail( function(data){
      alert('メール送信に失敗しました');
    })
    return false;
  });
});

</script>

url : “<?php echo get_template_directory_uri(); ?>/sendmail.php”

で、メール送信用のphpファイルを対象にajaxを行います。

返却値がerrflgとdispmsgとrecaptchなので、recaptchの判定をrecaptchで行い、errflgで送信成功かどうかの判定を行い、失敗と成功でそれぞれの処理を分けています。送信した場合に、メッセージを表示するためdispmsgにhtml()でDOMを操作しています。

成功した場合、お問い合わせフォームをremoveで消しています。

表示部でのrecaptchaの設定は、

<div class="g-recaptcha" data-callback="clearcall" data-sitekey="6Le96rQUAAAAAI4Y3TI4PzVWDvNp4t07z3xeNWt5"></div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

だけです。

recaptchaの判定は、if (data.recaptcha) {}です。

簡単でしたね。お疲れ様です。

送信が完了したら、送信完了のアニメーションと組み合わせるとリッチな感じになります。文字だけでは味気ない気もします。Lottieというものを使えば簡単に、しかも軽量にアニメーションを実装することができます。

実際にこのサイトのお問い合わせにもアニメーションが設定してあります。

プラグインなしのお問い合わせフォームを設置

GoogleのreCAPTCHA v2の設定

実行ファイルの作成

関連記事

WordPressをインストールしたらまずやること(ディスカッション設定)

WordPressをインストールしたらまずやること(表示設定)

WordPressでGoogle Search Consoleの設定。プラグインなし。

WordPressで【続きを読む】を表示させる方法

【プラグインなし】WordPressでGoogleアナリティクスの設定を行う

【プラグインなし】インスタグラムAPIでWordPressに投稿の一覧を表示する。デザインサンプル付

WordPressのOGPタグの設定(サンプル付)。

WordPressでサイトアドレス (URL)を変更する方法 2ステップ