Download - Mw wp formについてss
![Page 1: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/1.jpg)
2013.7.13
MW WP Form について
13年7月17日水曜日
![Page 2: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/2.jpg)
北島 卓(キタジマ タカシ)
Twitter inc2734
出身 長崎県諫早市職業 Webデザイナー・プログラマーブログ http://2inc.org
趣味 釣り、競艇、写真、自転車、卓球 探偵ナイトスクープ
13年7月17日水曜日
![Page 4: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/4.jpg)
MW WP Form とは何か
13年7月17日水曜日
![Page 5: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/5.jpg)
MW WP Form はフォームプラグイン
13年7月17日水曜日
![Page 6: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/6.jpg)
MW WP Form の特徴
13年7月17日水曜日
![Page 7: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/7.jpg)
MW WP Form の特徴
・ショートコードを使用したフォーム生成
13年7月17日水曜日
![Page 8: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/8.jpg)
MW WP Form の特徴
・ショートコードを使用したフォーム生成・確認画面が表示可能
13年7月17日水曜日
![Page 9: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/9.jpg)
MW WP Form の特徴
・ショートコードを使用したフォーム生成・確認画面が表示可能・同一URL・個別URLでの画面変遷が可能
13年7月17日水曜日
![Page 10: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/10.jpg)
MW WP Form の特徴
・ショートコードを使用したフォーム生成・確認画面が表示可能・同一URL・個別URLでの画面変遷が可能・豊富なバリデーションルール
13年7月17日水曜日
![Page 11: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/11.jpg)
ショートコードを使用したフォーム生成
フォーム項目を生成するショートコードを組み合わせてフォームを作成します。そのため、自由に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](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/12.jpg)
確認画面が表示可能
入力画面 > 確認画面 > 完了画面 の画面変遷を実現可能です。もちろん、入力画面 > 完了画面 という画面変遷も行えます。
13年7月17日水曜日
![Page 13: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/13.jpg)
同一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](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/14.jpg)
豊富なバリデーションルール
必須チェックはもちろんのこと、郵便番号チェック、電話番号チェック、入力文字種チェック、文字数チェックなど、さまざまなバリデーションルールを使用することができます。
・必須・半角数字・半角英字・半角英数字・郵便番号・電話番号・メールアドレス
・日付・一致する項目・文字数範囲指定・最小文字数・拡張子制限・サイズ制限
13年7月17日水曜日
![Page 15: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/15.jpg)
なぜ作ったの?
13年7月17日水曜日
![Page 16: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/16.jpg)
MW WP Form の歴史
13年7月17日水曜日
![Page 17: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/18.jpg)
2011年くらい
転職を機に WordPress をよく使うように…
サイト構築依頼のほとんどを WordPress で構築
お問い合わせフォームが欲しい
今まで通り Contact Form 7 を利用
13年7月17日水曜日
![Page 19: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/19.jpg)
確認画面だせないの?
13年7月17日水曜日
![Page 20: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/20.jpg)
どうやってだせばいいんだ…
13年7月17日水曜日
![Page 21: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/21.jpg)
【inquiry form creator】簡単3ステップで確認画面付きの問い合わせフォームが設置できるWordPressプラグインhttp://hinagata.biz/plugin/inquiry-form-creator/
13年7月17日水曜日
![Page 22: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/22.jpg)
2011年末くらい
・Inquiry form creator 更新停止を知る・自由にデザインしにくい・使いたいバリデーションがない…
13年7月17日水曜日
![Page 23: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/23.jpg)
2011年末くらい
・Inquiry form creator 更新停止を知る・自由にデザインしにくい・使いたいバリデーションがない…
自分で作ろう!
13年7月17日水曜日
![Page 24: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/24.jpg)
オレオレPHPフレームワーク
13年7月17日水曜日
![Page 25: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/25.jpg)
ホーム
会社案内 製品紹介 新着情報 お問い合わせ 資料請求
WordPress オレオレPHPフレームワーク
13年7月17日水曜日
![Page 26: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/26.jpg)
メニューとかに修正があったときに両方に修正を入れなければいけなくて
超めんどくさい!!
13年7月17日水曜日
![Page 27: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/27.jpg)
iframe で表示すれば良いじゃん!
13年7月17日水曜日
![Page 28: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/28.jpg)
オレオレPHPフレームワーク
13年7月17日水曜日
![Page 29: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/29.jpg)
なんかへん
13年7月17日水曜日
![Page 30: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/30.jpg)
自分でプラグインを作ろう!
13年7月17日水曜日
![Page 31: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/31.jpg)
2012年7月くらい
・MW WP Form ver 0.5 公開・ショートコードでフォーム作成・functions.php にバリデーション、メール送信を記述・管理画面なし
13年7月17日水曜日
![Page 32: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/32.jpg)
革命が起きるかも!
13年7月17日水曜日
![Page 33: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/33.jpg)
ほとんど反応がないだと…
13年7月17日水曜日
![Page 34: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/34.jpg)
管理画面がないからだ!
13年7月17日水曜日
![Page 35: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/35.jpg)
2013年2月くらい
・フォームの作成、バリデーション、メール設定等がすべて管理 画面から設定可能に
13年7月17日水曜日
![Page 36: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/36.jpg)
革命が起きるかも!
13年7月17日水曜日
![Page 37: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/37.jpg)
ほとんど反応がないだと…
13年7月17日水曜日
![Page 38: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/38.jpg)
2013年4月くらい
・問い合わせ内容をデータベースに保存する機能を追加
2013年6月くらい
・画像、ファイルアップロード機能を追加・フォーム項目を追加するためのフックを追加
・Akismet によるスパム判定機能を追加
13年7月17日水曜日
![Page 39: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/39.jpg)
革命が起きるかも!
13年7月17日水曜日
![Page 40: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/40.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/41.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/42.jpg)
少な!
13年7月17日水曜日
![Page 43: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/43.jpg)
今後やりたいこと
・バリデーション項目追加用のフックを追加・テーマ機能かひな形挿入機能を追加・必須項目のチェックがチェックボックス・ラジオボタンと それ以外用の2種類にわかれているので統一・ビジュアルエディタでもボタンがでるように・CSVダウンロード
13年7月17日水曜日
![Page 44: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/44.jpg)
デモ
13年7月17日水曜日
![Page 45: Mw wp formについてss](https://reader030.vdocuments.site/reader030/viewer/2022020110/5594a36a1a28ab7a548b476f/html5/thumbnails/45.jpg)
ご清聴ありがとうございました。
13年7月17日水曜日