Fireform - 超簡単に設置できる自由度の高いフォーム
これは使い勝手良さそう! Webサイトを作ったらお問い合わせフォームが欲しくなると思います。そのためにすることと言えば、メールフォームを作り、SMTPサーバを立てて、メール作成処理を作る…そんなのは考えただけでも面倒です。しかもWebサイトを作るたびに行っているでしょう。 もっと簡単にWebフォームを作りたい、そう考える人はFireformを使ってみましょう。汎用的なフォームを手軽に設置できます。
Fireformの使い方
最もベーシックなフォームは次のようになります。
< !doctype html>
<body>
<form id="MySelector">
<input type="text" name="givenname" placeholder="Name"/>
<input type="text" name="message2" placeholder="Message2"/>
<input type="text" name="message" placeholder="Message"/>
<input type="submit"/>
</form>
<script src="http://src.fireform.org/fireform.min.js"></script>
<script>
/* See more options at http://fireform.org/docs */
var options = {
simpleValidation:false,
formValidationClass:"custom-submit-success",
callback:function(err, val){ console.log(err,"callback") }
}
new Fireform('#MySelector', 'http://fireform.org/form_path', options)
</script>
</body>
フォームにIDを付けて、そのIDをFireformで指定するだけです。これを表示すると次のようになります。
そして値を入れて送信するとcallbackで指定されたメソッドが呼ばれる仕組みです。バリデーションの仕組みもあります。
フォームの構造を変えても大丈夫です。
Fireformは汎用的なデータ構造を維持しているので、フォームの構造を自由に変更できるのがメリットです。さらにFireform自体ではフォームの内容やデザインを管理していませんので、自由に変更ができます。
Googleスプレッドシートをお問い合わせフォームとして使っているケースがありますが、あちらはiframeでかつデザインの自由度がないのが難点です。Fireformを使えばデザインの自由度が高く、かつ埋め込むのが簡単なフォームが作れるでしょう。
Fireformはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。