フォームビルダーの作り方

フォームビルダーとは、人が自分でフォームを設計できるツールです。項目を選び、ルールを設定し、リンクを公開すると、回答が集まります。仕組みは三つの要素からなります。データとして保存される フォーム定義、定義を動くフォームに変換する レンダラー、そして通知やエクスポートを備えた 回答の保存先 です。作る前に本当に必要かを確認しましょう。お問い合わせフォームや応募フォームが必要なだけなら、そのフォームを直接作るほうが簡単で、ビルダーは不要です。

そもそもフォームビルダーが必要か

フォームビルダーは、フォームよりずっと大きなプロジェクトです。すべての項目の種類が、編集画面、公開フォーム、検証、保存、通知、エクスポートのすべてで動く必要があるからです。

フォームビルダーに必要な機能

フォーム定義

フォームごとに項目の一覧を構造化データとして保存します（Postgres の列に JSON を入れる方法がうまくいきます）。項目は次のような形です。

• id — ラベルが変わっても変わらない安定した ID
• type — テキスト、メール、数値、長文、選択、チェックボックス、日付、ファイル
• label と ヘルプテキスト
• 必須、最小・最大、許可するファイル形式
• 選択項目の 選択肢
• 順番、そして任意で 条件（「項目 X が Y のときだけ表示」）

編集画面はこの一覧を編集し、公開フォームはこの一覧を読み込みます。これがこの仕組みの要点です。フォームごとに新しいコードは不要です。

回答

• 回答 — フォーム、フォームのバージョン、送信日時、項目 ID をキーにした回答、ステータス（新規、確認済み、アーカイブ）。
• ファイル — アップロードされたファイルはファイルストレージに保存し、回答にはその参照だけを持たせます。データベースの行にファイルの中身を入れてはいけません。

ページ

• フォーム一覧 — 回答数付き。
• 編集画面 — 項目の追加、並べ替え、設定。横にライブプレビューを表示します。
• 設定 — 完了メッセージまたはリダイレクト、通知メール、公開・終了の日時、回答数の上限。
• 公開フォーム — 専用のリンクと、他のウェブサイトに埋め込める版。
• 回答の一覧 — 検索、ステータス、詳細表示、CSV エクスポート付き。

決めること・トレードオフ

バージョン管理。 200件の回答が集まった後で「電話番号」を「携帯電話番号」に変える人が必ず出てきます。回答を項目 ID で保存し、各回答にフォームのバージョンを記録しておけば、古い回答も正しく表示されます。そうしないと、データが静かにずれてしまいます。

検証は二回行います。 ブラウザでは素早いフィードバックのために入力をチェックし、サーバーでも改めてチェックします。誰でも直接エンドポイントにデータを送れるからです。決め手になるのはサーバー側のチェックです。

ファイルアップロード。 保存容量の費用、サイズ制限、ファイル形式のチェック、プライバシーの問題（履歴書、身分証、医療フォームなど）が伴います。形式とサイズを制限し、アップロードされたファイルは初期設定で非公開にして、フォームの所有者だけが読めるようにします。アプリにファイルアップロードを追加する方法をご覧ください。

通知。 「フォームが送信されたらメールで知らせてほしい」は当然求められる機能です。メールサービスと API キーが必要です。アプリからメールを送る方法をご覧ください。

スパム対策。 公開フォームはボットに見つかります。非表示のハニーポット項目（人には見えず、ボットが入力してしまう項目）、IP ごとのレート制限、サーバー側の検証、必要なら CAPTCHA サービスを使いましょう。

埋め込み。 他人のウェブサイトにフォームを載せるには、iframe での埋め込みが最もシンプルで安全です。スクリプトでの埋め込みは見た目がより自然になりますが、作りにくく安全性の確保も難しくなります。

条件分岐。 「この項目は…のときだけ表示」は人気の機能ですが、テストすべき組み合わせが一気に増えます。基本機能が固まってから追加しましょう。

うまくいく最初のプロンプト

