便利なプラグイン MW WP Formにカスタマイズで機能を追加！ - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

弊社では企業様のホームページ制作する際にwordpressをCMSとして利用する場合があります。
その際にお問い合わせフォームはほとんどがcontact form 7一択でした。
使い勝手はもちろん、シェアが多ければそれだけ多くのtipsが蓄積され、それを公開してくれる方々が増えもう殆どお問い合せはこれだけで問題ないのではないかという状態です。

ただ、唯一あとちょっと・・・と思う部分はお問い合わせ時の確認画面です。
やはり企業様のホームページを制作するのに、お問い合わせでは確認画面がほしいという場合が多くcontact form 7ではカスタマイズで確認画面をつけることは可能とはいえやはり工数はかかってしまいます。
が、作者さんが付けないと言い切っている以上は今後もつかないでしょう（日本独自の文化のようですし）。

数年前にtrust form(旧inquiry form creator)という確認画面がつくプラグインも公開され、
お問い合わせをつけるだけという点がメインであればより工数の少ないこちらもお勧めですがデザイン重視の案件ではフォームの部分の装飾がcssのみでしかできないという点でもう一歩といったところでした。

そして、少し前から気になっていたMW WP Formというプラグインを今回テストで入れてみました。
contact form 7然としたデザイン可能なフォームと細かいバリデーション機能がついていてなかなか素晴らしいプラグインです。
もちろん設定は少し大変ですが慣れてしまえば好きなデザインで確認画面付きのお問い合わせフォームが作れるカンジです。

素晴らしいプラグインを作ってくださる作者の方々に感謝！

さて、標準的な設置方法などは公式や他の方々の解説に任せるとして補助プラグインを作ってみました。

hny-jpforms-something-additional

アップデートしたものがありますのでそちらをご確認ください。

下記の機能を補助プラグインで追加

ajaxzip3かんたん設定機能

郵便番号＞住所の変換を非同期でしてくれるajaxzip3というステキサービスがありますが
MW WP Formではinputタグを直接操作できませんので別にjavascriptを用意する必要があります。
これをちょっとの設定で付けられるようにました。

スクロール機能

MW WP Formはcontact form 7とは違い画面遷移しますのでアクションを起こすたびにページの一番上からの表示になってしまいます。
デザインの関係や、訴求力UPのためフォームが下の方にあったりする場合があるので「確認画面」「エラー表示」の時に目的のフォームの位置にスクロールできるようにしました。

どちらもjQueryに依存していますのでjQueryを読み込むようにしておいてください。

ネタがない時等はシリーズ化して機能を追加していく予定です。

補助プラグインの設置方法

ダウンロードはこちらから

まず、こちら(hny-jpforms-something-additional)からプラグインをダウンロードしてFTPでアップロードしてください。
アップデートしたものがありますのでそちらをご確認ください。
その後、管理画面からプラグインを有効化します。
MW WP Formの編集画面に入るとサイドカラムの一番下に新たに設定するボックスができていますので

このように郵便番号と住所に使用したキーを入力して保存します。

すると、このように自動で入るようになります。

対応しているのは
郵便番号 …　テキストフィールド mwform_text　・　郵便番号フィールド mwform_zip
住所…　テキストフィールド mwform_text（分けてる場合もそのうちやるかも）

今後つけようと思ってる機能

• 確認・送信ボタンの画像化も同様に管理画面からできるように
• contact form 7も同様の機能がつけられるように
• お問い合わせ受付番号が付けられるように

が目標です。
お問い合せ受付番号は移籍する前に一度作ったのですが、いろいろ要望があるようですので新たに書き直したうえで
このプラグインに機能追加という形でつけようかと思います。

さて、今回ご紹介しましたMW WP Form。もう少しここがこうだったらいいな。という細かい部分はありますが、今後もどんどんブラッシュアップして、細かい要望にも対応できるようカスタマイズしやすくしてくださったりしてくれたらいいなと…
今後、ホームページ制作案件ではこちらをメインに使っていこうかと思っています。

参考リンク

モンキーレンチ(公式ページ)　MW WP Form(公式プラグインディレクトリ)
contact form 7(公式ページ)　contact form 7(公式プラグインディレクトリ)
Trust From(公式ページ)　trust form(公式プラグインディレクトリ)
ajaxzip3