少し前にメールフォームのデザインをBootstrap4で用意し始めたが、そろそろ完成させたい。
前回：WordPress +bootstrap4で業務用メールフォームを作る。
要件定義としてはこんな感じ
- テーマとしてお問合せフォームを内包させたい。
- 例外処理（途中からアクセス・ブラウザ更新）も対応したい。
- 入力フォームから確認画面を入れたい。
- 送信済み後のリダイレクトかX秒後にトップページに戻したい。
- 確認画面のファイルは他のお問合せフォームと共有で使えるようにしたい。
- メール送信はWordPressの関数を利用したい。
- セキュリティ上の対応もしたい。
- 可能であればメール送信の情報をDBに格納したい。
さて、まずは流れ。
普通に考えればこんな感じだが……
内部的には
ここで普通に考えると、
- その画面でブラウザの更新されたらどうするか？
- ショートコードは利用するか？
ショートコードはWordPressを利用している以上は必要だろうな。
コードは、テンプレートページを用意しておく。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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にしてみる。
|
1 2 |
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/
確認画面
|
1 2 3 4 5 6 7 8 |
～～～ 省略 ～～～ <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> |
送信画面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//メール送信ここから -------------------------------------------------------------- //時間取得 $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先生に聞こう
@たった２行でメールフォームにスパム対策
|
1 2 3 |
//スパム野郎は生まれた場所に帰れ 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値はＵＲＬと確認画面にいくだけだから問題ないだろう。あとはここでＨＴＭＬのパースを実施。
まずは入力フォームの部分に。
|
1 |
<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” のクラスを追加。
躓き：検索して引っ張て来たコードでダブルクオーテーションが違った。
雑だが、
|
1 2 3 4 5 6 7 8 9 |
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 セッションスタート 後 リダイレクト
送信画面は
|
1 2 3 4 5 |
session_start(); $redirect = "http://kato.space/"; if($_SESSION['done_confirem'] != "ok"){ header('Location: ' . $redirect, true, 301); } |
次に確認画面。
ここを汎用化しておく。
まず来ている値をそのまま表示させる。
【汎用で確認画面は無理と判断】
