mw wp formについてss

45
2013.7.13 MW WP Form について 13717日水曜日

Upload: -

Post on 02-Jul-2015

6.591 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Mw wp formについてss

2013.7.13

MW WP Form について

13年7月17日水曜日

Page 2: Mw wp formについてss

北島 卓(キタジマ タカシ)

Twitter inc2734

出身  長崎県諫早市職業  Webデザイナー・プログラマーブログ http://2inc.org

趣味  釣り、競艇、写真、自転車、卓球    探偵ナイトスクープ

13年7月17日水曜日

Page 3: Mw wp formについてss

モンキーレンチhttp://2inc.org

13年7月17日水曜日

Page 4: Mw wp formについてss

MW WP Form とは何か

13年7月17日水曜日

Page 5: Mw wp formについてss

MW WP Form はフォームプラグイン

13年7月17日水曜日

Page 6: Mw wp formについてss

MW WP Form の特徴

13年7月17日水曜日

Page 7: Mw wp formについてss

MW WP Form の特徴

・ショートコードを使用したフォーム生成

13年7月17日水曜日

Page 8: Mw wp formについてss

MW WP Form の特徴

・ショートコードを使用したフォーム生成・確認画面が表示可能

13年7月17日水曜日

Page 9: Mw wp formについてss

MW WP Form の特徴

・ショートコードを使用したフォーム生成・確認画面が表示可能・同一URL・個別URLでの画面変遷が可能

13年7月17日水曜日

Page 10: Mw wp formについてss

MW WP Form の特徴

・ショートコードを使用したフォーム生成・確認画面が表示可能・同一URL・個別URLでの画面変遷が可能・豊富なバリデーションルール

13年7月17日水曜日

Page 11: Mw wp formについてss

ショートコードを使用したフォーム生成

フォーム項目を生成するショートコードを組み合わせてフォームを作成します。そのため、自由にHTMLでマークアップすることができ、柔軟なフォームデザインを実現します。

<table border="0" cellpadding="0" cellspacing="0" class="form"> <tr> <th>お名前</th>

<td>[mwform_text name="お名前"]</td> </tr> <tr> <th>電話番号</th>

<td>[mwform_tel name="電話番号"]</td> </tr> <tr> <th>内容</th>

<td>[mwform_textarea name="内容"]</td> </tr></table><p> [mwform_backButton] [mwform_submitButton]</p>

13年7月17日水曜日

Page 12: Mw wp formについてss

確認画面が表示可能

入力画面 > 確認画面 > 完了画面 の画面変遷を実現可能です。もちろん、入力画面 > 完了画面 という画面変遷も行えます。

13年7月17日水曜日

Page 13: Mw wp formについてss

同一URL・個別URLでの画面変遷が可能入力・確認・完了画面の画面変遷を同一URLもしくはそれぞれ個別のURLで行うことができます。

http://2inc.org/contact/

http://2inc.org/contact/confirm/

http://2inc.org/contact/complete/

13年7月17日水曜日

Page 14: Mw wp formについてss

豊富なバリデーションルール

必須チェックはもちろんのこと、郵便番号チェック、電話番号チェック、入力文字種チェック、文字数チェックなど、さまざまなバリデーションルールを使用することができます。

・必須・半角数字・半角英字・半角英数字・郵便番号・電話番号・メールアドレス

・日付・一致する項目・文字数範囲指定・最小文字数・拡張子制限・サイズ制限

13年7月17日水曜日

Page 15: Mw wp formについてss

なぜ作ったの?

13年7月17日水曜日

Page 16: Mw wp formについてss

MW WP Form の歴史

13年7月17日水曜日

Page 17: Mw wp formについてss

2007年くらい

Movable Type 3.x から WordPress ME -> WordPress 2.3に移行

お問い合わせフォームに Contact Form 7 を利用

~2010年くらい

個人ブログでは使用しているものの、仕事での WordPress 利用は 3件程度

お問い合せフォームの設置依頼には Contact Form 7 で対応

13年7月17日水曜日

Page 18: Mw wp formについてss

2011年くらい

転職を機に WordPress をよく使うように…

