一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. 便利なプラグイン MW WP Formにカスタマイズで機能を追加!
2014/02/21Web制作WordPressJavaScript

便利なプラグイン 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

エンジニア担当の和田です。 漆を塗ったりしていましたが最終的にプログラマーへと転職してしまいました。

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

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

お問い合わせ