Contactable


Description: タブをクリックするとスライドしながら出現するコンタクトフォームを実装出来ます。フィードバック用にもいいですね。
Sample: demo
Tutorial: Contactable
License: -
WordPress Plugin: Magic Contact

Note

			$('div#contactable').toggle(function() {
				$('#overlay').css({display: 'block'});
				$(this).animate({"marginLeft": "-=5px"}, "fast");
				$('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
				$(this).animate({"marginLeft": "+=387px"}, "slow");
				$('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
			},
			function() {
				$('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
				$(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
				$('#overlay').css({display: 'none'});
			});

位置の調整とか。

name: 'Name',
 email: 'Email',
 message : 'Message',
 subject : 'A contactable message',
 recievedMsg : 'Thankyou for your message',
 notRecievedMsg : 'Sorry, your message could not be sent, try again later',
 disclaimer: 'Please feel free to get in touch, we value your feedback',
 hideOnSubmit: true

上記のようにjsファイル内でフォーム項目のテキストなどを書きます。

Related snippet :

  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: 画像にマウスオーバーすると拡大するコード。簡単に実装できて様々なところに応用できそうですね。クロスブラウザで動作してくれます。メニューにも使えるかな ...
  • Description: マウスオーバーで隠れていた子リストが上から表示されます。消すには×を押す必要があります。クロスブラウザで動作してくれるので、少し変わったUIにしたい ...
  • Description: ログインフォームをパネル内に入れて開閉式にする、というアイデア。クロスブラウザに対応しています。ログインの為にページ推移も無く、それなりに邪魔にもな ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • 詳細: シンプルなフォームバリデーションです。エフェクトも無く、汎用性のあるベーシックなタイプ。 デモ: demo チュートリアル: Inline V ...