NO IMAGE

WordPressでメールフォームを真面目に考える。

  • 2018年11月20日
  • 2018年11月26日
  • 未分類
  • 119view

少し前にメールフォームのデザインをBootstrap4で用意し始めたが、そろそろ完成させたい。

前回:WordPress +bootstrap4で業務用メールフォームを作る。

要件定義としてはこんな感じ

  1. テーマとしてお問合せフォームを内包させたい。
  2. 例外処理(途中からアクセス・ブラウザ更新)も対応したい。
  3. 入力フォームから確認画面を入れたい。
  4. 送信済み後のリダイレクトかX秒後にトップページに戻したい。
  5. 確認画面のファイルは他のお問合せフォームと共有で使えるようにしたい。
  6. メール送信はWordPressの関数を利用したい。
  7. セキュリティ上の対応もしたい。
  8. 可能であればメール送信の情報をDBに格納したい。

さて、まずは流れ。

普通に考えればこんな感じだが……

内部的には

ここで普通に考えると、

  1. その画面でブラウザの更新されたらどうするか?
  2. ショートコードは利用するか?

ショートコードはWordPressを利用している以上は必要だろうな。

 

バリデーションは後にして、まずは入力フォームを用意

コードは、テンプレートページを用意しておく。

<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery.validationEngine.js'></script>
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/languages/jquery.validationEngine-ja.js'></script>
<link href="<?php echo get_template_directory_uri(); ?>/css/validationEngine.jquery.css" rel="stylesheet">
<?php ///echo get_template_directory_uri(); ?>/css/validationEngine.jquery.css <br>
<?php //echo get_template_directory_uri(); ?>/js/jquery.validationEngine.js 
<i class="material-icons">
mail_outline
</i>
サンプルお問合せフォーム02 元記事:
<!-- form -->
  <form id="form_1" name="form" method="post" action="/確認画面.php" class="container">
 
 -----------------  省略 ---------------------------
      
  </form>
<!-- /form -->	

			

			
	<script>
		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#form_1").validationEngine();
		});
            
</script>

次に確認画面を用意。

※下の追記してあるが、固定ページに入れる事に。
 迷走の記録して残しておく(´・ω・)

<form id=”form_1″ name=”form” method=”post” action=”/確認画面.php” class=”container”>
これを確認用に<?php echo get_template_directory_uri(); ?>でテンプレート先を指定して、confirm.phpにしてみる。

Fatal error: Uncaught Error: Call to undefined function wp_head() in
Stack trace: #0 {main} thrown in /home/xsvx1010357/kato.space/public_html/sample01/wp-content/themes/blankslate/confirm.php on line 2

テンプレートとして読み込まないとダメなのか。
固定ページを作ってもいいが、直接テンプレート内のファイルを読みに行かせる方法はないものか。パースしてるか面倒か。
分解して考えると、

1.入力フォームからPOSTされた場合、任意のテンプレートファイルを利用する。
2.テンプレートファイルの選択はfunction.phpで指定できる。
3.じゃ、入力フォームというのはどうやって判別するのか?

 

@see 条件に応じてテンプレートファイルを変更する
http://morilog.com/wordpress/tips/custom_template_include/

 

この条件が分からない……というか決められない。
実際に動いているならお問合せっていうカテゴリーがあれば、それで行けるが、
じゃ、カテゴリーはIDとスラッグ、つまり投稿なら行けるが、
固定ページがページ名だと1つかできないな。なんとか自動でテンプレートを振り分ける方法があれば、
つまりこの条件なら確認画面にテンプレートを使うというのが条件をfunction.phpか振り分けしきゃならない。

Google先生に聞くか。

 

@see
適切なテンプレートファイルを用意してテンプレート内の振り分け処理を無くす
https://elearn.jp/wpman/column/c20111018_01.html

WordPress の single.php を投稿フォーマットで振り分ける方法
http://designhack.slashlab.net/post-format-specific-single-php-template-in-wordpress/

パラメータでシングルページのテンプレートを変更
https://dogmap.jp/2011/02/01/single-template-switch/

 

