phiary
はじめに 『form 値 取得』とかで検索すると for 文で一通りチェックして... jQuery で要素を取得して val() で... ってのがヒットしますよね? これらの方法でも全然問題ないんですが, ピュアな JavaScript でもわりとスマートに値を取得, 設定することができます. っということで今回は, フォーム系要素の値をピュアな JavaScript で取得, 設定する方法を一通りまとめてみました. よかったら参考にしてください. デモ まずはデモです. 一通り form を並べてそれぞれ設定, 取得を行っています. console に各要素の値が表示されているのがわかるかと思います. コード デモのコードです. HTML <form name='mainForm'> <div> <h3>text</h3> <input name='_text' type='text
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
フロントエンドコーディングのみで簡単にセキュアなお問い合わせフォームが作れるようになりました | Milkcocoa Engineers' Blog
Webページへのコード貼り付け ※追記(2016-02-18)：CDNから読み込むJavaScriptのコードを修正しました（ファイル名も変えています、contactform.min.js→milkform.min.js）。具体的にはsubmit()関数を使って送信するタイミングを自分で決められるようにしました。 milkcocoa.jsとmilkform.jsをCDNから読み込んで、formタグにmilkform属性を含ませ、JavaScript内でvar milkform = new MilkForm('あなたのapp_id');と書けば利用開始できます。milkform.submit()でデータの送信が出来て、ロード時、送信成功時、失敗時のコールバックも設定できます。 <form milkform> <input type="text" name="e-mail"> <input t
ドラッグアンドドロップで簡単にフォームを作れるjQueryプラグイン
ドラッグアンドドロップでフォームを作れるWebサービスはたくさんあるんですが、フォームを設置するjQueryプラグインはそんなにないですよね。 そんなわけで今回はそんなD&Dでフォームを作れるようにするためのプラグインのご紹介です。 こういうのを実装できます。 ドラッグアンドドロップでフォームを組み立てる。 編集は超らくちん。 View XMLをクリックすればそのまま使えるコードがでてきます。 実際は触ってみるのが一番わかり易いと思います。 jQuery formBuilder | Drag & Drop Form Creation ダウンロード後、圧縮ファイルを解凍して、demoフォルダの中のindex.htmlを、コーダーで開いてみましょう。 大体の仕様はその中を見ればほぼわかると思いまうs。
お申し込みを1割増やしたフォーム改善の話
2014年2月4日にアタラ合同会社と共催しましたセミナー「DMPとアトリビューションから見えてくる新しいCRMのかたち」でのディレクタス講演スライドです。 セミナー詳細ページ：http://directus.co.jp/news/seminar/140204/ プライベートDMPのCRM活用に関する最新動向とともに、クロスチャネル・キャンペーンマネジメント(CCCM)等を利用して自動化されたCRM型コミュニケーションの最新事例などについてもご紹介しています。 ディレクタスCCCMサービス紹介ページ：http://directus.co.jp/service/cross_channel_campaign_management/
（翻訳）最高のフォームを作る方法 ー よくあるフォームデザインの問題に対処するためのクイックガイド - give IT a try
## はじめに 先日ネットを見てると、こんな海外記事を見つけました。 [How To Build An Awesome Form](https://medium.com/@kubachrzecijanek/how-to-build-an-awesome-form-1e9b2c1bd00d#.9bxu4a1y9) デザイン関連のWeb記事はよく見かけますが、フォームに特化した記事はそれほど多くない気がします。 仕事柄、フォームを作ることは結構よくあるので、自分のデザインの勉強を兼ねてまるまる翻訳してみました。 ### 翻訳の方針について 翻訳は日本語としての読みやすさを重視してところどころ意訳しています。 もし完全に間違った訳になっていたり、意訳しすぎて原文のニュアンスが変わってしまったりしているところがあれば、コメント等でやさしく指摘してやってください。 それでは以下が記事の翻訳です。 #
ラジオボタンをスイッチデザインに変換するjQueryプラグイン
味気ないラジオボタンをスイッチデザインに変換してくれるjQueryプラグインです。 それ以上でもそれ以下でも無いのですが・・・。 jQueryプラグインを読み込むだけですぐに変換 jQueryプラグインを読みこめば、ラジオボタンが以下のようになります。 サンプルデモは以下に http://ahmad-sa3d.github.io/rcswitcher/ ダウンロードは以下からできます。index.html ファイルのソースを見れば、特に設定などの仕様を読まなくても直ぐにわかるかと思います。 ahmad-sa3d/rcswitcher · GitHub もう少しデザインにこだわりたい人 ボタンを手軽に変換出来るjQueryプラグインは他にも結構ありますが、こちらもオススメです。 fronteed/icheck · GitHub 是非お試しあれ。 それでは、また。
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
超簡単！WordPressのContact form7でスパムメールをブロックする方法
Contact form7を使ってるとスパムメールが多い… こんにちは、Webマーケッターの荒木です。 Contact form7を使っていると、スパムメールがめちゃくちゃ来ませんか？ このサイトでもContact form7を使っているのですが、スパムメールが毎日のように来てました。 多い時には30通くらい来る時があって、これを処理するだけでも非常にストレスです。 面倒くさくなって放置していると、たまに大事なメールもあったりして、焦るときがあります。 同じようなストレスを感じている方もいると思いますので、今回はContact form7でスパムメールをブロックする方法をご紹介します。 超簡単ですので、是非やってみて下さい。 まずContact form7の設定画面を開きます。 「フォーム」の[タグの作成]をクリックして、[承認の確認]を選択します。 表示されているショートコードを左のフォ
15分でビジネスサイトを構築！WordPressの”中身”のテンプレートが便利！
みなさんご無沙汰しています。WPD-Bordeaux ことBizVektorの石川です。 さて、WordPressでビジネス向けのウェブサイトをつくろうとすると、最近では非常に優秀な無料WordPressテーマもあるようですが、そういった高機能なテーマがあったとしても サービス紹介や会社案内などいろいろなページを自分で作成 ナビゲーションを作成・設定 問い合わせフォームを設定 など、何だかんだと地味な設定作業が結構あり、どうしてもある程度時間がかかってしまいます。 そこで、今回ご紹介するのは、WordPressでつくるコーポレートサイト向けコンテンツのxmlテンプレートです。 これを使うと、WordPressがインストール済みの状態であれば、おおよそ15分程度で下記のデモサイトの状態まで構築出来ます。 デモサイトを見る 今までなかった”中身”のテンプレート デザインや機能のテンプレート（テ
[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。 これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。 で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。 デモのキャプチャ ※デモはダウンロードファイルに含まれています。 アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
確認画面と完了画面が最初から付いているお問い合わせメールフォームプラグイン「Trust Form」
お問い合わせメールフォーム用のWordPressプラグインと言えば Contact Form 7 が有名ですが、確認画面が無かったり完了画面も自分で別途設定しないといけないなど、運用管理面でやや難があります。 確認画面や完了画面が最初から用意されているお問い合わせメールフォームを使いたいのであれば、機能面でも Contact Form 7 と遜色ないプラグイン Trust Form がおすすめです。 確認画面や完了画面の編集が出来る他、管理画面上で受信したお問い合わせメールを一覧で表示できます。 Trust Form の機能と特徴 Trust Form をさくっと使ってみた感触ですが、このプラグインの主な機能と特徴は以下の通りです。 ・「確認画面」「完了画面」が標準で実装されているので、企業向けサイトでも（セキュリティは別の話として）導入のハードルが低そう。 ・フォームは複数用意でき、それ
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」:phpspot開発日誌
Parsley.js 属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」 <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単にカッコよくできちゃうフレームワークです。 例えば、<input data-type="email">って記述しておけば、そのinputにメールアドレス以外が入力されていればエラーを検出出来ます。 emailだけでなく、数値、URL、アルファベット等のチェックに対応。その他、最低・最高の長さの設定や、必須項目、範囲設定、正規表現、リモートURLによるパラメータチェックができ、とにかくバリデーションするなら全体的に機能が詰まっています。サンプルサイトもBootstrapベースで作られていて、Bootstrapとも相性が良さそう。 FE側でのバリデーションをスマートにやりたいって方は評価してみてもよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPress】続・お問い合わせ履歴も管理できてCSVも出力できるトレビア〜ンなフォームプラグイン Trust Form | バシャログ。
seotemplate.biz