サイト構築依頼のほとんどを WordPress で構築

お問い合わせフォームが欲しい

今まで通り Contact Form 7 を利用

13年7月17日水曜日

Page 19: Mw wp formについてss

確認画面だせないの?

13年7月17日水曜日

Page 20: Mw wp formについてss

どうやってだせばいいんだ…

13年7月17日水曜日

Page 21: Mw wp formについてss

【inquiry form creator】簡単3ステップで確認画面付きの問い合わせフォームが設置できるWordPressプラグインhttp://hinagata.biz/plugin/inquiry-form-creator/

13年7月17日水曜日

Page 22: Mw wp formについてss

2011年末くらい

・Inquiry form creator 更新停止を知る・自由にデザインしにくい・使いたいバリデーションがない…

13年7月17日水曜日

Page 23: Mw wp formについてss

2011年末くらい

・Inquiry form creator 更新停止を知る・自由にデザインしにくい・使いたいバリデーションがない…

自分で作ろう!

13年7月17日水曜日

Page 24: Mw wp formについてss

オレオレPHPフレームワーク

13年7月17日水曜日

Page 25: Mw wp formについてss

ホーム

会社案内 製品紹介 新着情報 お問い合わせ 資料請求

WordPress オレオレPHPフレームワーク

13年7月17日水曜日

Page 26: Mw wp formについてss

メニューとかに修正があったときに両方に修正を入れなければいけなくて

超めんどくさい!!

13年7月17日水曜日

Page 27: Mw wp formについてss

iframe で表示すれば良いじゃん!

13年7月17日水曜日

Page 28: Mw wp formについてss

オレオレPHPフレームワーク

13年7月17日水曜日

Page 29: Mw wp formについてss

なんかへん

13年7月17日水曜日

Page 30: Mw wp formについてss

自分でプラグインを作ろう!

13年7月17日水曜日

Page 31: Mw wp formについてss

2012年7月くらい

・MW WP Form ver 0.5 公開・ショートコードでフォーム作成・functions.php にバリデーション、メール送信を記述・管理画面なし

13年7月17日水曜日

Page 32: Mw wp formについてss

革命が起きるかも!

13年7月17日水曜日

Page 33: Mw wp formについてss

ほとんど反応がないだと…

13年7月17日水曜日

Page 34: Mw wp formについてss

管理画面がないからだ!

13年7月17日水曜日

Page 35: Mw wp formについてss

2013年2月くらい

・フォームの作成、バリデーション、メール設定等がすべて管理 画面から設定可能に

13年7月17日水曜日

Page 36: Mw wp formについてss

革命が起きるかも!

13年7月17日水曜日

Page 37: Mw wp formについてss

ほとんど反応がないだと…

13年7月17日水曜日

Page 38: Mw wp formについてss

2013年4月くらい

・問い合わせ内容をデータベースに保存する機能を追加

2013年6月くらい

・画像、ファイルアップロード機能を追加・フォーム項目を追加するためのフックを追加

・Akismet によるスパム判定機能を追加

13年7月17日水曜日

Page 39: Mw wp formについてss

革命が起きるかも!

13年7月17日水曜日

Page 40: Mw wp formについてss

Contact Form 7

Inquiry Form Creator

Trust Form

MW WP Form

11,534,700

19,875

15,625

13年7月17日水曜日

Page 41: Mw wp formについてss

Contact Form 7

Inquiry Form Creator

Trust Form

MW WP Form

11,534,700

19,875

15,625

853

13年7月17日水曜日

Page 42: Mw wp formについてss

少な!

13年7月17日水曜日

Page 43: Mw wp formについてss

今後やりたいこと

・バリデーション項目追加用のフックを追加・テーマ機能かひな形挿入機能を追加・必須項目のチェックがチェックボックス・ラジオボタンと それ以外用の2種類にわかれているので統一・ビジュアルエディタでもボタンがでるように・CSVダウンロード

13年7月17日水曜日

Page 44: Mw wp formについてss

デモ

13年7月17日水曜日

Page 45: Mw wp formについてss

ご清聴ありがとうございました。

13年7月17日水曜日