横からスライドインするフォーム画面を実装できる「Feedback Me」

「Feedback Me」は画面横からスライドインで表示できるフォーム画面を実装することができるjQueryプラグインです。

Feedback Me

FeedbackMe

名前の通り、お問い合わせやアンケートなどを設置するのに使えそうです。jQueryUIやBootstrapのテーマもサポートしているので、見た目にきれいなフォーム画面を作ることができます。

 

このように動作します。

FeedbackMe-demo-1

 

それでは「Feedback Me」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<link rel="stylesheet" href="./css/jquery.feedback_me.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="./js/jquery.feedback_me.js"></script>

 

JavaScriptはこのように実装します。HTMLもCSSも不要!

$(document).ready(function(){
  fm_options = {
      jQueryUI : true,
      name_placeholder:"Name please",
      trigger_label : "Click me",
      message_required : true,
      show_asterisk_for_required : true,
      feedback_url : "send_feedback"
  };

  fm.init(fm_options);
});

 

するとこのように作ることが出来ました。

FeedbackMe-sample-1

とても簡単ですね。今はTwitterもあるので、あえてフォーム画面を設置する必要性があるのかは疑問なところですが、もしかしたら仕事のオファーなども舞い込んでくる可能性もあります。固定ページで用意してもよいですが、ページ遷移が少ない分、ユーザーに楽ですよね。参考にどうぞ。

 

Home > JavaScript > 横からスライドインするフォーム画面を実装できる「Feedback Me」

Return to page top