WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

公開日: : PHP, WordPress

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。
今回は細かいところや注意点とエラーなどについて書きたいと思います。

WordPress エラー:This is somewhat embarrassing, isn’t it? について

フォームを作っている最中、送信ボタンを押したときに以下のエラーが出ました。

This is somewhat embarrassing, isn’t it?
It looks like nothing was found at this location. Maybe try a search?

なんだっけと思いましたが、これはただの 404.php の内容でした。

(テンプレートは、Twenty Thirteen を急いでカスタマイズして作ったので、404.php はほっとけぼりでした。。)

エラーの原因はなんなのかというと、WordPress には予約語というのがあります。
WordPress Codex 予約語一覧

name という名前はWordPress の予約語で、(既存の検索機能で使っている?っぽい)ので、エラーになりました。

<input type="text" name="name" size="40" maxlength="60" value="" required />//これだとエラー

POST 送信の名前のところが、name となっていたのを namae にしたらエラーは出なくなりました。

<input type="text" name="namae" size="40" maxlength="60" value="" required />//これだと大丈夫

自作フォームを作るときは、この予約語は使わないように注意しましょう。

(この404エラーはページがない時に出るものなので、原因はこれだけとは限りません。例えばカスタム構造にしている時にのパーマリンク設定などが間違っている場合など様々あります。)

input タグ

input タグの入力必須チェックは、required 属性を使っています。

<input type="text" name="namae" value="" required />

input タグの type 属性で type=”email” を指定しています。

<input type="email" name="email" value="" required />

サポートしている一般的なブラウザでは、 入力された値に妥当で無い場合にバリデーションが働きますが、Safariなどのブラウザやバージョンによっては効かないブラウザもあります。

入力した後の処理で、contact-check.php でもチェックしているので、そこで判定はやっていますが、Javascript を付ける方法もあります。

参考サイト:入力チェック(正規表現含む)

form の二重送信防止スクリプト

contact-confirm.php のところでは、以下のように送信ボタンを連打することを防止しています。

<script>
//2重送信防止スクリプト
var flg_Submit = false;
function Fnk_DoubleSubmit(){
  if(flg_Submit){
    alert("処理中です。");return false;
  }
  else{
    flg_Submit = true;return true;
  }
}
</script>
・・・・・
<form method="post" onsubmit="return Fnk_DoubleSubmit();">
・・・・・
</form>

これだけですと、戻るボタンや完了画面リロードなどで、何回も同じフォーム内容が送信出来てしまいます。

今回は簡易メール送信のみなので付けていませんが、セッションを使ったりしてさらに二重送信防止する方法もあります。

参考サイト:さいきょうの二重サブミット対策

form の文字列チェック

contact-check.php では、送信した文字列に危険なものがないか、チェックしています。
簡易的にこんな感じにしてみました。

/* 危険文字列置換ファンクション */
function Chk_StrMode($str){

	// タグを除去
	$str = strip_tags($str);
	// 空白を除去
	$str = mb_ereg_replace("^( ){0,}","",$str);
	$str = mb_ereg_replace("( ){0,}$","",$str);
	$str = trim($str);
	// 特殊文字を HTML エンティティに変換する
	$str = htmlspecialchars($str);
	
	return $str;
}

DBに登録する時は特にHTMLタグや Javascript をページ内に仕込めないように、strip_tagsやhtmlspecialcharsくらいはやった方がいいかと思います。

form のメールアドレスチェック

メールアドレスが正しいものかをチェックする正規表現ですが、これはとても難しい問題で調べても正解が分かりませんでした。

最近の記事で、以下のがよさそうだったのでそのまま使わせていただきました。

参考サイト:PHP 正規表現 で メールアドレスを判定(チェック)したい

/* メールアドレスチェックファンクション 2017.9.1現在 参考サイト:http://wepicks.net/phpsample-preg-mail/ */
function CheckEmailAddress($sMailaddress) {
    if(preg_match('/^(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){255,})(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){65,}@)(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22))(?:\.(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-[a-z0-9]+)*)|(?:\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\]))$/iD', $sMailaddress)){
        list($username,$domain)=explode('@',$sMailaddress);
        if(!checkdnsrr($domain,'MX')){
            return false;
        }
    return true;
    }
return false;
}

99.99%のメールアドレスを判定できる正規表現らしいです。

関連記事

WordPress PHP

WordPress の PHP をちょっと見てみよう Ⅰ

WordPress には、たくさんのファイルが入っています。 ここではテーマ内ではなく、トップ

記事を読む

Wordpress 自作フォーム

WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。 簡単に名前、メールアドレス、メ

記事を読む

wordpress カスタム投稿で 2ページ目以降が404

wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました。 ニュース一覧で、ペー

記事を読む

WordPress レスポンシブ テンプレート 元にサイトを作ってみる その2

DEMO を見る カスタム投稿タイプ functions.php 今回は3つのリストメニュ

記事を読む

Wordpress 自作フォーム (チェックボックスなど)

WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpress で自作フォームを作ってみ

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

wordpress カスタム投稿を一覧(ループ)で表示する

wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_posts 関数が非推奨になって

記事を読む

WordPress レスポンシブ テンプレート

WordPress レスポンシブ テンプレート の メニューやブログの設置

前回の 「WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダ

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

ロリポップでWordPressのPHPバージョンを5から7にする

ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MySQL5.6以上またはMaria

記事を読む

PHP WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

→もっと見る

    • 201910
      Mon Tue Wed Thu Fri Sat Sun
      123456
      78910111213
      14151617181920
      21222324252627
      28293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