WordPressで自作の投稿フォーム(formタグ)が動かないときの原因

WordPressの投稿フォームを作ったときにハマったので、備忘録です。

WordPressで誰でも投稿できる掲示板を作った時に、エントリーフォームを作成したのですが、そのときに引っかかりました。

入力項目としては、以下の通り非常にシンプルなものです。

• 名前
• メールアドレス
• コメント

これを実現するために、以下のタグを記述したのですが、、、、

<form method="post" enctype="multipart/form-data" action="xxxxxx">
    <div>
        <label>名前</label><span class="red">※</span>
        <input type="text" name="name" value="" />
    </div>
    <div>
        <label>メールアドレス</label><span class="red">※</span>
        <input type="text" name="mail" value="" />
    </div>
    <div>
        <label>メッセージ</label><span class="red">※</span>
        <textarea name="note" ></textarea>
    </div>
    <div>
        <input type="submit" value="送信する" />
    </div>
</form>

これがなんと、

動かない、、、

404エラーに遷移してしまいます。

最初は、google先生に「wordpress　フォーム　動かない」とかで検索していたのですが、原因特定に至らなかったので、WordPressでフォーム使うときに何かルールとかお特殊な作法的なことがあるのかなと思って、検索したらわかりました。

WordPressって「予約語」があるのですね。

コレだけいろんなことが出来るパッケージですから、そりゃそうですよね。

ってことで、調べてみると、やはりありました。属性に使っている「name（上記ソースの赤字部分）」が予約語でした。

これを、「name=”namae”」に修正したら、動きました。。。。

なんとまぁあっけない。

また、今後のバージョンアップで使えなくなる可能性はあるので、現時点では予約語ではないですが、メールアドレスの属性も「mail=”mail_address”」に変更しておきました。

今回のキーワードである予約語ですが、WordPressだけで結構あったので、リンクつけときます。

WordPressの予約語一覧

また、PHPの予約語一覧も張っておくことにします。

PHPの予約語

本件の事象は、投稿フォームに限らず、検索フォームなどWordPressでFormタグを使ったり、独自で機能追加したいするときにも同じです。

初心者にありがちな、googleで見つかった参考ソースををそのまま貼り付けて実装するやり方であれば、この問題は起きないかと思います。

どちらかというと、name属性もきれいに管理したいと思うようなプログラム上級者ほど引っかかると思います。

初心忘れるべからず、とはまさにこのことかと思った次第です。

Author：yukio iizuka

フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com