問い合わせフォームはもういらない。無料の多言語チャットBOX『Speaklyn』がヤバイ | Ledge.ai
こんにちは。イイノです。 ほとんど全てのサイトで必要で、CVR直結なため色々と頭を悩ませることが多いお問い合わせフォーム。 ユーザーとの接点だし、すごく重要なのは認識してるでも外部サービスを使うと値段が高い、他言語対応していないモノが多いじゃあ自前で作るわ、って思うと設計とかめんどくさいし時間かかるどうせ作るならユーザー情報はしっかり欲しいけど、項目数多いと離脱率高くなるしとかとか。 ユーザーからしてみてもとにかく面倒なんですよね。フォームに入力するのが楽しいって人いないですし。 EFOツールやらABテストツールやらを駆使して改善を繰り返すのもコストがものすごいしちょっと怖い…。 と、そんな悩みをまとめて解決できるんじゃないかと思える、【無料】チャット問い合わせサービスを発見しちゃいました。 企業FBページと直結！無料＆多言語対応の埋込み型チャットボックス『speaklyn』 これです。s
登録数2倍にしてと言われた時の正しい対処法
2014年夏、40日でデイリーの登録数を2倍にしたプロジェクトをまとめたプレゼンです。Read less
Googleフォームをサイトに埋め込む場合の手順
昨日のGoogleカレンダーに引き続き、これまたよくある「Googleフォームをサイトに埋め込む手順」を説明します。 まず、Googleフォームを利用するメリットですが、大きく分けると以下の3つが考えられます。 Googleフォームをサイトに埋め込むメリット プログラムが動かないサーバーでも設置できる プログラムの知識がなくてもサイトにフォームを設置できる フォームの回答をGoogleスプレッドシートに蓄積できるので、あとで一覧で確認出来る メリットは結構大きいので、活用される場合も多いです。 では実際にご自身で設置する手順を紹介します。 具体的には、以下の4つの手順を踏むことで利用いただけます。 Googleカレンダー同様に、埋め込み後はサイトを変更する必要はなく、Googleフォームを変更する事でサイトも自動的に変更されます。 Googleフォームを作成する まずはフォーム自体の作成で
お問い合わせフォームの離脱率を減少させる為の対策について
サイトの成果には色々な指標があるのですが、最も多いパターンは「お問い合わせ」ではないでしょうか。 実際にお問い合わせをしていただく事で売上につながるわけですし、お問い合わせページは運営者視点で考えるとサイトで最も重要なものであるかもしれません。 であれば、そこにはきちんとした対策が必要です。 対策には色々ありますが、まずは比較的簡単にできる対策方法をいくつか紹介します。 以下の方法は地味ですが、ちょっとした配慮でフォームの離脱率を改善させる事が出来る、機会損失を防ぐ事が出来る対策です。 どちらかというとPCよりもスマートフォンやタブレットでフォームを入力してもらう際により便利になる方法です。 ただし、これをすると必ず結果が出るとかそういう事ではありませんので、過信は禁物です。 あくまでも方法の一つとして知っておき、実際には自分のサイトでどうなのかを考えて導入するかどうかを考えるという事は必
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
必須チェックの可変対応方法 | ブログ | a-blog cms developer
この記事は公開日より10年以上経過しているため、現在の内容と異なる可能性があります。 お問い合わせフォームなどの入力項目で、チェックボックスの「その他」にチェックをした場合は、その他の内容を必須項目にして、その他にチェックを入れた場合は内容も入れてください。とするケースがあります。 そのやり方を2例紹介します。 JavaScript（jQuery）を使う方法 JavaScriptを使って、「その他」がチェックされた場合に、a-blog cmsの必須項目を指定しているinput要素（ input type="hidden" name="elsetext:v#required" ）を有効にして実現します。チェックが変更された時に戻すことにも対応しています。 <tr> <th>クリスマスに欲しいもの</th> <td> <label class="acms-form-radio"> <input
【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法｜MarTechLab（マーテックラボ）
皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1：ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
すてきな入力フォームを作るために調べてみたこと - console.blog(self);
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
無料でできる入力フォーム最適化 アクセス解析＋FormAnalyticsでコンバージョン率アップを狙う！
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
高機能ライブラリ「jQuery」とそのPlugin「Validation」 - すぎゃーんメモ
非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。 jQuery Pluginが豊富に存在する、というのも人気の理由のようで。 formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。 bassistance.de » jQuery plugin: Validation 忘れてしまわないうちにメモっておこう。 最も簡単なサンプル それぞれ上記リンクからダウンロードして、「js」というディレクトリに放り込んでおいた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>title</title> <script type="te
紫水晶の和: jQuery validation plugin について（その２） rules: methodsの補足
jQuery validation plugin について（その１）でメッセージの日本語化をする時に、Methods:を参考にさせてもらいました。参考情報として、補足しておきます。●日付チェック dateISO(="YYYY-MM-DD"チェック) dateDE（="DD.MM.YYYY"チェック） dateは評価対象に日付型を設定しているので、正しい日付か見ています。 dateISOとdateDEは、数値と区切り文字のパターンマッチで評価しています。 したがって、"9999-99-99"や"99.99.9999"という値がtrueと認識されます。●数値チェック numberDE(="000 000 000,00"チェック ・・・空白3桁区切り、カンマ少数点) numberが我々に馴染みのあるカンマ3桁区切り、少数点の書式チェックです。 numberDEはサイトを参照するかぎり、germ
フォームのユーザビリティを再考してコンバージョンを向上
twitter facebook hatena google pocket お問い合わせフォーム、エントリーフォームなどは、ユーザーが能動・積極的に行動する数少ない場です。 このような潜在一隅の機会を逃していませんか？ フォームについて以下のようなデータがあります。 「申し込みフォームに入力し始めた人の54％が入力を途中でやめている」 （引用：申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】） ターゲット層のITリテラシーなども考慮して、サイトのフォームについて考える必要があるのではないでしょうか。 今回はそんな感じでフォームについて考えてみたいと思います。 sponsors フォームの長さ フォームが長いのを見るだけで、ページから離脱する人もいます。 項目を減らしたり、必須項目をなくすなど配慮が求められます。 極端な話で言えば、E-mailアドレスのみ入力
セマンティックで使いやすいフォームを制作するための習作
ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。 20+ HTML Forms Best Practices for Beginners 下記は、その意訳です。 1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。 セマンティック アクセシビリティ ファンクショナリティ デザイン 結論 セマンティック 1. fieldsetを使用 ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。 <textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" /> <span>City</sp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
screw-axis.com