チーム向けのフォームビルダーの Web アプリを作ってください。ログインしたユーザーは、ライブプレビュー付きの編集画面でフォームを作成します。項目の種類は、短いテキスト、長文、メール、数値、日付、単一選択、チェックボックス、ファイルアップロードです。各項目には、変わらない安定した ID、ラベル、ヘルプテキスト、必須フラグ、種類ごとのルール（最小・最大、選択肢、許可するファイル形式、10 MB のサイズ制限）を持たせます。フォーム定義は JSON で保存し、公開のたびに増えるバージョン番号を付けてください。各フォームには公開リンクと iframe の埋め込みコードを用意します。送信内容は、公開バージョンに照らしてサーバー側で検証し、回答は項目 ID をキーにしてフォームのバージョンとともに保存します。アップロードされたファイルは非公開のファイルストレージに入れてください。非表示のハニーポット項目と IP ごとのレート制限を追加します。フォームの所有者は、ステータス（新規、確認済み、アーカイブ）付きの回答一覧、詳細表示、CSV エクスポートを見られるようにしてください。すべてデータベースに保存します。条件分岐とメール通知は後回しにしてください。

構築のステップ

1. 編集画面と定義。 すべての項目の種類を含むフォームを作り、エージェントに保存された JSON を確認してもらいます。きれいで安定しているでしょうか。
2. 公開フォーム。 スマートフォンで実際に入力してみます。検証メッセージと確認画面をチェックしましょう。
3. サーバー側の検証。 ページを通さず、ルール違反の送信をサーバーに直接送るようエージェントに依頼します。拒否されるはずです。
4. バージョン管理。 数件の回答が集まった後に項目の名前を変えたり並べ替えたりします。古い回答が正しい内容を表示し続けるか確認しましょう。
5. アップロード。 サイズが大きすぎるファイルと、形式の違うファイルを試します。推測した URL で見知らぬ人がアップロードされたファイルを開けないことを確認してください。
6. 回答の一覧とエクスポート。 回答にカンマ、改行、アクセント記号付きの文字を入れて、CSV エクスポートを確認します。
7. 通知、埋め込み、条件分岐。 一つずつ追加しましょう。

よくある失敗

• ラベルで回答を保存する。 ラベルは変わります。安定した項目 ID を使いましょう。
• ブラウザだけの検証。 あくまで利便性のためのもので、保護にはなりません。
• アップロードされたファイルが公開されている。 フォームは、人に見られたくない書類を集めることがよくあります。
• スパム対策がない。 公開フォームは、数日でゴミのような送信で埋まることがあります。
• 一つのフォームのためにビルダーを作る。 フォームそのものを作りましょう。
• 公開製品で回答数が無制限。 顧客がフォームを作れる場合は、プランごとに上限を設けましょう。人気のフォーム一つでホスティング費用が膨らむことがあります。

既製のサービスのほうが良い場合

ホスト型のフォームサービスは、たいていの用途で優れていて安価です。埋め込み、スパム対策、決済、連携、そして多くの項目の種類でのアクセシビリティは、すでに解決済みです。チームがフォームを必要としているだけなら、それを使いましょう。Typeform の代替と Google フォームの代替もご覧ください。

自分で作るのが向いているのは、回答を自分のデータと一緒に扱う必要があるとき（自分で運用する CRM やクライアントポータルに送るなど）、ツールではできない送信後のワークフローが必要なとき、データの保存場所や所有権が要件になっているとき、またはフォームを売る製品の機能として提供するときです。

Mythex での構築

Mythex では、ビルダーをチャットで説明すると、編集画面と公開フォームを並べてライブプレビューでテストできます。フォーム定義と回答のためのデータベースは、専用の データベース として Mythex が追加します。アプリにアップロードが必要になると、ファイルストレージ も自動的に有効になります（Free プランでは 1 GB が上限です）。通知メールは、自分のキーで接続したプロバイダーを通して送られます。アプリを mythex.ai のリンクで公開するか、Pro プランなら独自ドメインで公開すると、公開フォームのリンクがそこから機能します。

よくある質問