サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
到達ページ目標の設定例 - アナリティクス ヘルプ
ここでは、一般的な状況で到達ページ目標を設定する方法を説明します。目標全般の設定方法の概要については、目標の設定と編集をご覧ください。 この記事の内容: 多くのウェブサイトでは、各ウェブページに対して固定した URL を使用します。こうしたページの構造は、サイトで使用されているウェブ テクノロジーによって異なります。例: http://www.myownpersonaldomain.com/2008/category/name-of-blog-post/ http://www.examplepetstore.com/dogs/food.php http://www.examplepetstore.com/cats/food.html このような URL について目標を設定する方法は次のとおりです。 まず、目標とする URL がそのページと目標に固有で、そのページを表示する際に必ず使用される
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML [html] 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力して
フォームに未入力項目があると警告する - JavaScript
サンプルと機能 → Sample 1：未入力項目があると警告する テキスト領域やテキストエリアに未入力項目があった場合、送信時に警告をします。 入力必須項目は自由に設定することができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：未入力項目があると警告する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 未入力項目をチェックする function chValie() { // 入力必須項目（「,」で区切って追加可能） ess = new Array("email", "name", "comment");
【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法｜MarTechLab（マーテックラボ）
皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1：ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
フォームの「ガッカリ離脱」を防いでコンバージョン率UP！ 送信後エラー・ゼロ作戦／15か条の7 | 勝手にEFO分析-エントリーフォーム改善
フォームの送信ボタンをクリックしたとき、エラーが表示されたらガッカリしてしまいますよね。そうしたことが原因の「ガッカリ離脱」を防ぐために、エラーがない状態になるようにユーザーを導き、確認画面、完了画面に進んでもらうことが、完了率アップには極めて重要です。今回は、入力項目ごとに、ユーザーが入力した内容がフォームの求める形式になっているようにするための改善ポイントをご紹介します。 この記事では、入力フォームを改善して入力完了率を上げる！エントリーフォーム最適化15か条の【第7条】「入力エラーをリアルタイムで伝えるべし」をご紹介します。リンクをクリックするとこの記事下のまとめに飛びます。 「ガッカリ離脱」を未然に防いで、入力完了率アップをしようエントリーフォームにひと通り入力を終えて「確認／完了ページ」へ進もうとしたのに、エラーメッセージがでてガッカリした経験はありませんか？ ガッカリしたユーザ
[jQuery]【サンプルあり】送信ボタンを必須項目が空なら無効化させる
テキストボックスが３つあります。 それら全てに文字が入力されていないと送信ボタンがグレーアウトして作動しなくなっています。 逆に全てのテキストボックスに文字が入力されていればクリックできるようになります。 サンプルコード サンプルコード HTML <form> <label for="input01">入力欄1つめ</label> <input required id="input01" type="text" /> <label for="input02">入力欄2つめ</label> <input type="text" id="input02"/> <label for="input03">入力欄3つめ</label> <input required type="text" id="input03"/> <button type="submit" class="send">送信</b
![[jQuery]【サンプルあり】送信ボタンを必須項目が空なら無効化させる](https://cdn-ak-scissors.b.st-hatena.com/image/square/083eb0418a99c5f6008648e3d88383d7a9bc9d48/height=288;version=1;width=512/http%3A%2F%2Flogic-a.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F05%2F001.jpg)
Copyright表示不要のPHP製汎用メールフォームシステム「TransmitMail」
Copyright表示不要のPHP製汎用メールフォームシステム「TransmitMail」 2011年10月13日 2015年11月4日 TransmitMail Copyright表示不要のPHP製汎用メールフォームシステム「TransmitMail」Copyright表示不要のPHP製汎用メールフォームシステム「TransmitMail」 への132件のコメント tagawa 2015年11月4日 追記 TransmitMail 2 をリリースしました。 個人事業を始めてすぐに、必要にかられてメールフォームシステムを作ったのですが、自分たちで使うだけではそんなに案件数もないし、ただ眠らせておくのはもったいないと思い、GitHubで公開することにしました。 TransmitMail – Copyright表示不要のPHP製汎用メールフォームシステム dounokouno/Transmit
フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
文字列のバイト数をカウントする | JavaScript Tips
文字数ではなく、バイト数を数える処理です。 文字列を１文字ずつ確認し、１バイト文字の場合は１を足し、２バイト文字の場合は２を足した合計を返します。 /**************************************************************** * バイト数を数える * * 引数 ： str 文字列 * 戻り値： バイト数 * ****************************************************************/ function CountLength(str) { var r = 0; for (var i = 0; i < str.length; i++) { var c = str.charCodeAt(i); // Shift_JIS: 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf ,
Movable Typeにフォームをドラッグ＆ドロップでデザインして簡単に追加できるプラグイン「A-Form」
Movable Typeに自由度の高いフォームを簡単に複数設置することができ、なおかつフォーム作成はドラッグ＆ドロップによる直感的なレイアウトが可能なので、カスタマイズの専門的な知識は不要。また、控えメール送信機能や、受付データをCSVファイルでダウンロードする機能もあり、さらにはアクセス数やエラーログのアクセスレポート機能、そしてフォームの稼動状態を定期的にチェックして管理者にメール通知する死活監視機能までが付いているというかなり高機能なフォーム作成プラグインがこの「A-Form」です。 詳細は以下から。 A-Form：MovableTypeにフォーム設置できるMTプラグイン｜Web制作のアークウェブ http://www.ark-web.jp/movabletype/ 以下からダウンロードできます。 A-Formダウンロードフォーム：MovableTypeにフォーム設置できるMTプラグ
WUFOO（無料の入力フォーム作成サービス）とは？ （機能一覧）｜...
WUFOO（ウーフー）とは？ 無料で自分専用の入力フォームの作成など、いろんなことができるサービスがあります。 何かちょっとした事業やサークル活動など企画したとき、かなり役に立ちそうです。 必要になった時のために、アカウントだけ作っておくのも良いでしょう。 WUFOOでできること-機能一覧 １．ドラッグ＆ドロップで入力フォームを作成 ・名前、住所や電話番号、長文入力欄など、テキスト入力形式だけではなく、ドロップダウンリストやラジオボタンなど、あらゆるタイプの入力カラムを作成できます。作り方によっては、アンケートなどいろんな用途がありそうです ２．入力データのチェック ・入力したデータを送信してもらう際に、電話番号なら数字のみが入力されているか、メールならアルファベットか、などの入力チェックをしてくれるので、データがきれいな状態に保たれます。 ３．作成したフォームの組み込み ・さらにすごいな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
住所・フリガナは自動入力すべし！ フォームで使えるライブラリまとめ／15か条の12 | 勝手にEFO分析-エントリーフォーム改善
http://www.designwalker.com/2010/06/jquery-forms.html
【WordPress】お問い合わせ内容も管理画面で管理できてトレビア〜ンなフォームプラグインinquiry form creator | バシャログ。
お問合せフォームをドラッグ＆ドロップで作成できるがプログラムは有料の「FormBakery」 | WEBマーケティング ブログの日記
YouTube人気急上昇