Zenn
🌱

ヘッドレスフォームサービスを作りました

2022/07/05に公開
開発
form
hyperform
idea

友人のmikkameと一緒に、HyperFormというヘッドレスフォームサービスを作りました。

formタグのaction属性に、サービスが発行するURLをセットするだけで、問い合わせをいい感じに管理できます。

サービス内容と使い方

  1. サービスに登録すると、カスタムURL(https://hyperform.jp/api/xxxxx)が発行されます

  2. 自分のサイトでHTMLを自由にマークアップして、formタグのaction属性に、発行されたカスタムURLをセットします

<form method='post' action='https://hyperform.jp/api/xxxxx'>
  <label>メールアドレス</label>
  <input type='email' name='email'>
  <label>お問い合わせ内容</label>
  <textarea name='message'></textarea>
</form>

  1. フォームからの問い合わせデータを、管理画面で確認できます

  2. メールやSlackで通知を受け取ったり、スプレッドシートに問い合わせを記録することができます

作ろうと思ったきっかけ

ぼくもmikkameもエンジニアとして働いているのですが、2人とも「問い合わせフォームの実装ダルいな」と思っていました。(何がどうダルいのかはこちらの記事にまとめました)

Google Formsがハマるケースもありますが、デザインの細かいカスタマイズが効かないとか、メールの文面からGoogle Formsを使っているのがバレるのが嫌だとか、メール通知を複数人に送りたいとか、フォーム送信後のリダイレクト先を変えたいとか、もろもろの理由で使えないことも多いです。

そういうときに使いたいのが、getform.ioやFormBucketなどのヘッドレスフォームサービスです。ただどれも海外のサービスで、開発元がよくわからない英語UIのサービスを使って納品するのは、自分の手から離れた後に問題が起こった時のことを考えると、使うのに勇気が必要でした。

「日本で同じようなサービス出てきてくれ〜」と思っていたけれど、一向に出てくる気配がなかったので、自分たちで作ることにしました。

なぜヘッドレスフォームなのか

デザインの自由度が高い

Google Forms等でフォームを作る場合、サービスで用意されているデザインから好きなものを選んでフォームを作る形になるので、デザイン上の制約があります。

ヘッドレスフォームの場合、HTMLとCSSで完全に自由にマークアップできます。例えばチャットボットのように右下に常駐させたりすることもできます。

機能的な自由度が高い

ヘッドレスフォームではinput[type="hidden]を使うことができるので、ログイン中のユーザーのメールアドレスや、ページURLなどを送信したり、エラーページにフォームを設置してエラー内容を送信することができます。

その他にも、JavaScriptで動的に項目数を変化させるなど、様々な使い方ができます。

開発体験が(ちょっとだけ)良い

Google Formsなどを自分のサイトに埋め込むとき、以下のような流れで実装することになります。

  1. サービスの契約と各種設定
  2. 発行された埋め込み用コードを、そのサービスで決められたルールに従って自分のサイトに埋め込む
  3. CSSでデザインを微調整する

ヘッドレスフォームの場合、formタグのaction属性にURLをセットするだけで、POSTされたデータをよしなに保存してくれます。formタグの中のinput要素の数や種類が変わっても、(基本的に)ヘッドレスフォーム側の設定をいじる必要はありません。

またサービスの契約を最後にして、先にフォームの実装を進めることも可能です。

こだわりポイント

セキュリティ周り

アップロードしたファイルを、必ず別サーバーでウイルスチェックした上で、問題がなかった場合のみ通知メールに添付したり、管理画面で表示したりしています。

またスパム対策のために、reCAPTCHAを標準搭載しています。

メール周り

メールの文面や件名を自由にカスタマイズできます。
また問い合わせを行ったユーザーのメールアドレスが、管理者への通知メールのreply_toに入るため、問い合わせの返信をシームレスに行うことができます。

HyperFormを使っていることを完全に隠したい場合には、メールサーバーやメール送信元を変更することも可能です。

今後改善したいところ

非同期での通信を可能にする

今はスパム対策との兼ね合いで、formタグからの問い合わせだけを受け付ける仕様になっています。
今後はaxiosからのPOSTとか、ネイティブアプリからのPOSTも受け付けられるようにできたらなと思っています。

(追記)
できるようになりました🎉
https://marsh-metatarsal-460.notion.site/API-c1f2203ff6244e4fa8d4a55f65ef4109

連携サービスを増やす

現状、外部サービスとの連携はSlack通知と、スプレッドシートへの記録の2つです。
ChatworkとかTeamsの通知もあった方がいい気もしているので、増やすかもです。

おわりに

質問や要望などあれば、この記事のコメントや、LPの問い合わせフォームなどからお気軽にコメントください！

https://hyperform.jp/

Discussion