blog

[formkeep] [zapier]
iframe, javascript, CSS Overrideなしで静的サイトにWebフォームが作れる「FormKeep」

はじめに

この記事は foodison advent calendar 2015 の9日目の記事です。

前回の記事ではエンジニアブログの目的とそれに合わせた機能をMiddlemanでどのように実装するかについて紹介しました。今回は本題とはちょっと離れますが静的サイトで課題となるWebフォームをiframe, javascript, CSS Overrideなしで構築できるサービスFormKeepについて紹介します。

FormKeepとは

FormKeep

FormKeepは簡単に言うと指定のエンドポイントにWebフォームからPOSTでデータを送信して自動返信したり任意のメールアドレスに通知するサービスです。POSTでデータを送るのでiframeやjavascriptで読み込む必要がないためフォームの形式は自由、スタイルもデザイナーの思い通りに作ることができます。送信後は任意のURLにリダイレクト(送信データはGETパラメータで取得可能)されます。

FormKeepの機能

  • 基本設定
    • フォームの名前
    • リダイレクト先のURL
    • 送信されたデータをリダイレクト時にGETデータとして送り返すかどうか
    • FaviconのURL
    • Ajax(Cross Origin Requests)に対応
  • メール
    • 通知先メールアドレス(複数可)
    • 自動返信
    • 送信元メールアドレス
    • Subject
    • メール本文(Markdownで記述可能)
  • エクスポート
    • CSVエクスポート
    • FormKeep API(JSONデータで取得可能)
  • Webhooks
    • 任意のエンドポイントにWebhookできる
    • Zapierを使った連携(例:Slackに送信された内容を含めた通知ができる)

FormKeepの良いところ

  • デザイナーでもWebフォームを自由にカスタマイズできる
  • 複数のメールアドレスに通知、自動返信ができる
  • CSVエクスポート、APIありJSONで値を取得できる
  • Webhooksで外部サービスとの連携が容易

FormKeepでできないこと

  • 送信内容のバリデーション
  • 自動返信メール上に送信データをインライン埋め込みする
  • 通知メール内容のカスタマイズ
  • ファイルの添付

料金体系

FormKeepは1フォーム単位の契約になっています。使える機能に違いはありませんがPERSONALの場合はGreat for portfolio sites, wedding invitations, and non-profits.となっており非営利という前提になっています。支払いはクレジットカード限定です。

プラン PERSONAL COMMERCIAL
月額 $7 $25

使い方

使い方は非常に簡単で、試用するだけであれば無料で使うことができます。

フォームの設置

FormKeepから発行されるエンドポイントに対してPOSTでデータを送るだけなので、すぐに試すことができます。

<form accept-charset="UTF-8" action="https://formkeep.com/f/<endpoint>" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <button type="submit">Submit</button>
</form>

フォームの要素について

フォームの要素は送信側で設定するだけでFormKeep側に指定することはありません。自由に項目を作成し送信することができます。また、email/name/urlのname属性はFormKeep側でスパムフィルタを行ってくれます。emailに関しては返信用メールアドレスとして使われ、Gravatarに登録されているメールアドレスであればアイコンが表示されます。

<input type="email" name="email" placeholder="Your Email">
<input type="text" name="name" placeholder="Your Name">
<input type="url" name="url" placeholder="Your Website">

サンプル

実際にこのブログのフォームはFormKeepにデータを送信します。
サンプルフォーム

ファイル送信について

ファイル送信だけは簡単にはできません。公式にはfilepicker.ioというサービスを使うことで実現できるようですが具体的な方法は試せていないのでそのうち試してみたいと思います。

サブミッション(問い合わせ)の管理

お問い合わせはメールで通知されますが、FormKeep上にもスタックされます。
試用版では最大5つのサブミッションまでしか利用できません。5つたまっている状態で新しい問い合わせが来た場合はスタックされず、通知もないので過去の問い合わせを消すか、素直にアップグレードしましょう。

FormKeep管理画面

カスタマイズ

フォームの生成

Middlemanであればフォームヘルパーを使ってフォームやインプット要素を生成できます。
フォーム全体を生成するヘルパーを作ればYAMLデータを用意するだけでフォームを作るなんてことも可能です。

name: その他のお問い合わせ
description: フォームに関するテキスト
accept-charset: 'UTF-8'
action: https://formkeep.com/f/<endpoint>
thanks: true
redirect:
method: POST
form:
  -
    type: hidden
    name: utf8
    value: 
  -
    type: select
    name: type
    label: 問い合わせ種別
    include_blank: false
    multiple: false
    value:
      選択してください:
      採用: 採用
      広告掲載: 広告掲載
      その他: その他
    required: true
    validators:
      -
        type: required
        value: true
        alert: この項目は必須です。
    placeholder:
  -
    type: email
    name: email
    label: メールアドレス
    value:
    required: true
    validators:
      -
        type: required
        value: true
        alert: この項目は必須です。
      -
        type: singlebyte
        value: true
        alert: 半角英数字で入力してください。
      -
        type: email
        value: true
        alert: メールアドレスの形式で入力してください。
    placeholder: hoge@fuga.com
  -
    type: text
    name: name
    label: お名前
    value:
    required: true
    validators:
      -
        type: required
        value: true
        alert: この項目は必須です。
    placeholder: お名前
  -
    type: tel
    name: tel
    label: 電話番号
    value:
    required: true
    validators:
      -
        type: required
        value: true
        alert: この項目は必須です。
      -
        type: phone
        value: true
        alert: ハイフン有りの電話番号を入力してください。
    placeholder: 0123-4567-8910
  -
    type: textarea
    name: contents
    label: 本文
    value:
    rows: 5
    required: false
    validators:
      -
        type: required
        value: true
        alert: この項目は必須です。
    placeholder: お問い合わせに関する詳細をご記入ください。
  -
    type: alert
    target: valid
    text: 送信
  -
    type: submit
    name: 'action[send]'
    value: 送信

フォームのバリデーション

バリデーションをしたければHTML5かJavascriptを使うことで実現できます。
簡易的で良ければrequired属性で良いでしょう。しっかりとバリデーションしたければjQueryやvue.js等方法はたくさんあります。このブログではvue.jsとvue-validatorを使ってバリデーションしています。手軽に使えて便利です。

Zapierを使った連携

FormKeepはZapierに対応しているのでフォームから送信された情報を自由に整形して他のサービスに渡すことができます。たとえばお問い合わせをSlackに通知する場合、このように入力された値をインラインに埋め込んで通知が可能です。

Slackへの通知設定

実際にこんな感じで通知されます。

Slackでの表示

まとめ

安くはありませんが FormKeep を使うことで静的なWebサイトでもデザイナーがカスタマイズ可能なWebフォームを作ることができます。スクラッチで作ってサイトが落ちるとか、バグが出たときの対応コストを考えると安いと思うんですね。Middlemanでサイトを作っている方は一度使ってみてはいかがでしょうか。