技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > 便利なプラグイン MW WP Formにカスタマイズで機能を追加!
2014/02/21ホームページ制作JavaScriptWordpress

便利なプラグイン MW WP Formにカスタマイズで機能を追加!

弊社では企業様のホームページ制作する際に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の編集画面に入るとサイドカラムの一番下に新たに設定するボックスができていますので
metabox
このように郵便番号と住所に使用したキーを入力して保存します。

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

対応しているのは
郵便番号 … テキストフィールド 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

wada

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと
紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