ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これは使い勝手良さそう!

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で指定されたメソッドが呼ばれる仕組みです。バリデーションの仕組みもあります。

こちらが管理画面。埋め込むHTMLが表示されています。
こちらが管理画面。埋め込むHTMLが表示されています。

オプション。確認メールを送るか否か、CSV出力などがサポートされています。
オプション。確認メールを送るか否か、CSV出力などがサポートされています。

メールを送信しました。管理画面にリアルタイムに行が追加されます。
メールを送信しました。管理画面にリアルタイムに行が追加されます。

フォームの構造を変えても大丈夫です。

message2を追加した場合。
message2を追加した場合。

Fireformは汎用的なデータ構造を維持しているので、フォームの構造を自由に変更できるのがメリットです。さらにFireform自体ではフォームの内容やデザインを管理していませんので、自由に変更ができます。

Googleスプレッドシートをお問い合わせフォームとして使っているケースがありますが、あちらはiframeでかつデザインの自由度がないのが難点です。Fireformを使えばデザインの自由度が高く、かつ埋め込むのが簡単なフォームが作れるでしょう。

Fireformはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Fireform

SFDevLabs/fireform

 

MOONGIFTの関連記事

  • DevRel
  • Com2