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 レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

記事を読む

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

「レスポンシブ テンプレート の メニューやブログの設置」の記事では、メニューやブログの設置例をやっ

記事を読む

レンタルサーバでWordPressを設置してみよう!

WordPress.com 内に、ブラウザだけで無料でサイトを作成出来きるサービスもありますが、Wo

記事を読む

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

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

前記事の続きで、wp-settings.php の68行目あたりから見ていきます。 <今回のピ

記事を読む

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

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

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

記事を読む

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

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

前記事の続きで、wp-settings.php の91行目あたりから見ていきます。 次は、wp

記事を読む

MVCの典型的な相関図

PHPフレームワークについて

フレームワークとは? 開発する際に頻繁に必要とされる汎用的な機能をまとめて提供している、アプリケー

記事を読む

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

PHP WordPress

Message

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

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

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

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

Wordpress でプラグインを使わずにフォームをやってみます。

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分か

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

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

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

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