あれ?どっちにしろ入力フォームに固定ページつくって テンプレートを使うなら、
別に自動振り分けじゃなくてもいいじゃ???そうだな。では、固定ページを作り出す?
いやそうすると、

確認画面は自動でアクション先は毎回入れ込む形か……ん、プラグインにすればいいのだろうが。
今回は無し(´・ω・)

WordPressでFormを用いてPOSTすると404になる問題
http://qs.nndo.jp/2017/01/16/28/

 

確認画面

 

~~~ 省略 ~~~

<div class="row mt-2">
<div class="col-sm-6 padding10">
<button type="button" onclick="history.back()">戻る</button>
<button type="submit" class="btn btn-info">送信<span class="glyphicon glyphicon-chevron-right"></span> </button>
</div>
</div>

 

送信画面

//メール送信ここから --------------------------------------------------------------

//時間取得
$now = date('Y年m月d日 H:i:s');

//送信先
//複数独自にメールアドレスを設定する場合
//$to = array ( "メールアドレス", "メールアドレス" );
$to = "メールアドレス";

//タイトル
$subject = "テストお問合せをお受けしました。";
$headers = "From: My Name <{$to}>" . "\r\n";
//添付ファイル
//$attachments = ";

//メッセージ
$message = "以下の情報でお問合せをお受けいたしました。".$now;
foreach ($_POST as $key => $value) {
    $message .= $key .":".$value . "\n";
}
wp_mail($to, $subject, $message, $headers, $attachments); 
//メール送信ここまで --------------------------------------------------------------
?>

あとは整形すればいいいか。

スパム対策とか更新とか途中アクセスからの閲覧対策

この送信画面に直接アクセスされると、それだけメールが送信されてしまう。それは制限させたい。
まずは条件を箇条書きに

 

  1. 確認・送信画面に直接アクセスされるのを制限したい。
  2. 確認画面からアクセスに限定
  3. 確認・送信画面に直接アクセスされたらトップページに即リダイレクト

またGoogle先生に聞こう

@
たった2行でメールフォームにスパム対策

//スパム野郎は生まれた場所に帰れ
if(!$_SERVER['HTTP_REFERER'] || stripos($_SERVER['HTTP_REFERER'], $_SERVER['HTTP_HOST']) === FALSE)
header("Location: ".($_SERVER['HTTP_REFERER']?$_SERVER['HTTP_REFERER']:"http://".$_SERVER['HTTP_HOST']));

URLで判別か。

問い合わせフォームからのスパムメールをたった3行のコードで撃退するシンプルな方法
https://tsukuru-blog.com/form-anti-spam-jquery/
こちらはロボット対策でHTMLの内容を変更するやり方

これはスパム対策。

簡単に思いつくのは、そのページ以外から来たらリダイレクトさせるやり方。これなら問題がないか。
hidden値はURLと確認画面にいくだけだから問題ないだろう。あとはここでHTMLのパースを実施。

まずは入力フォームの部分に。

  <input class="d-none" type=”hidden” name=”formurl” value=”<?php echo  (is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];?>”>

Bootstrapのせいか、表示されてしまうのでclass=”d-none” のクラスを追加。

躓き:検索して引っ張て来たコードでダブルクオーテーションが違った。

 

雑だが、

session_start();
$came_host = $_SERVER["HTTP_HOST"]; 
$now_host =  $_POST["furl"];
$redirect = "http://kato.space/";
if($now_host != $came_host){
	header('Location: ' . $redirect, true, 301);
}else{
	$_SESSION['done_confirem'] = "ok";
}

こちらでリダイレクトしておく。

次にセッションだが、php セッションスタート 後 リダイレクト

送信画面は

session_start();
$redirect = "http://kato.space/";
if($_SESSION['done_confirem'] != "ok"){
header('Location: ' . $redirect, true, 301);
}

次に確認画面。
ここを汎用化しておく。

まず来ている値をそのまま表示させる。

【汎用で確認画面は無理と判断】

 

 

 

 

 

NO IMAGE
最新情報をチェックしよう!

  • Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 83

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 84

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 85
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG