少し前にメールフォームのデザインをBootstrap4で用意し始めたが、そろそろ完成させたい。
前回：WordPress +bootstrap4で業務用メールフォームを作る。
要件定義としてはこんな感じ
- テーマとしてお問合せフォームを内包させたい。
- 例外処理（途中からアクセス・ブラウザ更新）も対応したい。
- 入力フォームから確認画面を入れたい。
- 送信済み後のリダイレクトかX秒後にトップページに戻したい。
- 確認画面のファイルは他のお問合せフォームと共有で使えるようにしたい。
- メール送信はWordPressの関数を利用したい。
- セキュリティ上の対応もしたい。
- 可能であればメール送信の情報をDBに格納したい。
さて、まずは流れ。
普通に考えればこんな感じだが……
内部的には
ここで普通に考えると、
- その画面でブラウザの更新されたらどうするか？
- ショートコードは利用するか？
ショートコードは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.htmlWordPress の 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);
//メール送信ここまで --------------------------------------------------------------
?>
あとは整形すればいいいか。
スパム対策とか更新とか途中アクセスからの閲覧対策
この送信画面に直接アクセスされると、それだけメールが送信されてしまう。それは制限させたい。
まずは条件を箇条書きに
- 確認・送信画面に直接アクセスされるのを制限したい。
- 確認画面からアクセスに限定
- 確認・送信画面に直接アクセスされたらトップページに即リダイレクト
またGoogle先生に聞こう
@たった２行でメールフォームにスパム対策
//スパム野郎は生まれた場所に帰れ
if(!$_SERVER['HTTP_REFERER'] || stripos($_SERVER['HTTP_REFERER'], $_SERVER['HTTP_HOST']) === FALSE)
header("Location: ".($_SERVER['HTTP_REFERER']?$_SERVER['HTTP_REFERER']:"http://".$_SERVER['HTTP_HOST']));
ＵＲＬで判別か。
問い合わせフォームからのスパムメールをたった3行のコードで撃退するシンプルな方法
https://tsukuru-blog.com/form-anti-spam-jquery/
こちらはロボット対策でＨＴＭＬの内容を変更するやり方
これはスパム対策。
簡単に思いつくのは、そのページ以外から来たらリダイレクトさせるやり方。
これなら問題がないか。
hidden値はＵＲＬと確認画面にいくだけだから問題ないだろう。あとはここでＨＴＭＬのパースを実施。
まずは入力フォームの部分に。
<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);
}
次に確認画面。
ここを汎用化しておく。
まず来ている値をそのまま表示させる。
【汎用で確認画面は無理と判断】
