サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの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はかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ! サンプルソース(ラジオボタン) HTML [html] 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力して
サンプルと機能 → Sample 1:未入力項目があると警告する テキスト領域やテキストエリアに未入力項目があった場合、送信時に警告をします。 入力必須項目は自由に設定することができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:未入力項目があると警告する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 未入力項目をチェックする function chValie() { // 入力必須項目(「,」で区切って追加可能) ess = new Array("email", "name", "comment");
皆さんこんにちは。ギャプライズ鎌田(@kamatec)です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1:ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
フォームの送信ボタンをクリックしたとき、エラーが表示されたらガッカリしてしまいますよね。そうしたことが原因の「ガッカリ離脱」を防ぐために、エラーがない状態になるようにユーザーを導き、確認画面、完了画面に進んでもらうことが、完了率アップには極めて重要です。今回は、入力項目ごとに、ユーザーが入力した内容がフォームの求める形式になっているようにするための改善ポイントをご紹介します。 この記事では、入力フォームを改善して入力完了率を上げる!エントリーフォーム最適化15か条の【第7条】「入力エラーをリアルタイムで伝えるべし」をご紹介します。リンクをクリックするとこの記事下のまとめに飛びます。 「ガッカリ離脱」を未然に防いで、入力完了率アップをしようエントリーフォームにひと通り入力を終えて「確認/完了ページ」へ進もうとしたのに、エラーメッセージがでてガッカリした経験はありませんか? ガッカリしたユーザ
テキストボックスが3つあります。 それら全てに文字が入力されていないと送信ボタンがグレーアウトして作動しなくなっています。 逆に全てのテキストボックスに文字が入力されていればクリックできるようになります。 サンプルコード サンプルコード 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
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
最近では、エントリーフォーム最適化(EFO)という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
文字数ではなく、バイト数を数える処理です。 文字列を1文字ずつ確認し、1バイト文字の場合は1を足し、2バイト文字の場合は2を足した合計を返します。 /**************************************************************** * バイト数を数える * * 引数 : 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に自由度の高いフォームを簡単に複数設置することができ、なおかつフォーム作成はドラッグ&ドロップによる直感的なレイアウトが可能なので、カスタマイズの専門的な知識は不要。また、控えメール送信機能や、受付データをCSVファイルでダウンロードする機能もあり、さらにはアクセス数やエラーログのアクセスレポート機能、そしてフォームの稼動状態を定期的にチェックして管理者にメール通知する死活監視機能までが付いているというかなり高機能なフォーム作成プラグインがこの「A-Form」です。 詳細は以下から。 A-Form:MovableTypeにフォーム設置できるMTプラグイン|Web制作のアークウェブ http://www.ark-web.jp/movabletype/ 以下からダウンロードできます。 A-Formダウンロードフォーム:MovableTypeにフォーム設置できるMTプラグ
WUFOO(ウーフー)とは? 無料で自分専用の入力フォームの作成など、いろんなことができるサービスがあります。 何かちょっとした事業やサークル活動など企画したとき、かなり役に立ちそうです。 必要になった時のために、アカウントだけ作っておくのも良いでしょう。 WUFOOでできること-機能一覧 1.ドラッグ&ドロップで入力フォームを作成 ・名前、住所や電話番号、長文入力欄など、テキスト入力形式だけではなく、ドロップダウンリストやラジオボタンなど、あらゆるタイプの入力カラムを作成できます。作り方によっては、アンケートなどいろんな用途がありそうです 2.入力データのチェック ・入力したデータを送信してもらう際に、電話番号なら数字のみが入力されているか、メールならアルファベットか、などの入力チェックをしてくれるので、データがきれいな状態に保たれます。 3.作成したフォームの組み込み ・さらにすごいな
FormBakeryはフォーム作成を支援してくれるサービスです。 お問い合わせ欄などに利用する「フォーム」がありますが、 ドラッグ&ドロップで必要な機能を並べるだけでHTMLコードを生成してくれます。 以下に使ってみた様子を載せておきます。 まず「FormBakery」にアクセスしましょう。 ログインなど不要で、アクセス後すぐに利用できますよ。 このように必要な機能をドラッグ&ドロップで配置し、 詳細を記入していきます。 実際のフォームがイメージできるのでわかりやすいですね。 あとは「Export」より、HTMLコードをコピーすれば完了。 お好きな場所にペーストしてフォームを利用しましょう。 HTMLコードを打ってフォームを作成するのが煩わしい方は是非ご活用下さい!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く