[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
第2回 アクションを起こしてもらえるフォームのポイントは？ | gihyo.jp
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか？ CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか？ そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
フォームの「ガッカリ離脱」を防いでコンバージョン率UP！ 送信後エラー・ゼロ作戦／15か条の7 | 勝手にEFO分析-エントリーフォーム改善
フォームの送信ボタンをクリックしたとき、エラーが表示されたらガッカリしてしまいますよね。そうしたことが原因の「ガッカリ離脱」を防ぐために、エラーがない状態になるようにユーザーを導き、確認画面、完了画面に進んでもらうことが、完了率アップには極めて重要です。今回は、入力項目ごとに、ユーザーが入力した内容がフォームの求める形式になっているようにするための改善ポイントをご紹介します。 この記事では、入力フォームを改善して入力完了率を上げる！エントリーフォーム最適化15か条の【第7条】「入力エラーをリアルタイムで伝えるべし」をご紹介します。リンクをクリックするとこの記事下のまとめに飛びます。 「ガッカリ離脱」を未然に防いで、入力完了率アップをしようエントリーフォームにひと通り入力を終えて「確認／完了ページ」へ進もうとしたのに、エラーメッセージがでてガッカリした経験はありませんか？ ガッカリしたユーザ
入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス
Janko at warp speedのエントリーから、フォームの入力時に、ラベルと入力箇所をハイライトして、より分かりやすくするスクリプトを紹介します。 Building a better web forms: Context highlighting using jQuery デモ デモでは残念ながら、labelは使用されておらず、class名「row」のdivで囲まれた範囲にハイライトが適用する仕様になっています。 ハイライトする箇所は、ラベルと入力箇所のほかにも、そのグループ全体をハイライトすることも可能です。 Context highlightingはjQueryのプラグインのため、動作にはjquery.jsが必要です。 また、上記と同じエフェクトを実装するスタイルシートが別サイトで紹介されています。
超簡単！WordPressのContact form7でスパムメールをブロックする方法
Contact form7を使ってるとスパムメールが多い… こんにちは、Webマーケッターの荒木です。 Contact form7を使っていると、スパムメールがめちゃくちゃ来ませんか？ このサイトでもContact form7を使っているのですが、スパムメールが毎日のように来てました。 多い時には30通くらい来る時があって、これを処理するだけでも非常にストレスです。 面倒くさくなって放置していると、たまに大事なメールもあったりして、焦るときがあります。 同じようなストレスを感じている方もいると思いますので、今回はContact form7でスパムメールをブロックする方法をご紹介します。 超簡単ですので、是非やってみて下さい。 まずContact form7の設定画面を開きます。 「フォーム」の[タグの作成]をクリックして、[承認の確認]を選択します。 表示されているショートコードを左のフォ
[Google調べ] 入力フォームの最適化のために必須な4つの設定
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
![[Google調べ] 入力フォームの最適化のために必須な4つの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/f00f4804fe59acd36d8e9d02e50d10db7dc9a119/height=288;version=1;width=512/https%3A%2F%2Fwww.suzukikenichi.com%2Fblog%2Fwp-content%2Fuploads%2Fsplash_1200_675.png)
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム32選
通販での会員登録の際などに名前やメールアドレスといった個人情報を入力することになる「メールフォーム」ですが、ウェブサイトのデザインに比べてあまり凝っていないような気がしている人も多いのではないでしょうか。 ここでは、見ているだけで楽しめるような、オシャレで創造性にあふれたメールフォームを32種類集めています。どのサイトもデザイン性に優れているので、これなら面倒になりがちなメールフォームの入力作業も退屈せずに済みそうです。 メールフォーム32選は以下から。01：ArtFlavours 02：VISMAAd 03：Christian Sparrow 04：Justdot 05：The Spray Studio 06：Ryan Scherf 07：Sandalias XTR 08：SVN2FTP 09：Wing Cheng 10：Denise Chandler 11:Needle 12：fabr
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
入力フォームをユーザーフレンドリーにする便利なJSプラグイン4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 私がメンバー写真に使っている(｀・ω・´)クッションが思った以上に縦に細くて個人的にツボった今日この頃です。 今回は入力フォームを実装する際に入れておくとちょっと便利になるJavaScriptのプラグインを4つご紹介します。 jQuery Label Better http://www.thepetedesign.com/demos/label_better_demo.html form部品にフォーカスを当てるとplaceholderがふわっと上に移動するプラグイン。 全体的に動きのあるWebサイトを作るときには活躍してくれそうです。 formatter.js http://firstopinion.github.io/formatter.js/ 電話番号やクレジットカード番号など、パターンのある数列を1つのform部品内で扱えるようになるプラグイン
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」:phpspot開発日誌
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 2014年01月15日- nghuuphuoc/bootstrapvalidator GitHub Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 BootstrapなサイトでのJSベースでのフォームバリデーションを実装できます。 Emailやクレジットカード等のよく使いそうなバリデーションや長さチェック等一般的なものまで実装されています。 リアルタイムバリデーションで使い勝手をよくしたい場合の１つの選択肢として覚えておいても良さそう 関連エントリ Bootstrapなサイトで使える星形レーティングプラグイン Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 フリーで使えるフラットでハ
jQueryプラグイン 50
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いろいろなサイトのフォームのログインを集めた -Login Forms Design Showcase
[CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee
入力フォームは「1000×550px」で作る！ 1画面に収めて直帰率を減らす／15か条の3 | 勝手にEFO分析-エントリーフォーム改善