Contact Form 7でお問い合わせの次のページ(サンクスページ)を実装する方法 - ディレイマニアWordPressでお問い合わせフォームを簡単に付けられる「Contact Form 7」はインストールするだけでさくっと使える便利なプラグインです。 初期設定でもかなりいい感じなんですけども、メールを送信した後にそのページ内で「送信しました」というメッセージが出るだけなのがちょっと味気ないと感じることも。 というわけで、お問い合わせメール送信後に次のページに遷移する、いわゆる「サンクスページ」を実装する方法をご紹介します。
電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」:phpspot開発日誌
EasyType Dev 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」。 このプラグインを使うと予め指定したフォーマットで特定のインプットフィールドを初期化すると、指定の文字しか入れられないようにしつつ、背景に入力ヒントを表示させられます。 初期化を次のようにします $('#phone_number').easytype('(###) ###-####'); 入力には ###-###-#### という形式の数字しか入れられなくなります。 フィールドを分けるのも面倒ですし、かといって単なるinputをおくだけだとちょっと不親切かもしれないですね。 ifとかelseも使えるので、携帯番号でも、固定電話でも使うことはできそうです。 電話番号以外にも 2011/10/01 のような日付を入れるのにも使えます。 ソフトウェアのシリアル番号っぽい入力をしてもらうことも
HTML5とCSS3を使ったフォームデザインのチュートリアル集３０:phpspot開発日誌
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials | Splashnology HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ CSS3を使ってフォームデザインがより簡単に自由になりましたが、そのサンプル集です。 どういう事ができるのか？を知ることができ、実装の際にも参考にできます。 CSS3なしで１からつくるとなると相当大変ですが、CSS3を使うことで画像を使わずきれいなフォームが作れるのは素晴らしいですね。 関連エントリ 立体的なCSS3でデザインされた検索フォーム実装チュートリアル フォーム要素をクールにするためのjQueryプラグイン集
独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」:phpspot開発日誌
独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 2011年06月20日- Easy Select Box | Codefleet 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 独自デザインのselectというとちょっと面倒に感じてしまいますが、簡単に独自デザインにすることができます。 IEやSafari等でも動くようクロスブラウザ設計がありがたい作りです デザインの変更は次のようなCSSスプライト画像を変更すればよいだけです 初期化も非常に簡単に行えます $('#status').easySelectBox(); 関連エントリ レイアウトに関する強力なjQueryプラグイン６つ 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」
自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」:phpspot開発日誌
自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」 2011年06月16日- Auto-growing and re-sizable textarea ? Jquery Plugin - Hycus 自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」。 次のような、どんなサイトのデザインでもじゃまにならない、普通のテキストエリアの下にツマミをつけたようなテキストエリアが実装できます。 改行をうって文書が長くなろうと自動でサイズが大きくなる点も特徴。 実装は必要なライブラリを読み込んだら以下１行でOK。 対象もjQueryのセレクタで一括指定も可能。 $('#txtarea').hycustextarea(); ひょっとしてHTML5いらないんじゃないかとい
JavaScriptで入力フォームのマウス右クリック、コピー、ペーストを制御するには » sa-sa-ki.jpのblog
カテゴリー Apache (7) Apple (64) AWStats (3) bind (5) Boot Camp (2) CentOS (54) chkrootkit (2) ClamAV (3) Darwin Streaming Server (6) dovecot (9) Exec-Shield (2) FreeNAS (2) FreeSSHd (3) Google Chrome (2) Hyper-V Server 2008 R2 (7) iCal (2) IIS (7) imoten (2) INSTALL MANIAX 3 (27) Internet Explorer (1) iPhone/iPod touch/iPad (17) Keyboard (6) Linux (63) MySQL (5) NAS (11) NFS (2) NTP (2) OpenSSH (2) Op
iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々:phpspot開発日誌
iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々 2010年10月21日- HTML5/CSS3やJavaScript、Flashを使ってiPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組みを色々と調査してみました。 スマートフォンアプリを作るのであれば効率的にクロスプラットフォーム上で動く物で作りたい、というのは開発者の誰もが思うことではないでしょうか？ そんな技術の現時点でのまとめ、更にHTML5によるモバイルアプリ作成のフレームワークについても軽くまとめてみました。 Titanium Mobile HTML5/CSS3やJavaScriptベース→Native並の速度のiPhoneアプリ変換。javascriptをベースとしてアプリ開発を行うスタイルを実現する仕組み naoyaさんの「Titani
jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ:phpspot開発日誌
FormBox ? A jQuery & CSS3 Drop-Down Menu With Integrated Forms | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ メニューにカーソルを合わせるとドロップダウンメニューがアニメーションしながら現れてフォームが表示されるというUIの例と実装サンプルです。 スペースを取ることなく、コンパクトにログインフォーム等を埋めこむことが実現出来ています。 ログインしない人にとっては邪魔なブロックなので、使わない場合は最小化しておくというのはなかなか合理的なUIですね。 サイトの特性などに応じて実装すればサイトの利便性を大きく向上することができそうです。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何
checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」:phpspot開発日誌
ezMark jQuery Plugin - Stylize Checkbox and Radio Button Easily checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」。 次のようなデザインにすることが可能です。CSSをカスタマイズしてiPhoneっぽくすることも出来ます $(element).ezMark() とするだけでスタイリングできるのはいいですね。 関連エントリ フォームのユーザビリティに貢献するjQueryプラグイン ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「
クロスブラウザでのテキストエリア操作が便利になる「A-TOOLS」:phpspot開発日誌
Plugins | jQuery Plugins クロスブラウザでのテキストエリア操作が便利になる「A-TOOLS」。 A-TOOLSを使えば、textareaやinput type=text のクロスブラウザ操作が簡単にできます 選択中のテキストとテキスト開始位置、終了位置の取得 文字数の取得 テキストの置換 テキストの限界サイズを指定。文字サイズを超えた場合のコールバック関数が指定可能 キャレットの位置を調整 開始・終了位置指定で文字の選択が可能 デモページ textareaを使うような場合のユーザビリティ向上に応用することができそうですね。 １からクロスブラウザで作るとなると大変そうですが、これで簡単に実装できます。
select ボックスを大きくして選択しやすく使いやすくできるjQueryプラグイン「Mega Select」:phpspot開発日誌
select ボックスを大きくして選択しやすく使いやすくできるjQueryプラグイン「Mega Select」 2010年07月08日- Mega Select List Example select ボックスを大きくして選択しやすく使いやすくできるjQueryプラグイン「Mega Select」。 通常のselectボックスというと以下のようなおなじみのデザインです。 MegaMenuを使うと、li でのリストっぽく表示でき、クリック１回なしにそのまま内容が全て見えるのでワンクリックで選択出来ます。 あまりアイテム数が多すぎるとレイアウト的に問題が出るかもしれないのですが、そこそこのリストであれば実装することで使いやすさをUPさせることができそうですね。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」:phpspot開発日誌
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」 2010年06月23日- slideLock Demo iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」。 UIとしては次のような感じで、スライダーを右にドラッグ＆ドロップするとsubmitボタンがactiveになってフォームの送信が可能になります。 フォームの送信を厳重にしたい場合と、隠しパラメータを受け取って照合することでスパムの防止に使えるっぽいです。 ロック解除しないと送信できないので、送信前に確認の意味を込めたUIとして使うと実用的に利用できそうですね。 初期化は次のように行います。 $("#contact").slideLock({ labelText: "Slide to Unlock:", // ラベル
テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」:phpspot開発日誌
テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」 2010年06月22日- jQuery.elastic テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」。 普通テキストエリアというと、サイズは固定で、長い文書を入れると最初の方にいれたテキストがわかりにくくなってしまいますが、改行を入れると自動でテキストエリアが広がるあの便利な機能をjQueryで実現出来ます。 テキストサイズに応じて伸縮します。 改行を入れると縦に広がります。最初に入れた文書も確認しつつ長文を入力できます。 実装の方法は無茶苦茶簡単。 $('textarea').elastic(); textareaはデフォルトでこの動きになって欲しいですが、このプラグインがあれば１行で全てのt
チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーション実装チュートリアル:phpspot開発日誌
チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーション実装チュートリアル 2010年06月14日- Sliding Checkbox Actions Menu with jQuery | Codrops チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーションをjQueryで実装するチュートリアルです。 チェックボックスが多数あって、削除なのか、OKなのかというアクションを複数選ぶようなインタフェースがある場合は参考にしてみるとよさそう。 なかなかカッコよくて合理的なナビゲーションになっています。 沢山チェックボックスがあるとして、ページの上部にアニメーションしながらナビゲーションメニューが追従してくれます。 スキンのCSSがなかなかカッコよくていい感じです。カッコいいだけではなくて、機能性にも優れています。 左部分にはチェックしたアイテム
１個目の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プラグインによって、比較的簡単に実装できま
何時何分を入力してもらう際に便利に使えるjQueryプラグイン「Timebox」:phpspot開発日誌
AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「Avia... 次の記事 ≫：2010年5月31日 管理人のブックマーク PowerHour Development Blog jQuery Timebox Plugin 何時何分を入力してもらう際に便利に使えるjQueryプラグイン「Timebox」。 <input type="text">な要素の中に何時何分というのを直接入れてもらう場合に使えます。 例えば、16 を入力すると、16:00 に変換され、152 と入力すると 1:52 として解釈され、テキストボックスの内容が自動で置換されます。 意味のないアルファベットなどを入れると 00:00 に変換されます。変換例は次の通り 初期化方法は、次のように $(element).timebox() で初期化するだけです。 <input id="myTimebox
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」:phpspot開発日誌
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」 2010年03月25日- jQuery Plugin: Give Your Characters a NobleCount The Product Guy テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」。 今、テキストエリア内に何文字はいっているのか？というのは、文字数制限をしているフォームにとっては重要なユーザビリティになりますね。 送信ボタンを押した後に、文字数オーバーです、というのは不親切ですしサーバに無駄なリクエストが増えることになります。 Twitter では残り文字数を表示していますが、これをjQueryで１行で実装してしまえるのがこのプラグイン。 $(element).NobleCount('#ta
WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」:phpspot開発日誌
pForm - Free HTML Form Builder - Create Web Form Template Online WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」。 出来上がるフォームのなかなかのカッコ良さで十分実用できると思います。 まずは多数あるサンプルカラーの中から好きな色合いを選びます。 フォームに追加したい、テキストボックスやドロップダウンなどのクリックで追加していきます。 追加したらその場でサクサク反映されます。 で「Save Form」ボタンを押します。 たったこれだけのステップで完成しました。 ダウンロードしたフォームにはCSS、JavaScriptが含まれていてなかなかカッコいいものになってます。 HTML部分はサクッと終わってしまうので、あとはこれをカスタマイズして送信できるようにすればいいだけです。 残念ながら、P
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHP Time Stamp Function.