MW WP Formでの条件分岐フォームのつくりかた | 名古屋市中川区のホームページ制作会社 株式会社XIA(クロスアイエー)
こんにちは。長屋です。 最近の私は、かなり根深い冷え性だということが発覚し、温活に励んでいます。 寒いと思うのが遅いのです。寒いと思った時にはもう体が冷えている。 次回、成果がでましたらオススメ温活グッズをご紹介いたします。こうご期待！！ さて、今回は、先日実装した条件分岐メールフォームについてです。 MW WP Formでの条件分岐フォームの実装方法です。 条件分岐フォームとは、選択肢によって出てくる項目が変わるメールフォームです。 ★ポイントは、 ・入力画面の項目の開閉 ・必須のON,OFF ・確認画面の表示内容 ・返信メールの出し分け 今回は、上３つについて書いていきます。 ラジオボタンの選択肢によって内容が開閉するメールフォームを作成いたしました。 1.メールフォームをtableで作成します。 そのとき、選択肢によって開閉するtrにクラス名open_trを付けます。 2.ラジオボタ
その確認画面、必要ですか？ | Accessible & Usable
公開日 : 2016年10月10日 カテゴリー : ユーザビリティ 問い合わせや資料請求などのフォームで、入力後に送信ボタンを押すと、送信前の確認画面が出てくるものがあります。 確認画面を見て、特に誤入力がなければ、もう一度送信ボタンを押して、そこで初めて送信が完了します。確認画面を見て、もし誤入力があれば、再度入力画面に戻ってから修正します。 このようなインタラクションは、2つの点で「まどろっこしい」と言えるでしょう。 入力してから送信される間に、1ステップ (余計な) 手続きが挟まれる。 確認画面で要修正箇所を見つけても、その場で修正ができない。 上記のうち、特にふたつ目はやっかいな問題です。ユーザーは確認画面で見つけた要修正個所 (と修正が必要な理由) を、実際に入力画面に戻って修正するまで、記憶しておかなければならないからです。 確認画面で修正できるようにすればよいのでは？と思われ
【Javascript】ファイルダウンロード後にページ遷移させる
エクセルファイルなど、ファイルをダウンロードさせた後にページ遷移や再読み込みを行うことがありました。 PHPの処理だけでは、ダウンロードの際にheaderを使用しているため、 ひとつの処理のなかでページ遷移を行うことができません。 javascript(今回はjQueryで記述)と Cookie を利用することでファイルダウンロード後に処理を行うことができます。 処理の順番としては、 ①クッキーの発行（ダウンロードフラグをたてる） ②ファイルダウンロード ③ダウンロードフラグがある場合、クッキー情報を削除してページ遷移 サンプルコードは以下。 PHPでクッキーを発行する setcookie ("downloaded","yes","","/"); // ファイルダウンロード処理 HTML <form> <input type="submit" value="ダウンロード" /> </for
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
iOSで入力フォームでズームするのを防ぐ方法
2017/06/21 iOSは、入力フォームにフォーカスすると、自動でビューポート(ズーム値)を調整します。そのことで無駄に画面を拡大してしまい、入力後に元に戻さないといけません。この自動調整を防ぐには、フォントサイズを16px以上に設定します。 サンプルコードiPhoneやiPadなどiOSでは、入力フォームのフォントサイズが16px未満だと、入力時に文字を大きく見せようとお節介な自動調整をしてくれます。Androidしか持っていないウェブ制作者も、「フォームの文字は16px以上にしておく」ということを覚えておきましょう。 input { font-size: 16px ; }デモ上の入力フォームは、フォントサイズを16px以上に設定しているので、フォーカスしても画面が拡大しません。iPhoneなどでお試し下さい。 <!-- このコードは編集できます。 --> <!DOCTYPE htm
どんなフォームにも使えるjQueryのフォームバリデーション「exValidation」の複雑な組み合わせサンプル│ISC開発者ブログ
いやぁーーーー すばらしいものを提供されている方がいらっしゃってとても助かっています。 これです。 ↓↓↓ どんなフォームにも使えるjQueryのフォームバリデーション exValidation エラー項目にはバルーン表示でエラー通知してくれるというナウい（死語）もの。 このexValidationを利用して開発中のフォームに当てはめてみたんですが・・・ あ、この条件下では・・・ここは必須で・・・で、こうするとこの項目自体見えなくなって・・・・っていう感じになってしまい なにをどーして良いのやら・・・という風になってしまいました。 そこで、いろいろ試しに試して出来たのがこのサンプルです。 exValidationサンプル まず、御覧頂いて・・・っと このフォームは下記のような動作をするものです。 １．まずはユーザーに区分を入力してもらう ２．入力してもらった区分によって異なる項目のフォーム
ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
jQuery Custom Select Box Plugin - jQuery.customSelect()
jQuery .customSelect()The ridiculously lightweight, semi-native select box styling plugin What it be This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This conc
セレクトメニューを自由にデザインできる customSelect.js
「customSelect.js」は、CSSだけでは変更できない、フォームのセレクトメニューのデザインを簡単にカスタマイズできるプラグインです。 標準スタイルはシンプルですが、自分で用意したデザインも適用できます。軽量で拡張しやすいので、セレクトメニューのデザインをカスタマイズするにはベストなプラグインです。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、customSelect.js を配布ページからダウンロードしましょう。customSelect.js は GitHub で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と customSelect.js を、利用するWebページの head の閉じタグ直前に読み込みます。このプラグインはページの読み込みが完了する前に読み込む必要があ
jQueryプラグイン 50
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
FancySelect » Octopus Code
A better select for discerning web developers everywhere.FancySelect is easy to use. Just target any select element on the page, and call .fancySelect() on it. If the select has an option with no value, it'll be used as a sort of placeholder text. By default, FancySelect uses native selects and styles only the trigger on iOS devices. To override this, pass an object with forceiOS set to true when
404 Not Found | Atsushi Ezura
Atsushi Ezura Photography Thank you for coming my photography site. This is Atsushi Ezura Photography. Unfortunately, your access page has no here. Please click here to go to the top of my photography’s site. “Atsushi Ezura Photography”サイトへようこそ。アクセスいただいたページは存在いたしません。恐れ入りますが、こちらをクリックして、ぜひ当方の写真をご覧になって行ってください。 女性モデル募集中 当サイトでは、ポートレイト写真・作品撮りの女性モデルを募集しています。 未経験・初心者大歓迎です。 学生さんやOLさんなど、職業は一切問いません(これまでに多くの未
Copyright表示不要のPHP製汎用メールフォームシステム「TransmitMail」
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
Contact Form 7のデータをデータベースに保存するWPプラグイン
”Contact Form 7”はWordPressで標準ともなっているメールフォームのプラグインです。 ここで入力されたデータをデータベースに保存して2次利用、3次利用しようというのが、ここで紹介する”Contact Form 7 to Database Extension”というプラグインです。 上図で見れるように入力されたデータは表形式として管理画面で見れるだけでなく、編集・削除なども可能です。利用期間が終わったらテーブルごと削除してデータベースの負荷を無くする事も出来ます。 ＜機 能＞ データをCSVデータなどでエクスポート出来る。様々なクエリー（条件をつけた絞り込み）を使ってWP上に結果を表示できる。＜利用方法＞ 会員リストの作成・・・会員に情報を入力してもらい、それをデータとして保存できる。集められたデータのクロス集計などをＷＰ上でリアルタイムに自動表示できる。アンケート集計・
お問い合わせフォームのWordPressプラグイン、Trust Formはもっと素敵だった。 / Maka-Veli .com
前回の続編です。 inquiry form creatorの後継のようですね。 色々変わっているので一応書いておきます。 inquiry form と比較 確認画面・サンキュー画面の文言を細かく変更可能 以前はフォーム部分だけだったと思うんですけど、冒頭に文言や画像を入れられるようになっていますね。これにより、フォームの説明や、サンキュー画面で他ページへの誘導などが可能に。 「必須マーク」など、細かく設定可能 画像なんかも指定できます。 CSSが管理画面上で編集可能 akismetと連動してスパム排除 各画面のHTMLが自由に編集可能 テーマフォルダにtrust-form-tpl-.php等と置いておけば読み込んでくれるそうです。 それぞれ「trust_form_show_input()」「trust_form_show_confirm()」「trust_form_show_f
Contact Form 7 でラジオボタンを必須にする
みんな大好き Contact Form 7！駄菓子菓子 だがしかし、そのファースト・マトリックスが如き美しいアーキテクチャは、多くの場合、日本の悪しき慣習だったりクライアントのひとことだったり、ディレクターの思いつきによってメタメタにされてしまうのであった。。。 さて、今回は ラジオボタン Contact Form 7 はなんでラジオボタンを必須にできないの？とみなさんおっしゃいます。ソレに対して Contact Form 7 のチェックボックス、ラジオボタン、メニュー のページでは、HTML の仕様 を見てみなはれと書かれています。Web 業界の中の人で仕様をちゃんと読んで仕事をする人の割合はだいたい消費税くらいなもんでしょうか。早く10%行くといいですね。 で、仕様を読んでみると「ラジオボタンてどれかひとつが選択されてなアカンやん。全部 OFF やったらブラウザがはじめのヤツを ON
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
e1blue.net
http://www.designwalker.com/2010/06/jquery-forms.html
myblog – myblog
【WordPress】お問い合わせ内容も管理画面で管理できてトレビア〜ンなフォームプラグインinquiry form creator | バシャログ。
