BLOG

MW WP Formのエラー画面を、jQueryでカスタマイズ

WordPressのメールフォームプラグインMW WP Formは

  • 確認画面がある
  • 受け取ったメールはデータベースに保存可能
  • データベースの情報をCSVダウンロードできる
  • 2重送信されない
  • バリデーションルールが豊富
  • 各、遷移画面はユニークに設定できる

などなど至れり尽くせりの特徴をもった、使い勝手の良いメールフォームプラグインです。調べ尽くしたわけではありませんが、個人的にWordpressのメールフォーム系プラグインの中で唯一クライアントに納品できるプラグインだと思っています。当サイトにも導入しています。

そんなMW WP Formですが、豊富なバリデーションルールのわりに、エラー画面の自由度が低いのがたまにキズです。もっとも僕がちゃんと使いこなせていないだけかもしれませんが、個人的感想ということで、ご勘弁を!

jQueryのinsertAfter hasClass addClass replaceでエラー画面を自由にデザイン

デフォルトのままでは上図のようなデザインの場合、エラーがおこれば下図のようにエラーメッセージが不格好に表示されてしまいます。

ソースは以下のとおり

まず最初にクラスerrorをお手軽にポジションで枠の外に移動させました。

悪くはないのですが、IE7でエラーメッセージがうまく表示されなくて超ハマってしまいました。力技で表示させることは、できますが、毎回と思うと手間で仕方ありません。

で次に考えたのがjQueryでDOMを操作したほうが楽なんじゃね?ってことでした。 まさにその通りで、jQueryを使ったほうが自由度も高いですし、設置も速かったです。

ご覧の通り格段に自由度も上がりました。以下MW-WP-Formのテンプレとjsです。

まずreplaceで「未入力です。」を「入力必須項目です。」に変換し、アラート感を出すためにprependで「※」を追加、insertAfterで項目名に移動させました。さらにアラート感をだすように、hasClassでクラスerrorを取得し、クラスerrorが含まれていたらaddClassでebgというクラスを付与するようにしています。

jQueryを使えばMW WP Formをもっとリッチにカスタマイズすることができますがそれはまたの機会に!

実際に実装したページ

    Sponsored Links

  • […] 詳しくはこちらの記事で解説しています。 […]