フォーム要素のカスタマイズ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements〔ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ〕 Custom Select boxes with jquery〔アイコン入りのプルダウンメニュー〕 File Style〔参照ボタンを指定したボタン画像にする〕 jCombox: jQuery HTML Select Tag Plugin〔Select要素の拡張プラグイン〕 jQuery Custom Check Box and Radio Buttons 〔チェックボックとラジオボタンを画像化〕 jQuery Dropdown Check List〔複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューに〕 JQuery Geogoer VChecks Plugi
なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes
注意 内容については一切保証しません。 ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。 ここに書かれていることが正しいかどうかは、自身で判断して下さい。 事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。 ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか？」の議論はしません。 「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。 ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。 そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT
jqueryで属性を変更させる方法
属性とはhtmlでいうと要素で設定しているいろいろな値、 例えば：<a href="index.html"></a> 属性：href、属性値：index.html、要素：a 属性を変更できると、画像を入れ替えたり、urlを変更したり、大きさを変えたり、ホームページでの表現の幅が広がります。 attr 属性値を変更する場合 $("セレクタ").attr("変更したい属性の名前","変更後の属性値"); 例えば、 属性srcをa.jpg→b.jpgに変更する場合。 jquery $("img").attr("src","b.jpg"); html 変更前：<img src="a.jpg"> 変更後：<img src="b.jpg"> さらにたくさんの属性を変更したい時 $("セレクタ").attr({"属性名":"変更後の属性値","属性名2":"変更後の属性値"}); が使えます。 例えば、
フォームで戻るボタンを押して戻った後にリセットが効かない。 - hi-kick.design blog
入力フォーム作ってて、確認画面用意したとき 「確認画面で不備に気づき、戻って修正するときに、メンドクサイからリセットボタン押して新規に入力しなおす。」 正直こんな操作する人は稀なのですが、そうしてくださいとの要望でしたので、そうしてみることに。 「リセットボタン置いとけばいい」ということで <input type="reset" name="Submit" value="リセット"> で済めばいいのですが リセットボタンは「初期値に戻す（リセットする）」とのことなので 最初に入力画面を開いた時には「初期値」は未入力の状態だから見た目上リセットされて 確認画面から戻ってきた時は既に値が入ったときが「初期値」になってしまうので、リセットボタンを連打してもダメなんですね；； んで「リセット」じゃなくて「クリア」する方法はWebクリエーターのひとりごとさんの方法が簡単でした function cl
Trust Formを使ってみました。｜WordPressプラグイン | wald-grun/blog
wordpressのメールフォームプラグインであるTrust Formがなかなか使いやすそうなので自分用メモ。 DL先 WP公式リポジトリ Trust Form 公式サイト？ ※開発者さんのブログだと思うのですが、違ったらすみません。 設置方法 管理画面のプラグインから、新規追加でインストール可能です。またはリンク先からDLして、FTPでアップロードします。 有効化したら左メニューにTrust Formの項目が出来ていますので、管理画面を開いて設定します。 ドラッグアンドドロップで直感的に操作できます。左の設置できるフォーム一覧から右の設定エリアにドラッグしてドロップ すると、フォームになります。 それぞれの項目をクリックすると編集モードに切り替わり、項目名や、入力エリアのサイズ、必須にするか否か、バリデーションなどについて設定できます。 編集画面のタブに「確認画面」「完了画面」とあるとお
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML [html] 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力して
複雑なお問い合わせフォームを作成するプラグイン cforms II | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go
cforms II » delicious:days お問い合わせフォームを作成するプラグインとして以前、お問い合わせフォームを簡単に作成するプラグイン Contact Form 7を紹介したが、Contact Form 7は簡単にお問い合わせフォームを作成できるが、checkboxやradioボタンが使えない等の制約（最新バージョンでは使用できる）があり、複雑な質問事項を含むようなお問い合わせフォームを作成することができない。そこで、より詳細なお問い合わせフォームの作成を可能にするプラグインが、cforms IIである。 このcforms IIは現在、バージョン6.0まで更新されており、積極的に機能拡張が進められている。Formタグを使った設定はほとんどできるのではないだろうか。しかしながら、日本語の翻訳ファイルはまだないので英語で使うしかない。日本語翻訳ファイルを作成したので、cfor
フォーム要素の制御｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Ajax Username Check - Using Jquery!〔入力したユーザー名が存在するかチェック（PHP+jQuery）〕 autohelp〔フォーム要素クリックでヒントテキスト表示〕 focus fields〔テキスト入力欄にフォーカスが当てられた時に目立たせる〕 jQuery AlphaNumeric〔英数字の入力制限〕 jQuery controlled Dependent (or Cascading) Select List 2〔Select要素から連動プルダウンを自動生成〕 jQuery Impromptu〔ダイアログ、入力プロンプトのカスタマイズ〕 jQuery MultiSelect〔複数選択型プルダウンを扱いやすくする〕 jQuery plugin: Validation〔完璧なフォームの入力チェック〕 jquery.combobox〔Select要素からコン
Contact Form 7 のお問い合わせフォームの使い勝手を向上させるカスタマイズ 7選
（３）Google Analyticsのコンバージョンを設定する （２）のお問い合わせ送信完了画面を設置した上で、Google Analyticsのコンバージョンを設定します。 GoogleAnalytics管理画面よりプロファイルの設定を行います。 目標名、目標タイプを登録し、「目標の詳細」の「目標 URL」に、先に設定したお問い合わせ送信完了ページのURLを入力します。 目標プロセスを設定する場合は「目標到達プロセスのステップを追加」をクリックして必要なステップを入力し、Google Analyticsの設定を完了させます。 （４）送信完了やエラーのメッセージの表示位置をフォーム上部に変更する Contact Form 7 のお問い合わせフォームの場合、「送信」ボタンをクリックすると送信ボタンの「直下」に送信完了メッセージが表示されます。このメッセージの表示位置をフォームの「上部」に変
お問い合わせフォームのWordPressプラグインのinquiry form creatorが便利だった。 / Maka-Veli .com
有名なようですし日本人Developerさんだったので既にご存知だろうと思いますけど、使ってみてなかなか痒いところに手が届いてくれたのでご紹介。あー、これはクライアントワークで使えるなぁーと思いました。簡単なフォーム程度でOKのサイトだったらコレで十分なんじゃないでしょうか。 inquiry form creatorの便利だったところ 日本語 確認画面、サンキュー画面がある フォーム項目の追加が簡単 標準でバリデーションがけっこうある ユーザーに自動返信ができる お問い合わせ内容が管理画面上で確認できる お問い合わせ内容をCSVに落とせる と、思ったんですが、同作者さん( horike 氏) の新しい（？）フォームプラグイン Trust Form のが良さそうですね。 アップデート日時が古いからおかしいなと思ったらこんなのあったのですねー・・・orz （そういえば前にWP詳しい人がT
Contact Form 7 でラジオボタンを必須にする
みんな大好き Contact Form 7！駄菓子菓子 だがしかし、そのファースト・マトリックスが如き美しいアーキテクチャは、多くの場合、日本の悪しき慣習だったりクライアントのひとことだったり、ディレクターの思いつきによってメタメタにされてしまうのであった。。。 さて、今回は ラジオボタン Contact Form 7 はなんでラジオボタンを必須にできないの？とみなさんおっしゃいます。ソレに対して Contact Form 7 のチェックボックス、ラジオボタン、メニュー のページでは、HTML の仕様 を見てみなはれと書かれています。Web 業界の中の人で仕様をちゃんと読んで仕事をする人の割合はだいたい消費税くらいなもんでしょうか。早く10%行くといいですね。 で、仕様を読んでみると「ラジオボタンてどれかひとつが選択されてなアカンやん。全部 OFF やったらブラウザがはじめのヤツを ON
Contact Form 7のCSSやJavaScriptを止める方法
WordPress（ワードプレス）で1番有名なメールフォーム用プラグイン「Contact Form 7」が、全ページにCSSやJavaScript（ジャバスクリプト）を吐き出す問題を解決するカスタマイズ方法を紹介します。 メールフォームのプラグイン「Contact Form 7」は、全ページにCSSやJavaScriptを吐き出す仕様があるため、メールフォームは1ページしか設置していなくても、メールフォームを使用していないページのヘッダーにまで、CSSやJavaScriptが挿入されてしまう。 これは、プラグイン側ではメールフォームの設置を判定できないため、全ページにCSSやJavaScriptを吐き出すしようになっている。 これを解決するためには、CSSやJavaScriptの吐き出しを止めて、メールフォームを設置したページにだけ、CSSやJavaScriptを設置する必用がある。 では
どれが良いの？！WordPressお問い合せフォームのプラグインまとめ | necozine
wordpressのお問い合わせフォームのプラグイン、沢山あるので悩みますよね。 代表なのは「contactform7」というプラグインですが、もうちょっと何か無いかな～と思うと、ついつい調査する手間と時間をかけてしまいます・・。 今回、自身のまとめの意味も込めて、私の使ったことのあるプラグインから使ったことのないプラグインまで、色々と特徴をご紹介したいと思います。 Contact Form 7定番のContact Form 7です。 国内で有名なお問い合わせプラグイン。 ここで紹介するまでもなく情報は沢山あります。 テキストエリアのカスタマイズや、自身のメールに自動受信するメッセージ内容のカスタマイズ等、お問い合わせの機能がひと通り揃っており、シンプルで見やすく使いやすい。 実際に表示させるには、ページなど投稿する際にContactForm7独自のタグを入力してお問い合わせページとして公
JavaScript/フォーム/自動計算フォームBタイプ（消費税なし） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value; // 商品2 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; // 商品3 var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value; // 合計を計算
input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
柔軟なカスタマイズ性が魅力のフォーム生成WordPressプラグイン「MW WP Form」
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
http://www.kakunin-pl.us/2012/05/trust-form-1-2-2/